新建TypeScript React项目配置路径别名提示别名导入不支持如何解决

问题根因 #

你之前配置失败主要存在3个共性问题：

1. tsconfig.paths.json中路径配置写了根路径/components/*，应为相对baseUrl的相对路径./components/*
2. webpack别名配置后多加了通配符/*，不需要携带通配符
3. 手动全量覆写config.resolve会覆盖CRA默认的模块解析规则，导致解析异常

方案1：react-app-rewired+customize-cra（支持自定义别名前缀） #

1. 安装依赖 #

npm install react-app-rewired customize-cra --save-dev

如果之前安装过craco、react-app-rewire-alias等冲突依赖，先卸载避免干扰。

2. 配置TypeScript路径 #

根目录新建tsconfig.paths.json：

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

修改tsconfig.json，顶部添加extends字段，不要直接在该文件内写paths配置：

{
  "extends": "./tsconfig.paths.json",
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    // 其余原有配置保持不变
  },
  "include": ["src"]
}

3. 修改构建配置 #

修改根目录config-overrides.js：

const { override, addWebpackAlias } = require('customize-cra')
const path = require('path')

module.exports = override(
  addWebpackAlias({
    'components': path.resolve(__dirname, 'src/components'),
    'routes': path.resolve(__dirname, 'src/routes'),
    'constants': path.resolve(__dirname, 'src/constants')
  })
)

4. 确认启动脚本 #

package.json中的scripts保持react-app-rewired调用即可：

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

5. 重启生效 #

删除构建缓存：npx rimraf node_modules/.cache，重启VSCode后运行npm start即可。

方案2：官方原生方案（无需额外插件） #

如果不需要@等自定义前缀的别名，直接使用CRA官方支持的baseUrl配置即可，无需安装任何插件：
修改tsconfig.json的compilerOptions，添加baseUrl配置：

{
  "compilerOptions": {
    "baseUrl": "./src",
    // 其余原有配置保持不变
  }
}

配置完成后可以直接使用相对src的路径导入模块：

import Button from 'components/Button'
import { HOME_PATH } from 'constants/config'

该方案不会触发tsconfig字段校验报错，稳定性最高。

内容的提问来源于stack exchange，提问作者S. Hesam