Next.js 15 更新后 Vercel 商务模板中的 ShadCN UI 和 Radix UI 冲突

Question

在将 ShadCN UI 与 Vercel Commerce 模板更新到 Next.js 15 后，我遇到了问题。ShadCN UI 组件在之前的版本中工作没有问题，但现在在导入时会抛出与 Radix UI 相关的模块解析错误

这是我尝试使用 ShadCN UI 的 DropdownMenu 组件时遇到的错误：

Module not found: Can't resolve '@radix-ui/react-dropdown-menu'

重现步骤 克隆最新的 Vercel Commerce 模板 (Next.js 15)。 按照官方文档安装 ShadCN UI。 导入并尝试使用任何 ShadCN UI 组件，例如 DropdownMenu。 出现错误，导致应用程序无法编译。

我尝试过的事情 删除 node_modules 和 pnpm-lock.yaml，然后重新安装依赖项。 使用简单的 Next.js 15 项目测试 ShadCN UI（没有 Vercel Commerce）；效果很好。 直接将@radix-ui/react-dropdown-menu添加到package.json中，但并没有解决问题。

环境

• Next.js 版本：15.0.0-rc.1
• 包管理器：pnpm
• Vercel 商务模板：Next.js 15 更新后的最新版本

预期行为 ShadCN UI 应按预期与 Vercel Commerce 模板一起工作，就像与以前版本的 Next.js 一样

问题 这是 ShadCN 中的 Radix UI 和 Vercel Commerce 依赖版本之间的已知兼容性问题吗？如果是这样，是否有任何解决方法，或者我是否需要手动修改依赖项才能使这些组件协同工作？

附加信息 我注意到 Radix UI 组件深深嵌入 ShadCN 中，这可能会导致 Vercel Commerce 模板中的版本冲突。任何有关解决此冲突的指导都会有帮助

我尝试过的事情 删除 node_modules 和 pnpm-lock.yaml，然后重新安装依赖项。 使用简单的 Next.js 15 项目测试 ShadCN UI（没有 Vercel Commerce）；效果很好。 直接将@radix-ui/react-dropdown-menu添加到package.json中，但并没有解决问题。

Answer 1

查看博客解决这个问题 https://tutorialsmaterial.com/post/ShadCn-Nextjs-15