diff --git a/.changeset/calm-bees-train.md b/.changeset/calm-bees-train.md new file mode 100644 index 00000000000..e7397533b8e --- /dev/null +++ b/.changeset/calm-bees-train.md @@ -0,0 +1,5 @@ +--- +"shadcn": patch +--- + +temporarily bring back npm flag diff --git a/apps/www/content/docs/components/chart.mdx b/apps/www/content/docs/components/chart.mdx index 907625729b9..9566275e48b 100644 --- a/apps/www/content/docs/components/chart.mdx +++ b/apps/www/content/docs/components/chart.mdx @@ -4,6 +4,12 @@ description: Beautiful charts. Built using Recharts. Copy and paste into your ap component: true --- + + +**Note:** If you are using charts with **React 19** or the **Next.js 15**, see the note [here](/docs/react-19#recharts). + + + + +**Note:** If you are using charts with **React 19** or the **Next.js 15**, see the note [here](/docs/react-19#recharts). + + + @@ -83,27 +95,6 @@ npx shadcn@latest add chart } ``` - - To use recharts with React 19 and Next.js 15, you will need to override the - `react-is` dependency.{" "} - - -Add the following to your `package.json` - -```json title="package.json" -"overrides": { - "react-is": "^19.0.0-rc-69d4b800-20241021" -} -``` - -Note: the `react-is` version needs to match the version of React 19 you are using. The above is an example. - -Run `npm install` - -```bash -npm install -``` - @@ -144,27 +135,6 @@ npm install recharts } ``` - - To use recharts with React 19 and Next.js 15, you will need to override the - `react-is` dependency.{" "} - - -Add the following to your `package.json` - -```json title="package.json" -"overrides": { - "react-is": "^19.0.0-rc-69d4b800-20241021" -} -``` - -Note: the `react-is` version needs to match the version of React 19 you are using. The above is an example. - -Run `npm install` - -```bash -npm install -``` - diff --git a/apps/www/content/docs/react-19.mdx b/apps/www/content/docs/react-19.mdx index 2f15ef52270..660802ea1e8 100644 --- a/apps/www/content/docs/react-19.mdx +++ b/apps/www/content/docs/react-19.mdx @@ -3,9 +3,7 @@ title: Next.js 15 + React 19 description: Using shadcn/ui with Next.js 15 and React 19. --- -**shadcn/ui is now fully compatible with React 19!** - - + **The following guide applies to any framework that supports React 19**. I titled this page "Next.js 15 + React 19" to help people upgrading to Next.js 15 find it. We are working with package maintainers to help upgrade to React @@ -144,7 +142,7 @@ To make it easy for you track the progress of the upgrade, I've created a table | [react-day-picker](https://www.npmjs.com/package/react-day-picker) | ✅ | Works with flag for npm. Work to upgrade to v9 in progress. | | [input-otp](https://www.npmjs.com/package/input-otp) | ✅ | | | [vaul](https://www.npmjs.com/package/vaul) | ✅ | | -| [@radix-ui/react-icons](https://www.npmjs.com/package/@radix-ui/react-icons) | ✅ | | +| [@radix-ui/react-icons](https://www.npmjs.com/package/@radix-ui/react-icons) | 🚧 | See [PR #194](https://github.com/radix-ui/icons/pull/194) | | [cmdk](https://www.npmjs.com/package/cmdk) | ✅ | | If you have any questions, please [open an issue](https://github.com/shadcn/ui/issues) on GitHub. diff --git a/packages/shadcn/src/utils/updaters/update-dependencies.ts b/packages/shadcn/src/utils/updaters/update-dependencies.ts index 8eb53a0937a..9516c867d52 100644 --- a/packages/shadcn/src/utils/updaters/update-dependencies.ts +++ b/packages/shadcn/src/utils/updaters/update-dependencies.ts @@ -1,8 +1,11 @@ import { Config } from "@/src/utils/get-config" +import { getPackageInfo } from "@/src/utils/get-package-info" import { getPackageManager } from "@/src/utils/get-package-manager" +import { logger } from "@/src/utils/logger" import { RegistryItem } from "@/src/utils/registry/schema" import { spinner } from "@/src/utils/spinner" import { execa } from "execa" +import prompts from "prompts" export async function updateDependencies( dependencies: RegistryItem["dependencies"], @@ -26,12 +29,52 @@ export async function updateDependencies( })?.start() const packageManager = await getPackageManager(config.resolvedPaths.cwd) + // Offer to use --force or --legacy-peer-deps if using React 19 with npm. + let flag = "" + if (isUsingReact19(config) && packageManager === "npm") { + dependenciesSpinner.stopAndPersist() + logger.warn( + "\nIt looks like you are using React 19. \nSome packages may fail to install due to peer dependency issues in npm (see https://ui.shadcn.com/react-19).\n" + ) + const confirmation = await prompts([ + { + type: "select", + name: "flag", + message: "How would you like to proceed?", + choices: [ + { title: "Use --force", value: "force" }, + { title: "Use --legacy-peer-deps", value: "legacy-peer-deps" }, + ], + }, + ]) + + if (confirmation) { + flag = confirmation.flag + } + } + + dependenciesSpinner?.start() + await execa( packageManager, - [packageManager === "npm" ? "install" : "add", ...dependencies], + [ + packageManager === "npm" ? "install" : "add", + ...(packageManager === "npm" && flag ? [`--${flag}`] : []), + ...dependencies, + ], { cwd: config.resolvedPaths.cwd, } ) dependenciesSpinner?.succeed() } + +function isUsingReact19(config: Config) { + const packageInfo = getPackageInfo(config.resolvedPaths.cwd) + + if (!packageInfo?.dependencies?.react) { + return false + } + + return /^(?:\^|~)?19(?:\.\d+)*(?:-.*)?$/.test(packageInfo.dependencies.react) +}