React项目编译报错：Module parse failed遇意外字符'#'求助

问题背景 #

一周前React项目运行完全正常，同一机器上同时搭建React Native项目，期间可能误更新/安装了某些包。回到旧项目后出现编译错误：

Failed to compile.

./node_modules/ml-matrix/src/symmetricMatrix.js 7:2
Module parse failed: Unexpected character '#' (7:2)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| export class SymmetricMatrix extends AbstractMatrix {
|   /** @type {Matrix} */
>   #matrix;
|   get size() {
|     return this.#matrix.size;

已尝试无效方案 #

• 执行npm clean cache，删除node_modules和package-lock.json后重装依赖
• 添加@babel/preset-env配置
• 回滚项目至5个旧提交版本

解决方案 #

方案1：让CRA转译ml-matrix包（推荐） #

由于CRA默认不转译node_modules内的代码，而ml-matrix使用了ES私有字段语法，需要修改配置让babel处理该包：

1. 安装依赖：

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

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

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

module.exports = override(
  // 启用私有字段转译插件
  addBabelPlugins(
    ['@babel/plugin-proposal-private-property-in-object', { loose: true }],
    '@babel/plugin-proposal-private-methods'
  ),
  // 修改webpack规则，将ml-matrix加入转译范围
  (config) => {
    config.module.rules[1].oneOf.forEach(rule => {
      if (rule.test && rule.test.toString().includes('js|jsx')) {
        rule.include.push(/node_modules\/ml-matrix/);
      }
    });
    return config;
  }
);

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. 重新启动项目：npm start

方案2：降级ml-matrix到兼容版本 #

查找ml-matrix未引入ES私有字段的旧版本（比如v6.x及之前版本），执行安装：

npm install ml-matrix@6.12.0 --save

（版本号可根据实际兼容情况调整）

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