React应用加载失败：Uncaught ReferenceError: require is not defined报错求助

这个错误的核心是浏览器环境不支持Node.js的require语法，而webpack错误地将Node核心模块events打包进了浏览器端代码，尤其是热重载（HMR）相关逻辑触发了这个问题。以下是具体排查和解决步骤：

1. 确认webpack的target配置 #

打开你的webpack配置文件（通常是webpack.config.js或craco.config.js，若用CRA定制），确保target设置为web（这是浏览器环境的默认值，若被误改为node会导致Node模块被强制引入）：

module.exports = {
  // ...其他配置
  target: 'web',
};

2. 配置webpack的resolve.fallback处理Node核心模块 #

events是Node.js的核心模块，浏览器原生没有实现，需要让webpack用浏览器兼容的替代方案：

• 首先安装浏览器版的events包：

  npm install events --save
  # 或用yarn
  yarn add events
  

• 然后在webpack配置中添加resolve.fallback：

  module.exports = {
    // ...其他配置
    resolve: {
      fallback: {
        "events": require.resolve("events"),
      },
    },
  };
  

如果使用Create React App（CRA）且未 eject，需要用craco或react-app-rewired修改webpack配置，以craco为例，在craco.config.js中添加上述resolve.fallback配置即可。

3. 检查webpack-dev-server版本兼容性 #

如果项目中webpack-dev-server版本和webpack、react-scripts版本不匹配，可能会触发热重载模块的异常：

• 查看当前版本：

  npm list webpack-dev-server
  

• 尝试升级到适配版本（CRA项目可参考react-scripts的依赖版本）：

  npm install webpack-dev-server@<合适版本> --save-dev
  

4. 清理缓存并重启服务 #

缓存可能导致旧的错误配置残留：

• 删除webpack缓存目录：

  rm -rf node_modules/.cache
  

• 重启开发服务器：

  npm start
  

• 极端情况下，可删除node_modules和锁文件，重新安装依赖：

  rm -rf node_modules package-lock.json
  npm install
  

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