背景和意义

在修复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

编码注意事项

由于如下编码习惯问题同样会引起局部热更新无法工作

1. 未保证一致的组件出口，为了保证热更新工作，你必须保证Tsx文件只导出React组件

Fast Refresh | Gatsby

Tsx文件呈现 React 组件，但也导出由非 React 组件导入的值。例如，组件文件还导出一个常量，并且ts文件导入它。在这种情况下，请考虑将常量迁移到单独的文件并将其导入到两个文件中。这将重新启用快速刷新功能。其他情况通常也可以用类似的方法解决。

具体报错示例

代码出处：

1. 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

1. 安装eslint-plugin-react-refresh

npm i -D eslint-plugin-react-refresh

1. 找到eslint配置文件，增加如下内容

{"plugins": ["react-refresh"],"rules": {"react-refresh/only-export-components": "warn"}
}

你亦或者可以选择“error”的警示方式，排查写法

Eslint全局排查解决

npm run lint

最后，在解决了热更新失效的问题后，我们运行了 npm run lint 命令进行全局排查和解决潜在的代码问题。

通过以上的依赖升级、编码注意事项和预防措施，我们成功修复了 React 项目热更新失效的问题，并且为后续开发规避了类似的问提。