React TypeScript项目绝对导入报错：为何无法识别模块？

核心问题1：TypeScript路径映射配置错误 #

你的base-tsconfig.json中paths配置逻辑完全错误：

• 已设置baseUrl: "./src"，意味着所有绝对导入会从src目录起始查找
• 当前"src/*": ["./src/*"]的映射完全冗余，它会让import 'src/routes'指向src/src/routes，而你需要的是import 'routes'直接对应src/routes

正确的paths配置需改为：

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "*": ["*"]
    }
  }
}

或者更精准地只配置目标模块：

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "routes": ["./routes"],
      "routes/*": ["./routes/*"]
    }
  }
}

核心问题2：Create React Scripts 默认不识别TS路径映射 #

你使用的react-scripts（Create React App）默认webpack配置不会读取TypeScript的paths配置，因此即使TS语法检查通过，webpack编译时仍无法找到模块。

方案1：用CRACO扩展配置（推荐） #

1. 安装依赖：

npm install @craco/craco --save-dev

2. 项目根目录创建craco.config.js：

const path = require('path');

module.exports = {
  webpack: {
    alias: {
      'routes': path.resolve(__dirname, 'src/routes'),
      // 其他需要绝对导入的模块可在此添加
    },
  },
};

3. 修改package.json的scripts：

"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test",
  "eject": "react-scripts eject"
}

方案2：Eject暴露webpack配置（不推荐） #

执行npm run eject暴露官方配置后，修改config/webpack.config.js中的resolve.alias：

resolve: {
  alias: {
    ...(modules.webpackAliases || {}),
    'routes': path.resolve(__dirname, '../src/routes'),
  },
}

注：eject后无法再接收官方配置更新，非必要不使用此方案。

验证步骤 #

1. 保存所有配置修改
2. 重启开发服务器
3. 检查App.tsx中import ... from 'routes'是否正常运行

内容的提问来源于stack exchange，提问作者irectonic.com