React项目JS转TS时默认组件导入编译报错问题

1. 先解决tsc不生成编译文件的问题 #

• 检查tsconfig.json的outDir配置：确保指定了正确的输出目录，比如：

  {
    "compilerOptions": {
      "outDir": "./dist"
    }
  }
  

• 核对include/exclude规则：确认目标文件（比如ChatWindow相关文件）在include范围内，没有被exclude排除。
• 临时执行tsc --noEmit false：如果配置中不小心开启了noEmit: true，这个命令会强制生成编译文件，验证是否是配置导致的输出问题。

2. 修复「找不到默认导出」的编译错误 #

• 统一文件扩展名：如果ChatWindow已经是TypeScript组件（包含TS类型定义），将文件名改为ChatWindow.tsx，不要保留.js后缀——Webpack对JS和TS文件的解析逻辑不同，混用扩展名会导致导出信息识别异常。
• 调整导入语句：如果ChatWindow是TSX文件，导入时无需加.js扩展名，直接写：

  import ChatWindow, { messageI } from "./ChatWindow";
  

• 检查Webpack loader配置：确保已正确配置ts-loader或babel-loader + @babel/preset-typescript，让Webpack能正确解析TS/TSX文件中的导出语法。
• 确认类型导出：保证messageI是命名导出，比如：

  export interface messageI {
    // 类型字段定义
  }
  
  export default function ChatWindow(props: propsI) {
    // 组件逻辑
  }
  

• 清理编译缓存：删除node_modules/.cache目录（如果用Webpack Dev Server），或执行npm cache clean --force，避免旧缓存导致的解析异常。

3. IDE无报错但编译失败的原因 #

PHPStorm的TS检查基于自身解析逻辑和本地tsconfig.json，而Webpack编译依赖loader和模块解析规则，两者逻辑不一致会导致IDE无报错但编译失败。建议在PHPStorm设置中，将TypeScript版本切换为项目本地安装的typescript包，保持解析规则一致。

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