React TypeScript重命名文件后barrel export不生效问题求解

这个问题不是组件逻辑错误，是多层index.ts聚合导出（barrel export）链路的导出声明未同步叠加构建工具增量缓存识别异常导致的——你同时做了文件删除、文件重命名、组件函数重命名三个操作，增量构建的缓存机制没有正确追踪到这一系列变更，就会出现找不到具名导出的报错，和系统缓存、重启电脑没有关系。

按以下顺序操作即可：

• 校验最内层组件的具名导出写法
  打开/src/modules/header/components/Navigation.tsx，确认具名导出写法正确，不要残留旧组件的导出声明：

  // 正确写法参考
  export function Navigation() {
    // 合并后的组件业务逻辑
    return <nav>{/* 导航内容 */}</nav>
  }
  

  注意：不要混写默认导出，不要出现拼写错误把Navigation写成NavigationList，也不要残留旧Navigation、旧NavigationList相关的导出代码。
• 逐层修复聚合导出的index文件，从最内层向外依次校验
  1. 修改/src/modules/header/components/index.ts，删除所有和旧Navigation.tsx、NavigationList.tsx相关的导出语句，只保留当前正确的导出：

     export * from './Navigation';
     

  2. 修改/src/modules/header/index.ts，确认正确透传components目录的导出：

     export * from './components';
     

  3. 修改最外层/src/modules/index.ts，确认正确透传header模块的导出：

     export * from './header';
     

• 针对性清理构建工具的项目缓存，不要用重启电脑这类无效操作
  根据你用的构建工具执行对应操作：
  • 用Vite的话：删除项目根目录下node_modules/.vite文件夹，重新启动dev服务
  • 用Webpack（包括CRA、旧版Next.js）的话：删除项目根目录下node_modules/.cache文件夹，重新启动dev服务
  • 用TypeScript的话：执行npx tsc --noEmit确认无类型层面的导出错误，VSCode用户可以按快捷键Ctrl+Shift+P，调出命令面板后选择「TypeScript: Restart TS Server」重启编辑器的TS服务，消除编辑器层面的导出识别缓存
• 校验导入端写法
  打开/src/views/header/Header.tsx，确认导入语句是正确的具名导入：

  import { Navigation } from 'modules';
  

  注意：如果你给modules配置了路径别名，要同步确认tsconfig.json和构建工具的别名配置指向/src/modules目录，没有指向旧的缓存路径。

验证：以上操作完成后重新启动服务，具名导入即可正常生效，不需要改动导出方式、不需要写全路径导入。

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