"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'));

Answer 1

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.