React项目修改文件后缀为.tsx后出现模块找不到错误求助

可能的原因及修复方案： #

• 补全文件后缀：TypeScript项目默认不会自动识别无后缀的.tsx/.ts文件，而JS项目允许省略。如果AuthContext文件已经改为.tsx或.ts，直接在导入语句里加上后缀即可：
  原导入：

  import AuthContext from './contexts/AuthContext'
  

  修改后：

  import AuthContext from './contexts/AuthContext.tsx'
  

• 配置TypeScript允许省略后缀：不想每次加后缀的话，修改tsconfig.json的compilerOptions，把.tsx、.ts加入resolveExtensions列表：

  {
    "compilerOptions": {
      // 其他原有配置...
      "resolveExtensions": [".tsx", ".ts", ".jsx", ".js"]
    }
  }
  

  改完重启开发服务器让配置生效。

• 检查路径与大小写：确认AuthContext的文件路径、文件名大小写和导入语句完全一致——Windows系统本身大小写不敏感，但TypeScript的模块解析会严格区分，拼写或大小写错配会导致找不到模块。

• 确认文件存在：再次核对src/contexts/目录下是否真的有AuthContext文件，有没有误删或移动位置。

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