TypeScript中shadcn-ui库别名导入失效问题求助

安全阿岳

2026-6-26

TypeScript路径别名解析异常修复（Next.js项目）

问题根源分析

你遇到的问题核心有两点：

tsconfig缺少baseUrl配置：paths规则必须配合baseUrl才能生效，你的完整配置里没声明baseUrl，导致别名规则不被TypeScript识别。
导入路径冗余：你配置的@/*已经映射到./src/*，但导入时写了@/src/components/ui/button，相当于实际路径变成./src/src/components/ui/button，自然找不到目标文件。

分步修复方案

1. 补全tsconfig的`baseUrl`配置

修改tsconfig.json的compilerOptions，添加baseUrl并确保paths配置正确：

{
  "compilerOptions": {
    // ...保留原有其他配置
    "baseUrl": "./", // 必须添加这一行
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  // ...include/exclude配置保持不变
}

2. 修正导入语句

去掉冗余的src，正确的导入写法应为：

import { ThemeButton } from "@/components/ui/button";

3. （可选）配置Next.js的Webpack别名

部分Next.js版本需要额外在next.config.js中配置Webpack别名，确保运行时能识别路径：

const path = require('path');

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  webpack: (config) => {
    config.resolve.alias['@'] = path.resolve(__dirname, './src');
    return config;
  },
};

module.exports = nextConfig;