Next.js 单体仓库中Shadcn/UI依赖共享问题求助

问题核心 #

你遇到的问题本质是monorepo的依赖隔离机制导致的：packages/ui 作为共享组件库安装的 zod、sonner 等依赖，默认仅在自身作用域内可用，消费组件的 apps/web 无法直接导入使用。

具体解决方法 #

1. 直接将共享依赖安装到monorepo根目录（最简便） #

在monorepo根目录执行安装命令，让所有子包共享这些依赖：

pnpm add zod sonner -w

参数 -w 表示将依赖安装到workspace根目录的 package.json 中，这样 apps/web 和 packages/ui 都能直接导入使用，无需各自单独安装。

2. 调整Shadcn配置，默认将依赖装到根目录 #

如果后续还要添加更多Shadcn组件，可修改 apps/web 下的 shadcn.json 配置，避免重复手动处理依赖：

{
  "$schema": "https://shadcn-ui.com/schema.json",
  "style": "default",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "../../tailwind.config.ts",
    "css": "app/globals.css",
    "baseColor": "slate",
    "cssVariables": true
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils"
  },
  // 添加此行，指定依赖安装到根目录
  "install": "root"
}

之后再执行 pnpm dlx shadcn@canary add [组件名] 时，组件所需依赖会自动安装到monorepo根目录。

3. 用peerDependencies声明共享依赖（规范做法） #

如果希望遵循组件库最佳实践，可在 packages/ui/package.json 中将 zod、sonner 声明为 peerDependencies，同时在根目录安装这些依赖：

1. 编辑 packages/ui/package.json：

{
  "peerDependencies": {
    "zod": "^3.22.0",
    "sonner": "^1.0.0"
  },
  "peerDependenciesMeta": {
    "zod": {
      "optional": false
    },
    "sonner": {
      "optional": false
    }
  }
}

2. 在根目录安装依赖：

pnpm add zod sonner -w

这种方式明确了组件库的依赖版本要求，同时利用monorepo共享机制避免重复安装，apps/web 无需单独安装即可使用。

验证方法 #

完成配置后，在 apps/web 中直接导入依赖测试：

import { z } from "zod";
import { Toaster } from "sonner";

能正常使用即说明依赖共享配置生效。

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