"You may need an appropriate loader" in React and Webpack - node.js

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

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: '../'
}
}
]
},
]
}
};

Answer 2

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.