React旧项目启动报错：需额外loader处理加载结果求助

我维护一个已开发2年的React.js项目（React 16.12 + react-scripts 3.4.1），每次启动都会出现以下报错：

./node_modules/react-scripts/node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| return getFeed(parseDOM(feed, options));
| }

export * as DomUtils from "domutils";
| // Old name for DomHandler
| export { DomHandler as DefaultHandler };

浏览器端显示：

项目的package.json依赖如下：

{
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.4.0",
    "@testing-library/user-event": "^7.2.1",
    "apexcharts": "^3.15.6",
    "axios": "^0.19.2",
    "b64-to-blob": "^1.2.19",
    "base64-stream": "^1.0.0",
    "canvasjs": "^1.8.3",
    "date-fns": "^2.11.1",
    "dateformat": "^3.0.3",
    "fs": "0.0.1-security",
    "glamor": "^2.20.40",
    "image-exists": "^1.1.0",
    "localizer": "^0.2.4",
    "moment": "^2.24.0",
    "moment-range": "^4.0.2",
    "profile-picture": "git+https://github.com/dsalvagni/react-profile-picture.git",
    "react": "^16.12.0",
    "react-apexcharts": "^1.3.7",
    "react-avatar-edit": "^0.8.3",
    "react-big-calendar": "^0.24.1",
    "react-calendar": "^3.0.0",
    "react-date-range": "^1.0.3",
    "react-daterange-picker": "^2.0.1",
    "react-debounce-input": "^3.2.2",
    "react-dom": "^16.12.0",
    "react-donut": "^1.0.4",
    "react-donut-chart": "^1.1.8",
    "react-image-crop": "^8.6.2",
    "react-loader-spinner": "^3.1.5",
    "react-modal": "^3.11.2",
    "react-newline-to-break": "^1.0.6",
    "react-places-autocomplete": "^7.2.1",
    "react-rangeslider": "^2.2.0",
    "react-redux": "^7.1.3",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.4.1",
    "react-svg-donut": "^0.1.7",
    "react-toastify": "^5.5.0",
    "redux": "^4.0.5",
    "redux-thunk": "^2.3.0",
    "urls-checker": "^1.1.0",
    "validate-image-url": "^1.0.1"
  }
}

问题原因 #

报错中的export * as DomUtils from "domutils";是ES2020新增的导出语法，当前使用的react-scripts 3.4.1自带的Babel配置默认未启用支持该语法的插件。大概率是项目中的某个依赖（比如RSS解析类工具）引入了高版本的domutils库，其中使用了该语法，导致babel-loader无法处理。

解决方案 #

按以下优先级尝试：

1. 清理依赖缓存并重装

先尝试基础的缓存清理，解决可能的依赖版本冲突：

# 删除依赖目录和锁文件
rm -rf node_modules package-lock.json
# 重新安装依赖
npm install

2. 强制锁定兼容版本的domutils

如果清理重装无效，说明有依赖强制引入了高版本domutils，通过版本锁定解决：

• 在package.json中添加resolutions字段：

  "resolutions": {
    "domutils": "^2.5.2"
  }
  

• 运行强制解析命令并重装：

  npx npm-force-resolutions
  npm install
  

3. 升级react-scripts到兼容版本

react-scripts 4.x及以上版本默认支持ES2020语法，升级后可直接解决问题：

npm install react-scripts@4.0.3

注意：升级后可能需要调整其他依赖的版本（比如react-redux、react-router-dom）以适配新版本的react-scripts。

4. 自定义Babel配置支持该语法

如果不想升级react-scripts，可通过react-app-rewired修改Babel配置：

1. 安装依赖：

   npm install react-app-rewired @babel/plugin-proposal-export-namespace-from --save-dev
   

2. 在项目根目录创建config-overrides.js：

   module.exports = function override(config, env) {
     config.module.rules[0].oneOf.forEach(loader => {
       if (loader.test.toString().includes("js|jsx")) {
         loader.options.plugins.push("@babel/plugin-proposal-export-namespace-from");
       }
     });
     return config;
   };
   

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

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

4. 重新启动项目：

   npm start
   

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