Next.js Pages目录下shadcn组件导入失败问题求助

1. 核心问题：别名配置与实际目录不匹配 #

你在shadcn-ui init时指定了工具别名@/lib/utils，但实际生成的utils.ts被放在了@/components/lib/目录下——这直接导致组件里导入@/lib/utils时，TypeScript找不到对应模块，触发TS2307错误。

这大概率是init时的路径配置出错了：shadcn会询问工具函数的存放目录，你可能误将路径设为了components/lib，而非项目根目录的lib/，才导致文件生成位置偏离预期。

2. 辅助排查点：TS配置与components.json是否正确 #

检查tsconfig.json路径映射 #

TypeScript要识别@/lib/*和@/components/*，必须在tsconfig.json里配置正确的路径映射：

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

如果缺少@/lib/*的映射，或者映射路径错误，也会引发模块找不到的问题。

检查components.json的别名配置 #

你的components.json里的aliases字段必须和实际路径对应：

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": false,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "styles/globals.css",
    "baseColor": "slate",
    "cssVariables": true
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils"
  }
}

如果utils字段的路径和实际文件位置不符，后续安装组件时shadcn会继续生成错误的导入语句。

修复步骤 #

• 调整目录结构：把components/lib/utils.ts移到项目根目录的lib/文件夹下（没有就新建）。
• 修正components.json：确保aliases.utils的值是@/lib/utils，和实际文件路径匹配。
• 更新tsconfig.json：确认compilerOptions.paths里包含"@/lib/*": ["lib/*"]，保存后重启开发服务器。
• 修正组件导入：打开@/components/ui/button.ts，将导入cn的语句改为import { cn } from "@/lib/utils"，若仍报错可先用相对路径../../lib/utils测试。

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