🐛 [BUG]热更新会报错 Uncaught ReferenceError: process is not defined，且页面卡住

[Faithree]

🐛 bug 描述

新建的项目，修改文件热更新，页面卡住，且报错 Uncaught ReferenceError: process is not defined

📷 复现步骤 | Recurrence steps

1. 新建一个项目 pro create bug-demo
2. pnpm install
3. npm run start
4. 修改文件热更新，页面卡住，且报错 Uncaught ReferenceError: process is not defined

🏞 期望结果 | Expected results

正常热更新

💻 复现代码 | Recurrence code

https://github.com/Faithree/bug-demo

© 版本信息

• Ant Design Pro 版本: "@ant-design/pro-cli": "^2.1.0",
• umi 版本: "@umijs/max": "^4.0.33",
• 浏览器环境:任意浏览器
• 开发环境 [e.g. mac OS]

🚑 其他信息

[github-actions]

以下的 Issues 可能会帮助到你 / The following issues may help you

• [🐛 [BUG] 热更新会报错 Uncaught ReferenceError: process is not defined，且页面卡住 #10506][100%]

[chenshuai2144]

值得注意是的百分之二十的问题都可以用重装依赖来解决，所以你可以尝试一下：
删除 'node_modules' 文件夹 -> 删除 'package-lock.json'或 'pnpm-lock.yaml' 文件 -> 运行 'pnpm install' 或 'npm install' 命令

根据你提供的信息，这个问题可能是因为缺少了引入 process 的配置。下面是一个可能的解决方案：

1. 在项目根目录创建一个 .umirc.local.js 文件（如果已有请忽略这一步）。
2. 在 .umirc.local.js 文件中添加以下配置：

   export default {
     define: {
       'process.env': {},
     },
   };

3. 重新启动项目，并尝试修改文件进行热更新，看看问题是否解决了。

这个解决方案使用了 Umi 的 define 配置来指定 process.env 是一个空对象，以解决 process is not defined 的报错。这样热更新应该能够正常工作了。

关于页面卡住问题，这可能是因为热更新过程中编译时间过长导致的。你可以尝试做一些前端性能优化，例如使用代码分割、按需加载等技术来减少页面加载时间，从而提升整体的性能。另外，你还可以使用 webpack-bundle-analyzer 工具来分析打包结果，找出页面卡住的具体原因。

[zmm2tysu]

参考这个我解决了
https://blog.zhouweibin.top/pitfall/react-hot-error/