React JS部分嵌套文件夹文件修改后无法自动编译更新浏览器问题

项目目录结构 #

Project  
  public  -- 静态资源文件夹
  src     -- 源码文件夹
    App.js
    Containers -- 容器组件文件夹
      Dashboard -- 仪表盘模块文件夹
        Dashboard.js  --- 页面组件
      BatchDetails  -- 批次详情模块文件夹
        BatchDetails.js  -- 页面组件
    index.js
    AppRoutes.js
  package.json

问题现象 #

修改Dashboard.js文件时，项目可正常自动编译并同步更新浏览器内容；但修改BatchDetails.js以及其余部分嵌套文件夹内的文件时，无法触发自动编译，也不会同步更新浏览器页面。

这类部分深层文件热更新失效的问题，按出现概率从高到低排查以下几点即可：

• 导入路径大小写不匹配
  这是最高发的诱因：Windows、默认配置的macOS文件系统大小写不敏感，组件导入、路由配置时写的文件/文件夹名大小写和磁盘实际名称不一致的话，首次启动编译不会报错，页面能正常加载，但webpack热更新的文件监听是大小写严格匹配的，会直接漏掉路径不匹配的文件。比如导入BatchDetails时写的路径是./containers/BatchDetails/BatchDetails，但实际文件夹名是大写开头的Containers，就会触发这个问题。把全项目所有导入路径的大小写和实际文件、文件夹名完全对齐就能修复。
• 文件监听数量触发系统上限
  系统默认给文件监听服务分配的可监听文件数有上限，项目嵌套层级深、文件总数较多时，超出上限后部分深层文件就不会被纳入监听范围。macOS/Linux系统执行以下命令调高监听上限即可：

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

  Windows系统可以在项目根目录新建.env文件，写入CHOKIDAR_USEPOLLING=true，改用轮询模式监听文件变更即可。
• 文件夹命名不符合监听规则
  如果失效文件所在的文件夹名称包含空格、特殊符号、中文，部分版本的webpack-dev-server、chokidar监听工具会识别异常，跳过这类文件夹下的文件变更监听，把相关文件夹名改成纯英文、无特殊字符的格式就能恢复。
• 懒加载配置兼容问题
  如果BatchDetails这类深层页面用了import()懒加载语法，旧版react-scripts、react-router存在已知兼容bug，会导致懒加载的深层组件热更新失效。把react-scripts升级到最新稳定版，或者在webpack配置的devServer项中添加如下配置即可：

  watchOptions: {
    aggregateTimeout: 300,
    poll: 1000
  }
  

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