React 17.0.2升级至18.2.0后出现Node相关构建错误求助

在Node.js 18.11.0（MacOS）环境下把前端React从17.0.2升级到18.2.0后，执行yarn start出现一堆Node相关构建错误，包括UnhandledSchemeError（无法处理node:buffer、node:fs这类URI）、找不到worker_threads模块等。

部分错误信息： #

Module build failed: UnhandledSchemeError: Reading from "node:buffer" is not handled by plugins (Unhandled scheme).
Webpack supports "data:" and "file:" URIs by default.
You may need an additional plugin to handle "node:" URIs.
WARNING in ../node_modules/node-domexception/index.js 7:10-35
Module not found: Error: Can't resolve 'worker_threads' in '/Users/macair/Documents/code/js/xjc_bbone/node_modules/node-domexception'

升级后的package.json依赖： #

"dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^14.0.0",
    "@testing-library/user-event": "^14.4.3",
    "bootstrap": "^5.2.3",
    "ethers": "5.7.2",
    "node-machine-id": "^1.1.12",
    "react": "^18.2.0",
    "react-bootstrap": "^2.7.2",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.10.0",
    "react-scripts": "^5.0.1",
    "uuid": "^9.0.0"
  },

解决方案 #

这些错误核心是前端项目里引入了Node.js专属核心模块，但React默认的Webpack配置（react-scripts 5.x）不支持处理node:协议路径，也不会在浏览器环境提供worker_threads这类Node模块。具体解决步骤：

• 处理UnhandledSchemeError：

  1. 安装修改配置的工具：yarn add react-app-rewired customize-cra --dev
  2. 在项目根目录新建config-overrides.js，写入以下代码：

     const { override, addWebpackModuleRule } = require('customize-cra');
     
     module.exports = override(
       addWebpackModuleRule({
         test: /node:/,
         use: 'null-loader',
       }),
     );
     

  3. 修改package.json里的脚本：把"start": "react-scripts start"改成"start": "react-app-rewired start"，build和test脚本也做同样替换。

• 解决worker_threads找不到的问题：
  这个模块是Node专属，浏览器里没有。问题来自node-domexception（大概率是ethers 5.x间接引入的），可以在config-overrides.js里加别名指向兼容包：

  // 在override里补充
     addWebpackAlias({
       'worker_threads': require.resolve('worker_threads/browser'),
     }),
  

  先安装兼容包：yarn add worker_threads --dev

• 额外注意：node-machine-id是Node环境工具，浏览器里跑不了。如果你的前端代码直接用了它，要么换成浏览器端的设备标识方案，要么改成通过后端接口获取设备ID。

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