Gatsby开发环境偶现"There's not a page yet at"报错 刷新即恢复求解决

对应场景的排查与解决步骤 #

• 动态路由加载时序冲突
  如果项目使用权限动态路由（异步生成路由表后再添加到路由实例），本质是路由匹配逻辑早于路由表挂载完成，首次访问时找不到对应页面路由就会报错，等路由表挂载完成后刷新，匹配逻辑能正确识别路径就恢复正常。
  修复方式：等待路由初始化完成后再挂载根组件，比如Vue Router项目可调用router.isReady()后再执行app.mount('#app')，React Router项目可在路由数据预加载完成后再渲染根节点。
• 编译工具缓存损坏
  开发环境的编译缓存出现异常时，会出现已存在的文件无法被首次识别的问题，清空对应缓存目录重启服务即可：
  • Webpack项目：删除node_modules/.cache目录后重启npm run dev
  • Vite项目：删除node_modules/.vite目录后重启npm run dev
• 路径大小写不匹配
  Windows、macOS的本地文件系统默认大小写不敏感，但编译工具会严格校验引入路径的大小写。如果路由中配置的页面路径，和/src/page下实际文件/目录的大小写不一致，首次编译会识别不到对应文件，等路径映射被缓存后刷新就可正常加载。
• 开发服务器文件监听遗漏
  检查dev-server的watch配置，确认没有排除/src/page目录的文件变更监听。如果配置了自定义的文件监听规则，可先移除自定义规则启动测试，确认是否是监听范围遗漏导致的首次加载识别失效。
• 浏览器缓存干扰
  长期运行的开发服务会被浏览器缓存旧的路由映射规则，可先完全退出dev服务，清空对应站点的浏览器缓存后再重启项目测试。

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