javascript - 升级到 webpack 5 和 bable 7 和 react 17 会导致 jsx 解析错误

Question

我最近刚决定尝试升级到 webpack 5 和 babel/polfill，因为我的 react 项目已弃用它，这导致了各种问题的开始。在我升级任何东西之前，一切都运行良好

这是我得到的错误

./src/index.js 中的错误 23:4 模块解析失败：意外令牌 (23:4) 您可能需要适当的加载程序来处理此文件类型，目前没有配置加载程序来处理此文件。见https://webpack.js.org/concepts#loaders|

const app = (
  <Provider store={store}> //it's complaining about this line
         <BrowserRouter>
             <App /> 

webpack.config.common.js

module.exports = {
    entry: paths.appIndexJs,
    output: {
        filename: '[name].[contenthash].js',
        path: paths.appBuild,
        publicPath: './'
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebPackPlugin({
            filename: 'index.html',
            inject: true,
            template: paths.appHtml
        })
    ],
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                enforce: 'pre',
                loader: 'eslint-loader',
                options: {
                    formatter: 'react-dev-utils/eslintFormatter',
                    eslintPath: 'eslint',
                    resolvePluginRelativeTo: __dirname
                },
                include: paths.appSrc
            },
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        cacheDirectory: true
                    }
                }
            },
            {
                test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
                loader: require.resolve('url-loader'),
                //type: 'asset/inline',
                options: {
                  limit: imageInlineSizeLimit,
                  name: 'static/media/[name].[contenthash:8].[ext]',
                },
            },
            {
                loader: require.resolve('file-loader'),
                //type: 'asset/resource',
                exclude: [/\.(js|mjs|jsx|ts|tsx|scss)$/, /\.html$/, /\.json$/],
                options: {
                    name: 'static/media/[name].[contenthash:8].[ext]',
                },
            }
        ]
    }
}

包.json

 "dependencies": {
        "@babel/runtime": "^7.12.5",
        "axios": "^0.21.1",
        "express": "^4.17.1",
        "html-react-parser": "^0.10.3",
        "moment": "^2.26.0",
        "node-html-parser": "^1.2.16",
        "react": "^16.13.1",
        "react-dom": "^16.13.1",
        "react-redux": "^7.2.2",
        "react-router-dom": "^5.1.2",
        "redux": "^4.0.5",
        "redux-thunk": "^2.3.0",
        "yarn": "^1.22.10"
    },
    "devDependencies": {
        "@babel/core": "^7.9.6",
        "@babel/plugin-transform-runtime": "^7.12.10",
        "@babel/preset-env": "^7.9.6",
        "@babel/preset-react": "^7.9.4",
        "babel-eslint": "^10.1.0",
        "babel-loader": "^8.1.0",
        "babel-plugin-named-asset-import": "^0.3.6",
        "babel-preset-react-app": "^9.1.2",
        "clean-webpack-plugin": "^3.0.0",
        "css-loader": "^3.5.3",
        "dotenv": "^8.2.0",
        "enzyme": "^3.11.0",
        "enzyme-adapter-react-16": "^1.15.2",
        "enzyme-to-json": "^3.5.0",
        "eslint": "^6.8.0",
        "eslint-config-react-app": "^5.2.1",
        "eslint-loader": "^4.0.2",
        "eslint-plugin-flowtype": "^4.7.0",
        "eslint-plugin-import": "^2.20.2",
        "eslint-plugin-jsx-a11y": "^6.2.3",
        "eslint-plugin-react": "^7.19.0",
        "eslint-plugin-react-hooks": "^4.0.0",
        "file-loader": "^6.0.0",
        "html-webpack-plugin": "^4.5.1",
        "identity-obj-proxy": "^3.0.0",
        "jest": "^26.0.1",
        "mini-css-extract-plugin": "^0.9.0",
        "node-sass": "^4.14.1",
        "optimize-css-assets-webpack-plugin": "^5.0.4",
        "postcss-flexbugs-fixes": "^4.2.1",
        "postcss-loader": "^3.0.0",
        "postcss-normalize": "^9.0.0",
        "postcss-preset-env": "^6.7.0",
        "react-dev-utils": "^10.2.1",
        "react-hot-loader": "^4.12.21",
        "react-test-renderer": "^16.13.1",
        "resolve-url-loader": "^3.1.2",
        "sass-loader": "^8.0.2",
        "style-loader": "^1.2.1",
        "terser-webpack-plugin": "^3.0.6",
        "url-loader": "^4.1.0",
        "webpack": "^5.10.1",
        "webpack-cli": "4.2.0",
        "webpack-dev-server": "3.11.1",
        "webpack-merge": "^5.0.9"
    }