React项目引入TypeScript后出现模块找不到错误如何解决？

错误原因 #

你将App.js重命名为App.tsx后，index.tsx中导入App时未指定.tsx后缀，当前项目配置无法自动解析该后缀对应的文件，导致编译报错。

解决方案 #

方案1：直接修正导入路径 #

修改index.tsx中的导入语句，明确指定.tsx后缀：

import App from "./App.tsx";

方案2：配置TypeScript自动解析TS/TSX后缀 #

如果希望保持省略后缀的写法，可通过tsconfig.json配置实现：

1. 若项目根目录无tsconfig.json，执行以下命令生成：

npx tsc --init

2. 打开tsconfig.json，修改或添加以下配置：

{
  "compilerOptions": {
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "resolveJsonModule": true,
    "extensions": [".tsx", ".ts", ".js", ".json"]
  },
  "include": ["src/**/*"]
}

3. 重启开发服务器，即可继续使用import App from "./App";的写法。

额外检查 #

• 确认src目录下确实存在App.tsx文件，文件名无拼写错误（注意大小写一致性）。
• 若之前重复安装了typescript，可执行npm dedupe清理重复依赖，避免潜在冲突。

内容的提问来源于stack exchange，提问作者media.queeries