Next.js 15 + React 19

TL;DR

如果你使用的是 npm，可以用一个命令行标志来安装 shadcn/ui 的依赖项。当你运行 shadcn 命令行工具时，它会提示你选择一个命令行标志。使用 pnpm、bun 或 yarn 安装时无需命令行标志。

请参见 升级进度，了解各软件包对 React 19 的支持情况。

What's happening?

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

To support React 19, package maintainers will need to test and update their packages to include React 19 as a peer dependency. This is already in progress. 要支持 React 19，软件包维护者需要测试和更新他们的软件包，以便将 React 19 作为同级依赖包（peer dependency）。这已经 在 进行中 了。

"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），你将看到类似下面的错误信息：

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

这将安装软件包并忽略对等依赖警告（peer dependency warnings）。

解决方案 2：使用 React 18

You can downgrade react and react-dom to version 18, which is compatible with the package you are installing and upgrade when the dependency is updated. 您可以将 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 命令时，会提示你选择一个选项来解决对等依赖问题（peer dependency issues）。

It 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 issues）。

请记住，在安装新的依赖包后，一定要测试你的应用程序。

升级进度

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

• ✅ - Works with React 19 using npm, pnpm, and bun.可使用 npm、pnpm 和 bun 与 React 19 协同工作。
• 🚧 - Works with React 19 using pnpm and bun. Requires flag for npm. PR is in progress. 可使用 pnpm 和 bun 与 React 19 配合使用。需要 npm 的标志。公关正在进行中。

如果您遇到任何问题，请在 GitHub 上 提交 issue。

Recharts

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

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