reactjs - Webpack5 config error: An appropriate loader to handle this file type

Question

I'm trying to migrate webpack4 to webpack5. My project has both react and typescript files. I'm running into below error:

ERROR in ./src/index.js 19:4
Module parse failed: Unexpected token (19:4)
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

>ReactDOM.render(
>     >     <Provider store={store}>
>     |         <App/>
>     |     </Provider>

,

webpack 5.11.1 compiled with 1 error in 67 ms

webpack.common.js

const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const webpack = require('webpack');
const moment = require('moment');

const CircularDependencyPlugin = require('circular-dependency-plugin');

module.exports = (...args) => {

    const [
        env,
        { configName }
    ] = args;

    return {
        entry: ['@babel/polyfill', './src/index.js'],
        plugins: [
            new CleanWebpackPlugin(),
            new HtmlWebpackPlugin({
                template: './src/index.html',
                filename: './index.html'
            }),
            new MiniCssExtractPlugin({
                filename: '[name].[hash].css',
                chunkFilename: '[name].[chunkhash].css',
            }),

            new webpack.DefinePlugin({
                __SNAPSHOT__: JSON.stringify(moment().format('MMMM Do YYYY, h:mm:ss a')),
                __MODE__: JSON.stringify(env),
            }),
            new CircularDependencyPlugin({
                exclude: /a.js|node_modules/,
                failOnError: true,
                allowAsyncCycles: false,
                cwd: process.cwd(),
            })
        ],
        output: {
            path: path.resolve(__dirname, 'build'),
            chunkFilename: '[name].[chunkhash].js',
            filename: '[name]_bundle.js',
            publicPath: '/build/',
            chunkLoading: false
        },
        target: ['web'],
        module: {
            rules: [
                {
                    test: /.(ts|js)x?$/,
                    exclude: /node_modules/,
                    use: {
                        loader: "babel-loader",
                        options: {
                            presets: [
                                "@babel/preset-env",
                                "@babel/preset-react",
                                "@babel/preset-typescript",
                            ],
                        },
                    },
                },
                {
                    test: /.html$/,
                    use: ['html-loader']
                },
                {
                    test: /.css$/,
                    use: ['style-loader', 'css-loader', 'postcss-loader']
                },
                {
                    test: /.(sa|sc)ss$/,
                    use: [
                        {
                            loader: MiniCssExtractPlugin.loader,
                            options: {
                                hmr: env === 'development',
                            },
                        },
                        'css-loader',
                        'postcss-loader',
                        'sass-loader',
                    ]
                },
                {
                    test: /.(png|woff|woff2|eot|ttf|svg)(?v=[0-9].[0-9].[0-9])?$/,
                    use: ['url-loader']
                }
            ],
        },
        resolve: {
            extensions: ['.ts', '.tsx', '.js', '.jsx']
        },
        devServer: {
            historyApiFallback: true,
            port: 8888
        }
    }
};

Answer 1

等待大神答复