克隆公司项目遇Module parse failed编译错误，求解决方案

问题分析 #

编译错误出现在@hello-pangea/dnd/dist/dnd.esm.js的可选链操作符（el?.ownerDocument?.defaultView），核心原因：

• 项目使用react-scripts 4.0.3，其内置Babel配置默认不转译node_modules目录下的代码
• react-beautiful-dnd@13.1.1间接依赖的@hello-pangea/dnd采用了ES2020+语法，但未预编译为兼容低版本Babel的代码，导致解析失败

可行解决方案（按优先级排序） #

方案1：用react-app-rewired自定义Babel配置（不改动依赖版本） #

无需eject项目，通过工具扩展react-scripts配置：

1. 安装必要依赖：

npm install --save-dev react-app-rewired customize-cra @babel/plugin-proposal-optional-chaining

2. 在项目根目录创建config-overrides.js文件，添加如下内容：

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

module.exports = override(
  // 添加可选链语法支持
  addBabelPlugins('@babel/plugin-proposal-optional-chaining'),
  // 让Babel转译@hello-pangea/dnd包
  (config) => {
    config.module.rules[0].include.push(/node_modules\/@hello-pangea\/dnd/);
    return config;
  }
);

3. 修改package.json中的scripts命令：

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

4. 重新启动项目：

npm start

方案2：锁定@hello-pangea/dnd的兼容版本 #

通过resolutions强制指定该依赖的版本为预编译过的兼容版：

1. 在package.json的resolutions字段中添加：

"resolutions": {
  "@react-pdf/font": "2.2.0",
  "@hello-pangea/dnd": "^16.2.0"
}

注：可根据实际兼容情况调整版本号，确保与react-beautiful-dnd@13.1.1兼容

2. 重新安装依赖：

npm i --legacy-peer-deps

方案3：降级react-beautiful-dnd到无@hello-pangea/dnd依赖的版本 #

react-beautiful-dnd@12.x.x版本尚未迁移到@hello-pangea/dnd，可临时降级：

1. 修改package.json中依赖版本：

"react-beautiful-dnd": "^12.3.0"

2. 重新安装依赖：

npm i --legacy-peer-deps

方案对比 #

• 方案1：不改动核心依赖，适配团队现有版本，但需引入额外工具，需团队同步配置
• 方案2：无需额外工具，仅锁定依赖版本，但需验证版本兼容性
• 方案3：快速解决，但可能丢失react-beautiful-dnd的新特性

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