搭建Vite React项目运行shadcn init时遇tsconfig.json导入别名缺失错误

1. 核对tsconfig.json的核心配置 #

确保你的tsconfig.json里正确配置了baseUrl和paths，这是Shadcn识别别名的关键，示例配置如下：

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

注意baseUrl必须设为.（项目根目录），paths里的@/*要对应src/*，这是Shadcn默认识别的格式。

2. 确认tsconfig文件的有效性 #

• 保证tsconfig.json在项目根目录下，不是嵌套在子文件夹里。
• 如果你的项目同时有tsconfig.node.json，别把别名配置写到这个文件里，Shadcn只会读取根目录的主tsconfig.json。

3. 同步Vite的别名配置 #

Vite需要单独配置别名才能和TS的配置对齐，在vite.config.ts里添加如下代码：

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

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

这里的别名要和tsconfig.json里的完全一致，不能有差异。

4. 重启终端和服务 #

修改配置后，关掉当前的终端窗口，重新打开再执行npx shadcn@latest init，避免缓存导致配置没生效。

5. 排查拼写错误 #

仔细检查tsconfig.json里的字段拼写，比如有没有把paths写成path，或者路径写错（比如少写了斜杠src/写成src）。

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