Turborepo+Next.js开发模式下MlAlert组件导入报错排查

1. Next.js开发模式缓存未更新 #

Next.js开发模式会缓存模块导出信息，如果你新增或修改了MlAlert的导出层级，Fast Refresh可能没检测到深层文件的导出变化，导致缓存里的@repo/ui导出列表还是旧的，导航时就会报错。

解决方法：

• 删除web项目下的.next缓存文件夹，然后重启npm run dev
• 或者终止服务后执行turbo clean清理Turborepo全局缓存，再重新启动开发服务

2. Turborepo依赖缓存未同步 #

Turborepo会缓存UI包的构建状态，如果你修改了@repo/ui的导出逻辑但没重新构建UI包，web项目在开发模式下可能还是读取旧的缓存产物。

解决方法：

• 进入@repo/ui包目录，执行npm run build（或turbo run build --filter=@repo/ui）重新构建UI包
• 重启web项目的开发服务，确保依赖引用的是最新的导出

3. 多层导出的模块解析延迟 #

Next.js开发模式下是按需加载模块，当通过多层index.ts中转导出MlAlert时，模块解析顺序可能出现延迟——顶层index.ts还没完成对molecules层index.ts的导出解析，就被登录页请求导入了。

解决方法：

• 临时测试：在@repo/ui的顶层src/index.ts中直接导入MlAlert，跳过中间层级：

  // @repo/ui/src/index.ts
  export { MlAlert } from './components/molecules/ml-alert/ml-alert';
  

  如果不再报错，说明是多层导出的解析顺序问题，可考虑保持直接导出，或检查中间层级的index.ts是否有漏写导出语句等语法错误

4. 导出语句的隐性错误 #

虽然构建正常，但开发模式下的模块解析更严格，可能存在隐性导出问题：

• 检查molecules层的index.ts，确认MlAlert的导出语句是否正确，比如是否误写成export type { MlAlert }（仅导出类型，运行时无实际导出），而非export { MlAlert }
• 检查组件文件ml-alert.tsx的导出类型，确认是默认导出还是命名导出，对应中间层index.ts的导出语句是否匹配（比如组件是默认导出，中间层要写export { default as MlAlert } from './ml-alert';）

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