React v17项目保存代码后应用不自动重载，出现process未定义错误

先搞定process not defined错误 #

这个问题本质是webpack没正确注入环境变量：

• 如果你用create-react-app搭建项目，直接在根目录新建.env文件，写入：

  NODE_ENV=development
  

• 要是已经eject过项目，打开config/webpack.config.js，找到plugins数组，确认DefinePlugin的配置包含process.env：

  new webpack.DefinePlugin({
    'process.env': JSON.stringify(process.env)
  })
  

修复热重载失效 #

热重载失效大概率和依赖缺失或配置不对有关：

1. 先检查必要依赖，安装react-refresh和对应的webpack插件：

   npm install react-refresh @pmmmwh/react-refresh-webpack-plugin --save-dev
   

2. 检查package.json的启动命令，create-react-app项目确保start命令是：

   "scripts": {
     "start": "react-scripts start"
   }
   

   自定义webpack配置的话，要做两个改动：
   • 在devServer配置里加hot: true
   • 把@pmmmwh/react-refresh-webpack-plugin添加到plugins数组中

终极兜底方案 #

如果上面的操作都没效果，清缓存重装试试：

rm -rf node_modules package-lock.json
npm install
npm start

这样处理后，保存代码应该就能自动重载，也不会再出现process未定义的错误，不用每次手动刷新重填表单了。

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