React CRA导出模块未找到报错求助（路径重复场景）

问题场景 #

• 环境：React 18.2.0，Node 19.2.0（已尝试降级无效）
• 症状：仅在组件路径存在重复层级（如./ComponentName/ComponentName/ComponentName.tsx）时，偶发模块找不到报错；应用可正常运行，仅本地开发环境出现该问题，团队其他成员无此报错
• 已尝试方案：修改导出方式（export * from './ModuleName' → export {ModuleName} from './ModuleName'）、调整导入路径（简写路径→全路径），但效果不稳定

解决步骤 #

1. 规范TypeScript路径解析配置

检查项目根目录的tsconfig.json，确保baseUrl和paths配置清晰，避免路径歧义。示例配置：

{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "@/*": ["*"]
    }
  }
}

之后使用别名路径导入（如@/components/ComponentName/ComponentName），替代相对路径，减少重复层级带来的解析冲突。

2. 清除CRA本地缓存

缓存异常可能导致路径识别错误，执行命令重置缓存：

npm start -- --reset-cache
# 或 yarn 环境
yarn start --reset-cache

也可手动删除node_modules/.cache目录，彻底清理缓存文件。

3. 统一导入导出规则

• 组件文件：保持当前命名导出模式，不混用默认导出
• 索引导出文件：明确指定导出成员，避免export *的模糊导出，示例：

export { ComponentName } from './ComponentName';

• 导入时使用完整路径或别名路径，避免依赖CRA自动索引解析（重复路径下自动解析易触发冲突）

4. 检查文件系统大小写一致性

Windows系统不区分文件大小写，但macOS/Linux严格区分。若本地文件路径大小写与代码中导入的路径不一致（如代码写./ComponentName，实际文件夹为./componentname），在重复路径场景下极易触发解析错误。统一文件名、路径的大小写，确保与代码导入完全匹配。

5. 同步团队依赖版本

团队成员无此问题，大概率是本地依赖版本不一致。执行以下步骤同步依赖：

rm package-lock.json node_modules
npm install

确保react-scripts、typescript等核心依赖版本与团队保持一致。

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