与 webpack 反应构建中的 Hetting 错误

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"]
                }
            }
        },

...