NextJS 13 App目录开发环境Fast Refresh失效求助

针对你在Windows10 WSL2 Ubuntu 20.04中遇到的NextJS 13.2和create-react-app无法触发自动刷新的问题，可按以下步骤排查修复：

• 移至WSL原生文件系统
  不要将项目放在Windows NTFS挂载目录（如/mnt/c/下的路径），将项目迁移到WSL2的Linux文件系统（如~/projects/）。WSL2对Windows文件系统的文件变更监听支持存在缺陷，这是此类问题的核心原因。

• 正确配置文件监听环境变量
  之前的脚本配置可能存在格式错误，修正package.json中的启动脚本：

  • NextJS项目：

    "scripts": {
      "dev": "CHOKIDAR_USEPOLLING=true next dev"
    }
    

  • create-react-app项目：

    "scripts": {
      "start": "CHOKIDAR_USEPOLLING=true react-scripts start"
    }
    

  注意环境变量名与值之间不要加空格（如FAST_REFRESH=false而非FAST_REFRESH = false），且无需关闭Fast Refresh，保持默认启用即可。

• 修复项目目录权限
  确保项目目录权限正确，避免因权限问题导致文件变更无法被检测：

  chmod -R 755 /path/to/your/project
  

  不要使用root用户运行开发服务，用普通用户执行npm run dev或npm start。

• 优化WSL2挂载配置
  在WSL2的/etc/wsl.conf文件中添加以下配置：

  [automount]
  options = "metadata,umask=0022,fmask=0133"
  mountFsTab = false
  

  保存后关闭所有WSL终端，执行wsl --shutdown重启WSL2，再启动开发服务。

• 检查浏览器设置
  打开浏览器开发者工具，在「Network」标签下勾选「禁用缓存」，避免浏览器缓存旧页面内容；同时确认浏览器未开启离线模式。

内容的提问来源于stack exchange，提问作者Dániel Flach