React项目中tsconfig paths配置无法解析导入的问题求助

架构老林

2026-6-15

解决React项目tsconfig paths导入失败的问题

核心原因

你碰到的问题有两个关键点：

TypeScript的paths配置仅用于编辑器类型提示，CRA、Vite这类构建工具不会自动识别该配置，必须单独给构建工具配置别名映射。
你的src/components/layout/index.tsx中导入Section的路径有误，导致入口文件本身加载失败。

分步解决

第一步：修正文件导入的基础错误

Section组件实际位于./Section/Section.tsx，但当前index.tsx里的导入路径指向./Section，会找不到文件，先修正这个：

// src/components/layout/index.tsx
import Section from "./Section/Section"

export { Section }

第二步：针对CRA项目的配置

CRA默认锁定了配置，需要借助craco修改：

安装依赖：
```
npm install @craco/craco --save-dev
```

在项目根目录新建craco.config.js：

const path = require('path');

module.exports = {
  webpack: {
    alias: {
      '@features': path.resolve(__dirname, 'src/features/'),
      '@components': path.resolve(__dirname, 'src/components/')
    }
  }
};

修改package.json中的脚本，将react-scripts替换为craco：

"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test"
}

重启开发服务，配置即可生效。

第三步：针对Vite项目的配置

Vite直接在配置文件中配置别名即可：

修改vite.config.ts：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@features': path.resolve(__dirname, './src/features'),
      '@components': path.resolve(__dirname, './src/components')
    }
  }
});