安装@self.id依赖后执行npm run start出现loaders加载错误

问题原因 #

1. 报错的核心触发点是@self.id系列依赖的子依赖@jclem/logfmt2，其源码使用了ES2022新增的公共类字段语法（即报错日志中标记的class StringScanner { data; }写法）。你当前项目使用的react-scripts@4.0.1默认不会对node_modules目录下的第三方依赖做新语法转译，babel-loader无法识别该语法就会抛出编译失败的错误。
2. 你的Node v14版本本身支持类字段语法，但前端项目编译阶段依赖babel做目标浏览器兼容，react-scripts 4.x的内置babel配置没有将该类新语法的转译规则覆盖到第三方依赖范围，因此触发报错。

解决方案 #

方案1：修改转译配置（无需eject，兼容性最好，推荐） #

使用react-app-rewired和customize-cra工具修改react-scripts的内置配置，不需要暴露全部项目配置，操作如下：

1. 安装开发依赖：

npm install react-app-rewired customize-cra @babel/plugin-proposal-class-properties --save-dev

2. 在项目根目录新建名为config-overrides.js的配置文件，写入以下内容：

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

module.exports = override(
  // 新增类属性语法转译插件
  ...addBabelPlugins('@babel/plugin-proposal-class-properties'),
  // 指定babel需要额外转译的第三方依赖
  babelInclude([
    path.resolve('src'),
    path.resolve('node_modules/@jclem/logfmt2')
  ])
);

3. 修改package.json中的scripts配置，将react-scripts替换为react-app-rewired：

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

4. 清除现有依赖缓存：删除node_modules文件夹和package-lock.json文件，重新执行npm install安装依赖，之后运行npm run start即可正常启动项目。

方案2：升级react-scripts版本 #

react-scripts 5.x的内置babel、webpack配置已经默认支持转译类字段语法，可直接升级react-scripts到最新版本解决问题：

npm install react-scripts@latest --save

升级完成后重新启动项目即可，注意：升级react-scripts可能带来其他旧依赖的兼容性问题，建议操作前先备份项目。

方案3：锁定兼容版本的子依赖 #

可以通过npm的overrides配置强制安装支持ES5语法的低版本@jclem/logfmt2，跳过语法转译的问题：

1. 若你的npm版本 >=8.3，直接在package.json中新增overrides字段：

"overrides": {
  "@jclem/logfmt2": "2.3.0"
}

2. 低版本npm可先安装npm-force-resolutions工具，再在package.json中添加resolutions字段指定版本，重新安装依赖即可生效。

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