Hetting error in react build with webpack

Question

I am using react.js & web pack. when run the NPM run build command get this error I am learning the how to make build with web pack so I try first time but getting this error. please help!

I write this code from some web pack tutorial website.

assets by status 1.05 KiB [cached] 2 assets
./src/index.js 796 bytes [built] [code generated] [1 error]

ERROR in ./src/index.js 13:2
Module parse failed: Unexpected token (13:2)
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
| const ProviderComponent = ()=>{
|   return (
>   <Provider store={store} >
|       <App/>
|     </Provider>

webpack 5.65.0 compiled with 1 error in 901 ms
npm ERR! code ELIFECYCLE
npm ERR! errno 1

Web pack file

const port = process.env.PORT || 8080;
const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');

module.exports = {
    output :{
        path:path.join(__dirname,'/dist'),
        filename:'main.[fullhash].js'
    },
    module:{
        rules:[{
            test:/\.(js|jsx)$/,
            exclude:/node_modules/,
        },
           {
                test: /\.less$/,
                use: [
                    { loader: 'style-loader' },
                    { loader: 'css-loader' },
                    { loader: 'less-loader' }
                ]
            },
        ]
        
    },
    resolve: 
    {
        mainFiles: ['index', 'Index'],
        extensions: ['.js', '.jsx','.css'],
        alias: {
            '@': path.resolve(__dirname, 'src'),
        }
    }, 
    plugins:[
      new HtmlWebPackPlugin({
      template:'./public/index.html'
      })
    ],

    devServer:{
        host:'localhost',
        port:port,
        historyApiFallback:true,
        open:true
    }
}

Answer 1

You have JSX in your index.js which is not standard javascript. Webpack by default can only transpile standard javascript, for transpiling JSX which is a react feature, you need to use something that can help webpack recognize the syntax of JSX, webpack calls this things loaders.

There are different loaders which you can use, here for example you should use babel-loader to tell webpack how to understand JSX.

babel-loader internally uses Babel.js which is a library for transpiling non -standard javascript into standard javascript.

It's better to get familiar with Babel.js and then use it in webpack. But for now, what you need is this:

Install babel (with preset-react) and babel-loader

npm install -D babel-loader @babel/core @babel/preset-env @babel/preset-react

Add babel to your webpack js|jsx files rule

You can set babel options in the webpack config file like I'm doing here, or create a separate file for configuring babel itself. You can read more about it in Babel.js docs.

...

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

...