背景和意义
在修复React项目热更新失效的问题时，经过一系列问题排查和依赖升级，最终成功修复了问题并为后续开发规避了类似的问题。
依赖升级
Vite版本升级
原React项目Vite版本升级到^4.4.5
Vite 4 在构建和开发服务器的性能上进行了优化，提升了启动速度和热更新速度，并且修复了特殊情况下热更新问题。
npm install vite@^4.4.5@vitejs/plugin-react版本升级
如只升级Vite，删除node_modules重新安装依赖会报版本兼容错误，错误如下
@vitejs/plugin-react 升级到^4.3.2
npm i -D eslint-plugin-react-refresh编码注意事项
由于如下编码习惯问题同样会引起局部热更新无法工作
-
未保证一致的组件出口，为了保证热更新工作，你必须保证Tsx文件只导出React组件
Fast Refresh | Gatsby
Tsx文件呈现 React 组件，但也导出由非 React 组件导入的值。例如，组件文件还导出一个常量，并且ts文件导入它。在这种情况下，请考虑将常量迁移到单独的文件并将其导入到两个文件中。这将重新启用快速刷新功能。其他情况通常也可以用类似的方法解决。
具体报错示例
代码出处：
-
Tsx文件使用匿名导出组件，也会引起热更新失效，swr-graphql/issues Anonymous arrow functions cause Fast Refresh to not preserve local component state. · Issue #6 · praveenweb/swr-graphql · GitHub
好的写法
预防方案
增加使用Eslint检查
GitHub - ArnaudBarre/eslint-plugin-react-refresh: Validate that your components can safely be updated with fast refresh
-
安装eslint-plugin-react-refresh
npm i -D eslint-plugin-react-refresh-
找到eslint配置文件，增加如下内容
{
"plugins": ["react-refresh"],
"rules": {
"react-refresh/only-export-components": "warn"
}
}你亦或者可以选择“error”的警示方式，排查写法
Eslint全局排查解决
npm run lint最后，在解决了热更新失效的问题后，我们运行了 npm run lint 命令进行全局排查和解决潜在的代码问题。
通过以上的依赖升级、编码注意事项和预防措施，我们成功修复了 React 项目热更新失效的问题，并且为后续开发规避了类似的问提。
