React无法找到SystemRadio组件，重命名后恢复正常求助

问题核心 #

你遇到的这种「配置全对但组件找不到，重命名就正常」的情况，90%以上是开发服务器/模块打包工具的缓存导致的——React本身不会缓存组件，是构建工具（比如Webpack、Vite）或者浏览器的缓存在搞事情。

为什么会出现？ #

当你新建组件后，开发服务器的文件监听可能没及时检测到新文件，或者打包工具的缓存还停留在旧的模块映射关系里，导致它找不到刚建的SystemRadio组件；但重命名后，文件名变了，缓存里没有对应的记录，工具就会重新解析这个新文件，自然就正常了。

清理缓存的具体操作 #

• 重启开发服务器：最简单直接的办法——关掉当前的开发服务（比如npm start/yarn dev的终端进程），重新启动。这会清空开发服务器的内存缓存，重新构建所有模块。
• 手动清除构建工具缓存：
  • 用Create React App（CRA）：运行npm run clean/yarn clean，或者直接删除node_modules/.cache文件夹。
  • 用Vite：删除项目根目录的.vite文件夹，再重启服务。
  • 用Webpack：删除dist文件夹，启动时加--no-cache参数：webpack serve --no-cache。
• 清除浏览器缓存：按Ctrl + Shift + R（Windows/Linux）或Cmd + Shift + R（Mac）强制刷新页面，绕过浏览器缓存加载最新资源。
• 检查文件名大小写：部分操作系统（如Linux）区分文件名大小写，若组件实际是systemradio.js但导入写SystemRadio，也会报错——重命名刚好能解决这类问题，下次可以先核对大小写。

预防措施 #

• 开发时尽量避免在服务运行中新建组件后立刻导入，最好先重启服务再使用新组件。
• 可以在构建工具配置里关闭开发环境缓存（会减慢构建速度，但能避免这类问题），比如Vite的vite.config.js：

  export default {
    server: {
      watch: {
        ignored: []
      }
    },
    cacheDir: false
  }
  

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