"You may need an appropriate loader" in React and Webpack

Question

I've been trying to use react js with webpack, but when doing "npm run build" I get the following:

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| import ReactDOM from 'react-dom';
| const Index = () => {
>   return <div>Welcome to React!</div>;
| };
| ReactDOM.render(<Index />, document.getElementById('app'));
 @ multi ./src/index.js ./src/scss/main.scss main[0]

I don't know what happens, when I start the application with "npm start" if the text comes out. Then I leave my webpack configuration file and the .babelrc.

 module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        },

      }

    ]
  },

My code react:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
const Index = () => {
  return <div>Welcome to React!</div>;
};
ReactDOM.render(<Index />, document.getElementById('app'));

https://stackoverflow.com/questions/33469929/you-may-need-an-appropriate-loader-to-handle-this-file-type-with-webpack-and-b?rq=1 — joshwilsonvu, Sep 17 '19 at 15:51
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/199582/discussion-between-miguel-urbina-rodriguez-and-josh-wilson). — , Sep 17 '19 at 16:05

score 0 · Accepted Answer · answered Sep 17 '19 at 16:58

From the chat, you have in your webpack.config.js:

module.exports = {
//...
// cargadores, los que transpilan tal formato en otro aceptable por los navegadores
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        },

      }
    ]
  },
  module: {
    rules: [
      {
        test: /\.(sa|sc|c)ss$/,
        use: [production ? MiniCSSExtractPlugin.loader : 'style-loader', 'css-loader', 'sass-loader'],
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'images/[name].[ext]',
              publicPath: '../'
            }
          }
        ]
      },
      {
        test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'fonts/[name].[ext]',
              outputPath: '../'
            }
          }
        ]
      },
    ]
  }
};
//...

You have duplicate module fields and should combine them into

module.exports = {
// cargadores, los que transpilan tal formato en otro aceptable por los navegadores
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        },

      },
      {
        test: /\.(sa|sc|c)ss$/,
        use: [production ? MiniCSSExtractPlugin.loader : 'style-loader', 'css-loader', 'sass-loader'],
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'images/[name].[ext]',
              publicPath: '../'
            }
          }
        ]
      },
      {
        test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'fonts/[name].[ext]',
              outputPath: '../'
            }
          }
        ]
      },
    ]
  }
};

score 0 · Answer 2 · answered Oct 15 '19 at 16:55

I don't know how your babel config file looks like but, you probably should try this:

webpack.config.js

module: {
  rules: [
    {
      test: /\.jsx$|\.js$/,
      exclude: /node_modules/,
      loader: "babel-loader",
      options: {
        presets: ["@babel/preset-env", "@babel/preset-react"]
      }
    }
  ]
}

.babelrc

{
  "presets": ["@babel/env", "@babel/react"]
}

This should work fine.

"You may need an appropriate loader" in React and Webpack

2 Answers2