TypeScript项目中TSX文件导入JSX组件出现模块未找到错误怎么解决

在TypeScript项目开发过程中，TSX文件导入JSX组件时提示模块未找到是较为常见的编译错误，下面我们先通过一张示意图了解错误出现的典型场景。

常见错误原因解析

这类错误的核心原因是TypeScript的模块解析规则无法正确识别JSX组件的文件路径或导出内容，常见的触发场景有以下几类：

• tsconfig.json中的模块解析相关配置缺失或不符合项目文件结构
• JSX组件文件没有正确的导出方式，或者TypeScript无法识别其模块类型
• 文件后缀名未被TypeScript纳入解析范围，导致找不到对应文件
• 项目同时混用JS和TS文件时，类型声明缺失导致解析失败

具体解决方法

1. 调整tsconfig.json配置

首先检查tsconfig.json中的compilerOptions配置，确保以下选项设置正确：

{
  "compilerOptions": {
    // 开启JSX支持，根据项目框架选择react或react-jsx
    "jsx": "react-jsx",
    // 允许导入JS文件，解决混用JS/TS文件时的解析问题
    "allowJs": true,
    // 将JS文件的类型检查纳入范围，避免类型缺失导致的解析错误
    "checkJs": false,
    // 配置模块解析策略，node模式适配大多数项目结构
    "moduleResolution": "node",
    // 添加需要识别的文件后缀，确保.tsx/.jsx等后缀被解析
    "resolveJsonModule": true,
    "esModuleInterop": true,
    // 可选：如果组件放在特定目录，可配置baseUrl或paths映射
    "baseUrl": ".",
    "paths": {
      "@components/*": ["src/components/*"]
    }
  },
  // 包含需要编译的文件目录
  "include": ["src/**/*"],
  // 排除不需要编译的目录
  "exclude": ["node_modules"]
}

2. 规范JSX组件的导出与导入

如果JSX组件是纯JS文件编写，需要确保导出方式符合ES模块规范，同时导入时路径和后缀正确：

JSX组件文件（比如MyComponent.jsx）的正确导出示例：

import React from 'react';

// 正确导出组件，使用默认导出或命名导出均可
const MyComponent = () => {
  return <div>这是一个JSX组件</div>;
};

export default MyComponent;

TSX文件中的正确导入示例：

// 导入时不需要写后缀，TypeScript会根据配置自动解析.jsx/.tsx等后缀
import MyComponent from './MyComponent';

const App = () => {
  return <div>
    <MyComponent />
  </div>;
};

export default App;

3. 处理类型声明缺失问题

如果JSX组件是JS文件且没有类型声明，TypeScript可能无法识别其类型，此时可以创建一个类型声明文件：

在src/types目录下创建jsx.d.ts文件，内容如下：

// 声明JSX文件的模块类型，让TypeScript可以正确识别
declare module '*.jsx' {
  import React = require('react');
  const component: React.FunctionComponent | React.ComponentClass;
  export default component;
}

declare module '*.js' {
  import React = require('react');
  const component: React.FunctionComponent | React.ComponentClass;
  export default component;
}

4. 排查路径和文件名问题

如果以上配置都正确还是报错，需要检查导入路径是否符合实际文件位置：

• 确认组件文件的存放路径和导入路径一致，避免相对路径写错
• 检查文件名是否有拼写错误，包括大小写问题，部分系统对文件名大小写敏感
• 如果使用了路径别名，确认tsconfig中的paths配置和导入时的别名一致

验证解决效果

完成以上配置后，重新运行TypeScript编译命令或者重启开发服务器，如果之前的模块未找到错误消失，说明问题已经解决。如果仍然报错，可以打开TypeScript的详细日志，查看模块解析的具体过程，定位未被覆盖的异常场景。

注意：如果项目使用的是Vite、Webpack等构建工具，还需要检查构建工具的配置是否和tsconfig的模块解析规则匹配，避免构建工具和TypeScript的配置冲突导致解析失败。

TypeScriptTSXJSX模块未找到tsconfig修改时间：2026-06-02 05:06:06