react-jsonschema-form出现Module parse failed错误，求解决方案

API 探路者

2026-8-7

解决 React 17.0.2 + react-scripts 4.0.3 中 @rjsf/validator-ajv8 解析报错问题

问题原因

react-scripts 4.x 基于 Webpack 4，默认不会转译 node_modules 目录中的 ES6+ 语法特性（如可选链 ?.、空值合并 ??）。而新版 @rjsf/validator-ajv8 的编译产物中使用了这些 Webpack 4 不支持的语法，导致出现 Module parse failed: Unexpected token 错误。

解决方案

方案1：降级 @rjsf 包到兼容版本

选择不使用 Webpack 4 不支持语法的旧版本，确保 @rjsf/core 和 @rjsf/validator-ajv8 版本一致：

# 安装兼容的 5.x 系列版本
npm install @rjsf/core@5.12.1 @rjsf/validator-ajv8@5.12.1 --save

方案2：自定义 Webpack 配置转译目标包

借助 react-app-rewired 修改默认配置，让 Babel 转译 @rjsf 相关依赖：

安装依赖工具：

npm install react-app-rewired customize-cra --save-dev

在项目根目录创建 config-overrides.js 文件，写入以下配置：

const { override, addBabelPlugins } = require('customize-cra');

module.exports = override(
  // 添加支持新语法的 Babel 插件
  addBabelPlugins(
    '@babel/plugin-proposal-optional-chaining',
    '@babel/plugin-proposal-nullish-coalescing-operator'
  ),
  // 修改规则，让 Babel 处理 @rjsf 包
  (config) => {
    config.module.rules[1].oneOf.forEach(rule => {
      if (rule.test?.toString().includes('jsx|js')) {
        rule.include.push(/node_modules\/@rjsf/);
      }
    });
    return config;
  }
);

修改 package.json 中的启动脚本：

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test",
  "eject": "react-scripts eject"
}