自定义React Boilerplate时删除无需模块后页面无渲染如何解决

1. 优先排查Offline服务缓存问题 #

offline-first特性的脚手架默认会注册Service Worker做资源缓存，修改代码后旧缓存没有更新是最常见的空白页诱因：

• 打开浏览器开发者工具的「Application」面板，找到「Service Workers」选项，点击Unregister注销当前站点所有已注册的服务工作线程，勾选「Bypass for network」后强制刷新页面
• 开发环境建议直接关闭离线缓存配置：找到脚手架内置的workbox/offline相关配置项，将开发环境的启用开关设为false，避免修改代码被旧缓存干扰
• 如果不需要离线能力，可以直接删除入口文件中serviceWorkerRegistration.register()相关的注册代码，从根源避免缓存问题

2. 检查根渲染逻辑是否被误删 #

删除代码时很容易误改根组件/入口渲染逻辑：

• 检查src/index.js（或src/main.jsx）中的根渲染代码，确认ReactDOM.createRoot调用正常，传入的根组件已正确导出
• 检查App.jsx是否存在返回值异常，下面是常见的错误写法示例：

// 错误：省略return导致组件返回undefined，无内容渲染
function App() {
  <div>页面内容</div>
}

// 正确写法
function App() {
  return <div>页面内容</div>
}
// 或箭头函数隐式返回
const App = () => <div>页面内容</div>

3. 排查运行时报错阻断渲染 #

删除模块后有残留引用会导致运行时异常，阻断整个应用渲染：

• 打开浏览器开发者工具的「Console」面板，查看是否有红色报错：Module not found、xxx is not defined这类报错均为残留引用导致，找到报错对应的文件删除对应引用即可
• 如果你删除了脚手架内置的路由、状态管理模块，需要同步删除根组件、路由配置文件中对应的引用代码，避免匹配到不存在的组件导致渲染失败

4. 清理本地缓存重启服务 #

• 依次删除项目根目录下的dist/build构建产物目录、.cache缓存目录、node_modules/.cache缓存目录
• 重新执行依赖安装命令npm install或yarn install，再启动开发服务即可

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