Create React App项目.env中FAST_REFRESH=FALSE配置未生效问题

配置未生效的常见原因 #

1. .env文件位置或命名错误
   CRA只会读取和package.json同层级根目录下的.env文件，若你将文件放在src目录、项目父目录，或者文件名带.txt等隐藏后缀（Windows系统默认隐藏扩展名易出现该问题），配置都会无法加载。
2. 修改配置后未重启开发服务
   CRA的环境变量仅在开发服务启动时一次性加载，修改.env后如果没有停掉当前运行的npm start/yarn start进程重启，新配置不会生效。
3. react-scripts 4.0.3版本的已知缺陷
   该版本的Fast Refresh开关在Windows、WSL环境下存在兼容问题，尤其当项目全路径包含中文、空格、特殊字符时，文件监听逻辑会失效，导致配置不生效。
4. 系统文件监听数达到上限
   Linux、Mac系统默认的inotify监听实例上限较低，当项目文件较多时，会触发上限导致CRA无法监听到文件修改。
5. 组件写法不符合热更新要求
   如果你的组件不是默认导出的函数组件、存在语法错误，或者使用了未被热更新兼容的高阶组件写法，不管配置是否生效，都会出现无法自动刷新的问题。

对应解决办法 #

• 确认.env文件存放在项目根目录，和package.json同级，开启系统文件扩展名显示，确认文件名就是.env没有多余后缀。
• 修改配置后按下Ctrl+C终止当前开发服务，重新执行npm start或yarn start启动项目验证。
• 检查项目全路径是否存在中文、空格、特殊符号，若有则将项目移动到全英文无特殊字符的路径下重试。
• Linux/Mac用户可执行以下命令提升文件监听上限，重启终端后再启动项目：

echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

• 升级react-scripts到稳定版本，可先升级到4.0.5版本，适配性更好，升级后删除node_modules、package-lock.json/yarn.lock文件，重新安装依赖即可。
• 若不想升级版本，可直接在启动脚本中注入环境变量，优先级高于.env配置：
  • Mac/Linux环境：将package.json中scripts的start项改为"start": "FAST_REFRESH=false react-scripts start"
  • Windows环境：安装cross-env依赖后，将start项改为"start": "cross-env FAST_REFRESH=false react-scripts start"

内容的提问来源于stack exchange，提问作者Dev G