Next.js 15 + React 19

TL;DR

如果您使用 npm，可以通过一个标志安装 shadcn/ui 依赖项。运行 shadcn CLI 时，它会提示您选择一个标志。对于 pnpm、bun 或 yarn，不需要标志。

有关每个包的 React 19 支持状态，请查看 升级状态。

发生了什么？

React 19 现在处于 rc 阶段，且已在最新的 Next.js 15 版本中 测试和支持。

为了支持 React 19，包维护者需要测试并更新他们的包，以将 React 19 包含为一个对等依赖。这已经 在 进行中 了。

"peerDependencies": {
-  "react": "^16.8 || ^17.0 || ^18.0",
+  "react": "^16.8 || ^17.0 || ^18.0 || ^19.0",
-  "react-dom": "^16.8 || ^17.0 || ^18.0"
+  "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0"
},

与此同时，如果您正在安装一个 不 将 React 19 列为对等依赖的包，您将看到如下错误信息：

npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: my-app@0.1.0
npm error Found: react@19.0.0-rc-69d4b800-20241021
npm error node_modules/react
npm error   react@"19.0.0-rc-69d4b800-20241021" from the root project

如何解决此问题

解决方案 1：--force 或 --legacy-peer-deps

您可以使用 --force 或 --legacy-peer-deps 标志强制安装一个包。

npm i <package> --force
 
npm i <package> --legacy-peer-deps

这将安装该包并忽略对等依赖警告。

解决方案 2：使用 React 18

您可以将 react 和 react-dom 降级到版本 18，该版本与您要安装的包兼容，并在依赖更新时再升级。

npm i react@18 react-dom@18

无论您选择哪个解决方案，都请确保彻底测试您的应用以确保没有回归。

在 Next.js 15 上使用 shadcn/ui

使用 pnpm、bun 或 yarn

按照 安装指南 中的说明安装 shadcn/ui。无需标志。

使用 npm

当您运行 npx shadcn@latest init -d 时，系统会提示您选择一个选项来解决对等依赖问题。

看起来您正在使用 React 19。
某些包可能由于对等依赖问题而无法安装（请参见 https://ui.shadcn.com/react-19）。
 
? 您想如何继续？ › - 使用箭头键。按回车键提交。
❯   使用 --force
    使用 --legacy-peer-deps

然后，您可以运行选择的标志。

添加组件

添加组件的过程与上述相同。选择一个标志来解决对等依赖问题。

请记住，在安装新依赖后始终测试您的应用。

升级状态

为了方便您跟踪升级的进度，我在下方创建了一个表格，列出了 shadcn/ui 依赖项的 React 19 支持状态。

• ✅ - 使用 npm、pnpm 和 bun 适用于 React 19。
• 🚧 - 使用 pnpm 和 bun 适用于 React 19。npm 需要标志。PR 正在进行中。

如果您有任何问题，请在 GitHub 上 提出问题。

Recharts

要在 React 19 中使用 recharts，您需要覆盖 react-is 依赖项。

"overrides": {
  "react-is": "^19.0.0-rc-69d4b800-20241021"
}