webpack <5默认不包含Node.js核心模块polyfill，create-react-app编译失败求助

1. 定位问题根源：找出调用Node核心模块的依赖 #

首先确定是哪个包在浏览器环境中调用了fs/path/os等Node核心模块——这些模块在浏览器中不存在，webpack 5也不再默认提供polyfill。

• 运行命令排查依赖：

  # npm用户
  npm ls fs
  # yarn用户
  yarn why fs
  

常见的坑：误将后端JWT库（如jsonwebtoken）用于前端，前端应使用专门的前端JWT工具（如@auth0/jwt-decode或jose）。

2. 覆盖Webpack配置（无需 eject） #

Create-React-App默认不允许直接修改webpack配置，可通过react-app-rewired和customize-cra来覆盖：

1. 安装依赖：

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

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

   const { override, addWebpackResolve } = require('customize-cra');
   
   module.exports = override(
     addWebpackResolve({
       fallback: {
         // 告诉webpack这些模块无需polyfill（浏览器环境不支持）
         "fs": false,
         "path": false,
         "os": false
       }
     })
   );
   

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

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

如果某个依赖确实需要polyfill（极少情况），安装对应的浏览器兼容包（如path-browserify），并将false替换为require.resolve('path-browserify')。

3. 解决ESLint权限问题 #

• 若提示权限不足，修复文件权限（Linux/macOS）：

  chmod -R 755 node_modules
  

• 彻底重置依赖：删除node_modules、package-lock.json（或yarn.lock），重新安装：

  rm -rf node_modules package-lock.json
  npm install
  

• 优先使用项目本地ESLint：运行npx eslint .而非全局eslint命令，避免全局与本地版本冲突。

4. 消除Babel相关警告 #

• 检查package.json中Babel相关依赖（如@babel/core、babel-loader）的版本，确保与当前Create-React-App版本兼容（无需手动安装，CRA会管理这些依赖）。
• 若自定义了Babel配置，删除项目根目录的.babelrc或babel.config.js，改用react-app-rewired的addBabelPresets方法调整，避免与CRA默认配置冲突。

5. 关键注意事项 #

• 不要在前端代码中直接引入Node核心模块：删除任何require('fs')/require('path')这类代码，前端逻辑与后端逻辑严格分离。
• 避免盲目降级React版本：Create-React-App与React版本强绑定，降级可能引发更多兼容性问题，优先通过配置解决。

内容的提问来源于stack exchange，提问作者Reeve Prinson Fernandes