运行npm run build时Webpack处理React JSX<div>标签编译失败如何解决

数据老陈

2026-9-27

问题根因与解决方案

你出现该报错的核心原因有3个：

你使用react-scripts（也就是Create React App脚手架）执行编译，默认不会读取项目根目录下自定义的webpack.config.js，你写的loader配置完全没有生效
默认babel-loader会跳过node_modules目录下的文件编译，你fork的react-d3-graph是未编译的JSX源码，放在node_modules下没有被loader处理
你的webpack配置本身存在语法错误，无效配置项也会导致规则不生效

具体修复步骤

步骤1：覆盖Create React App的默认配置

你可以用craco工具无需eject就能修改CRA的内置配置：

安装依赖：

npm install @craco/craco --save-dev

修改package.json中的scripts配置：

"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test",
  "eject": "react-scripts eject",
  "api": "npx json-server --watch .\\src\\components\\limit.json --port 8000"
}

步骤2：新增craco.config.js配置

在项目根目录新建craco.config.js，添加以下配置，让babel-loader处理react-d3-graph的源码：

module.exports = {
  webpack: {
    configure: (webpackConfig) => {
      // 找到babel-loader的规则
      const babelLoaderRule = webpackConfig.module.rules.find(
        rule => rule.loader && rule.loader.includes('babel-loader')
      );
      // 修改规则，不排除react-d3-graph
      babelLoaderRule.exclude = /node_modules(?!\/react-d3-graph)/;
      return webpackConfig;
    }
  },
  babel: {
    presets: ['@babel/preset-env', '@babel/preset-react'],
    plugins: ['@babel/plugin-proposal-class-properties']
  }
};