react项目热更新异常

最近在一个 react 单页面项目(webpack4)里遇到了一个热更新的报错: Uncaught ReferenceError: process is not defined。

原因是 react-error-overlay 这个插件版本(@6.0.11)太高，这个版本是支持了 webpack5，和 react-scripts@4 有不兼容的依赖项导致报错

解决办法是安装 6.0.9 版本

yarn add react-error-overlay@6.0.9

调整 package.json

{
  "resolutions": {
    "react-error-overlay": "6.0.9"
  },
  "overrides": {
    "react-error-overlay": "6.0.9"
  }
}

resolutions for yarn，overrides for npm >= 8.3

如果是用的 npm，并且 6<=版本<8.3，可以用以下方法

npm install npm-force-resolutions --save-dev

调整 package.json

{
  "resolutions": {
    "react-error-overlay": "6.0.9"
  },
  "scripts": {
    "preinstall": "npm-force-resolutions"
  }
}

后续执行 npm install 就会强制 react-error-overlay 为 6.0.9

by the way，升级 webpack5 也不是不行 ~ 只不过坑也蛮多的。上述办法就比较轻松了