升级react-scripts至5.0.0后JSX语法启用失败求助

问题背景 #

为修复安全漏洞，将项目的react-scripts从旧版本升级到5.0.0，同步升级了webpack版本。本地开发环境运行正常，但部署后出现JSX语法不被支持的构建错误。

报错信息 #

Uncaught runtime errors:
×
ERROR
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /app/app/src/index.js: Support for the experimental syntax 'jsx' isn't currently enabled (52:3):


  50 |
  51 | const app = (
> 52 |   <React.StrictMode>
     |   ^
  53 |   <Provider store={store}>
  54 |       <BrowserRouter>
  55 |           <App config={config} />


Add @babel/preset-react to the 'presets' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-jsx to the 'plugins' section to enable parsing.
    at instantiate (/app/node_modules/@babel/parser/lib/index.js:63:32)
    at constructor (/app/node_modules/@babel/parser/lib/index.js:358:12)
    at Parser.raise (/app/node_modules/@babel/parser/lib/index.js:3255:19)
    at Parser.expectOnePlugin (/app/node_modules/@babel/parser/lib/index.js:3301:18)
    at Parser.parseExprAtom (/app/node_modules/@babel/parser/lib/index.js:11245:18)
    ...（省略后续堆栈信息）

环境信息 #

• Node版本：14.21.3
• npm版本：6.14.18
• React/react-dom版本：17.0.1
• react-scripts版本：5.0.0
• webpack版本：5.82.0

已尝试的无效操作 #

手动在项目根目录添加了webpack.config.js、.babelrc、babel.config.js配置文件，并安装了额外的babel开发依赖，但部署后错误依旧。相关配置如下：

package.json（devDependencies片段） #

"devDependencies": {
    "@babel/cli": "^7.22.9",
    "@babel/core": "^7.22.9",
    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
    "@babel/preset-env": "^7.22.9",
    "@babel/preset-react": "^7.22.5",
    "webpack": "^5.82.0"
}

webpack.config.js #

module.exports = {
  entry: "./src/index.js",
  resolve: {
    extensions: [".ts",".jsx" , ".tsx", ".js", ".json"],
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/i,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              '@babel/preset-env',
              '@babel/preset-react',
            ],
          },
        },
      },
      {
        test:/\.css$/,
        use:["style-loader","css-loader"]
      }
    ],
  }
}

.babelrc #

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

babel.config.js #

module.exports = {
  presets: [
    "@babel/preset-env",
    "@babel/preset-react"
  ],
};

有效解决方案 #

1. 移除自定义配置文件 #

直接删除项目根目录下的webpack.config.js、.babelrc、babel.config.js。react-scripts 5.x已经内置了完整且适配的Babel和Webpack配置，自定义配置会干扰内置逻辑，导致JSX解析失败。

2. 卸载不必要的依赖 #

执行以下命令卸载手动安装的babel和webpack相关依赖：

npm uninstall @babel/cli @babel/core @babel/plugin-proposal-private-property-in-object @babel/preset-env @babel/preset-react webpack

react-scripts已经包含了所有构建所需的依赖包，手动安装的高版本依赖会和内置版本冲突，引发构建异常。

3. 清理缓存并重新构建 #

• 清理npm缓存：

  npm cache clean --force
  

• 删除node_modules和package-lock.json：

  rm -rf node_modules package-lock.json
  

• 重新安装依赖：

  npm install
  

• 重新构建项目：

  npm run build
  

4. 检查部署流程 #

确保部署时使用的是npm run build生成的build文件夹，不要直接上传源码；同时确认部署环境的Node版本和本地一致，避免版本差异导致的问题。

问题根源 #

create-react-app的react-scripts封装了一套标准化的构建配置，其中已经包含@babel/preset-react来处理JSX语法。手动添加的配置文件会破坏内置的配置链，导致Babel无法正确识别JSX；此外，手动安装的依赖版本与react-scripts内置版本不兼容，进一步加剧了构建错误。

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