Next.js 15 + React 19

精简总结（TL;DR）

如果你使用 npm，可以通过添加标志来安装 shadcn/ui 的依赖。在运行 shadcn CLI 时，会提示你选择一个标志。使用 pnpm、bun 或 yarn 则无需添加标志。

有关每个包对 React 19 支持的状态，请参阅 升级状态。

发生了什么？

React 19 现已为 候选版本，并且已在最新版 Next.js 15 中测试并支持。

为了支持 React 19，包维护者需要测试并更新他们的包，将 React 19 作为 peer dependency 添加进来。这项工作已经在进行中、进行中 和进行中。

Copy"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 列为 peer dependency，会看到类似如下的错误信息：

Copynpm 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

如何解决

方案一：--force 或 --legacy-peer-deps

你可以使用 --force 或 --legacy-peer-deps 标志强制安装包：

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

这将安装包并忽略 peer dependency 警告。

方案二：使用 React 18

你可以将 react 和 react-dom 降级到版本 18，这样就与所安装的包兼容，等依赖更新后再升级。

Copynpm i react@18 react-dom@18

无论选择哪种方案，请务必充分测试你的应用，确保不会出现回归问题。

在 Next.js 15 上使用 shadcn/ui

使用 pnpm、bun 或 yarn

请按照安装指南中的步骤安装 shadcn/ui，无需任何标志。

使用 npm

当你运行 npx shadcn@latest init -d 时，会提示你选择一种方式以解决 peer dependency 问题：

CopyIt looks like you are using React 19.
Some packages may fail to install due to peer dependency issues (see https://ui.shadcn.com/react-19).
 
? How would you like to proceed? › - Use arrow-keys. Return to submit.
❯   Use --force
    Use --legacy-peer-deps

接着，你可以使用选择的标志运行该命令。

添加组件

添加组件的流程与上述相同。请选择一个标志来解决 peer dependency 问题。

请记得每次安装新依赖后，务必测试你的应用。

升级状态

为了方便你跟踪升级进度，我制作了下面的表格，列出了 shadcn/ui 依赖包对 React 19 的支持状态。

• ✅ - 使用 npm、pnpm 和 bun 均支持 React 19。
• 🚧 - 使用 pnpm 和 bun 支持 React 19。npm 需要添加标志。相关 PR 正在进行中。

如果你有任何问题，请在 GitHub 上提交 issue。

Recharts

要在 React 19 中使用 recharts，你需要重写 react-is 依赖。

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