React项目index.tsx无法解析App组件，.Tsx扩展名不被识别

1. 检查TypeScript依赖与核心配置 #

• 先确认package.json里是否包含typescript、@types/react、@types/react-dom这几个依赖，没有的话直接执行安装：

  npm install typescript @types/react @types/react-dom --save-dev
  

• 项目根目录必须存在tsconfig.json，如果没有，手动创建基础配置文件：

  {
    "compilerOptions": {
      "target": "es5",
      "lib": ["dom", "dom.iterable", "esnext"],
      "allowJs": true,
      "skipLibCheck": true,
      "esModuleInterop": true,
      "allowSyntheticDefaultImports": true,
      "strict": true,
      "forceConsistentCasingInFileNames": true,
      "noFallthroughCasesInSwitch": true,
      "module": "esnext",
      "moduleResolution": "node",
      "resolveJsonModule": true,
      "isolatedModules": true,
      "noEmit": true,
      "jsx": "react-jsx"
    },
    "include": ["src"]
  }
  

2. 核对文件命名与导入规则 #

• 确认App组件文件是App.tsx（小写后缀），而非App.Tsx（大写后缀）——Linux/macOS系统区分文件名大小写，CRA默认对大小写敏感，大小写不匹配会直接导致解析失败。
• 导入组件时，要么完整写扩展名：

  import App from './App.tsx';
  

  要么确保tsconfig.json的compilerOptions中moduleResolution设为node，且include包含src目录，这样可以省略扩展名导入。

3. 排查自定义配置干扰 #

• 如果之前执行过npm run eject，或者用了react-app-rewired等工具修改过webpack配置，必须确认webpack的resolve.extensions数组里包含.tsx：

  resolve: {
    extensions: ['.tsx', '.ts', '.js', '.jsx']
  }
  

• 未执行eject的情况下，CRA默认支持TSX解析，此时建议清理依赖缓存后重装：

  rm -rf node_modules package-lock.json
  npm install
  

4. 验证入口文件导入路径 #

• 检查项目入口文件（通常是src/index.tsx或src/index.js）对App组件的导入路径是否正确，如果用了路径别名，需要在tsconfig.json的compilerOptions中配置paths，同时确保CRA支持别名解析（未eject的话需搭配craco或react-app-rewired）。

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