使用Webpack将React应用嵌入现有网站div的报错解决求助

尝试将React构建产物嵌入现有网站的div中，使用Webpack打包时遇到以下错误：

ERROR in ./src/index.js 16:2
Module parse failed: Unexpected token (16:2)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.
| const root = ReactDOM.createRoot(document.getElementById("root"));
| root.render(

return (  <Provider store={store}>
)

|

return (<App />)

|

当前配置文件：

package.json 依赖片段 #

...
"devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^9.1.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "webpack": "^5.83.1",
    "webpack-cli": "^5.1.1"
  }

webpack.config.js 配置 #

const path = require("path");
module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader",
        options: {
          presets: [
            [
              "@babel/preset-react",
              {
                runtime: "automatic",
              },
              "env",
              "react",
              "es2015",
              "stage-2",
            ],
          ],
        },
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
  externals: {
    react: "React",
    "react-dom": "ReactDOM",
  },
};

1. 修复Babel预设配置结构 #

你的Webpack配置中，Babel presets的写法完全错误——所有预设被塞进了一个嵌套数组里，导致Babel无法正确识别解析JSX的预设。正确的写法是将每个预设作为独立项传入数组：

options: {
  presets: [
    ["@babel/preset-react", { runtime: "automatic" }],
    "@babel/preset-env"
  ]
}

2. 升级Babel核心依赖版本 #

babel-loader@9.x 需要搭配 @babel/core（Babel 7+版本），而你当前安装的是旧版的 babel-core@6.x，版本不兼容会导致loader无法正常工作。

3. 更新package.json依赖 #

卸载旧的Babel包，安装兼容的新版本：

npm uninstall babel-core babel-preset-es2015 babel-preset-react babel-preset-stage-2
npm install --save-dev @babel/core @babel/preset-env @babel/preset-react

同时确保安装css相关loader（如果还没装）：

npm install --save-dev style-loader css-loader

4. 修正后的完整webpack.config.js #

const path = require("path");
module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    // 显式声明文件名，避免默认规则变动
    filename: "main.js"
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader",
        options: {
          presets: [
            ["@babel/preset-react", { runtime: "automatic" }],
            "@babel/preset-env"
          ]
        },
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
  externals: {
    react: "React",
    "react-dom": "ReactDOM",
  },
};

5. 嵌入现有HTML页面的步骤 #

1. 运行 npx webpack 完成打包，得到dist/main.js
2. 在现有页面的<head>中引入React和ReactDOM的CDN（因为配置了externals，无需打包进产物）：

   <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
   <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
   

3. 在页面中添加React挂载的目标div：

   <div id="root"></div>
   

4. 在页面底部引入打包后的React脚本：

   <script src="./dist/main.js"></script>
   

内容的提问来源于stack exchange，提问作者Antonio Ruiz