👾

Next.js 15 で shadcn/ui をinstallするときに発生するエラーの推奨される解決策

に公開
Next.js
React
npm
pnpm
shadcn/ui
tech

2024年11月4日時点での情報です。
追記
公式がFix方法を載せていたので置いておきます
https://ui.shadcn.com/docs/react-19

はじめに

2024年10月21日にリリースされた最新バージョンのNext.js 15の影響で、shadcn/uiのinstall時にエラーが出るようになりました。

問題

筆者の環境

  • Next.js 15
  • React 19.0.0-rc-69d4b800-20241021
  • npm (latest version)
  • shadcn-ui (latest version)

公式ドキュメントの通りにshadcn/uiのインストールコマンドを打ちます。

npx shadcn@latest init

実行すると以下のエラーメッセージが表示されます。

<ユーザー名>@<ユーザー名>Mac <プロジェクト名> % npx shadcn@latest init
✔ Preflight checks.
✔ Verifying framework. Found Next.js.
✔ Validating Tailwind CSS.
✔ Validating import alias.
✔ Which style would you like to use? › Default
✔ Which color would you like to use as the base color? › Slate
✔ Would you like to use CSS variables for theming? … no / yes
✔ Writing components.json.
✔ Checking registry.
✔ Updating tailwind.config.ts
✔ Updating src/app/globals.css
⠴ Installing dependencies.
Something went wrong. Please check the error below for more details.
If the problem persists, please open an issue on GitHub.

Command failed with exit code 1: npm install tailwindcss-animate class-variance-authority lucide-react clsx tailwind-merge
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: @radix-ui/react-icons@1.3.1
npm ERR! Found: react@19.0.0-rc-02c0e824-20241028
npm ERR! node_modules/react
npm ERR!   peer react@"^18.2.0 || 19.0.0-rc-02c0e824-20241028" from next@15.0.2
npm ERR!   node_modules/next
npm ERR!     next@"15.0.2" from the root project
npm ERR!   peer react@"19.0.0-rc-02c0e824-20241028" from react-dom@19.0.0-rc-02c0e824-20241028
npm ERR!   node_modules/react-dom
npm ERR!     peer react-dom@"^18.2.0 || 19.0.0-rc-02c0e824-20241028" from next@15.0.2
npm ERR!     node_modules/next
npm ERR!       next@"15.0.2" from the root project
npm ERR!     react-dom@"19.0.0-rc-02c0e824-20241028" from the root project
npm ERR!   3 more (styled-jsx, the root project, lucide-react)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.x || ^17.x || ^18.x || ^19.x" from @radix-ui/react-icons@1.3.1
npm ERR! node_modules/@radix-ui/react-icons
npm ERR!   @radix-ui/react-icons@"^1.3.1" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: react@18.3.1
npm ERR! node_modules/react
npm ERR!   peer react@"^16.x || ^17.x || ^18.x || ^19.x" from @radix-ui/react-icons@1.3.1
npm ERR!   node_modules/@radix-ui/react-icons
npm ERR!     @radix-ui/react-icons@"^1.3.1" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! 
npm ERR! For a full report see:
npm ERR! /Users/<ユーザー名>/.npm/_logs/2024-11-03T23_08_22_295Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in: /Users/<ユーザー名>/.npm/_logs/2024-11-03T23_08_22_295Z-debug-0.log

<ユーザー名>@<ユーザー名>Mac <プロジェクト名> %

解決策

shadcn/ui公式のGitレポジトリでもこのイシューは議論されており、様々な解決策が提示されています。

スレッド内で提示されていた主な解決策は以下です。

  1. pnpm を使用する
  2. npm での --force または --legacy-peer-deps の使用
  3. 手動でのパッケージインストールとオーバーライド
  4. React 18 へのダウングレード

その中で「1. pnpm を使用する」こちらが現時点で最も推奨される解決策です。
もしプロジェクトを立ち上げたばかりでしたら、以下の手順でパッケージマネージャをnpmからpnpmに切り替えることを考えてみてください。

pnpmを使用する

以下のコマンドでpnpmをグローバルにインストールします。

npm i -g pnpm

その後、pnpmを使用してNext.jsプロジェクトを立ち上げます。

pnpm dlx create-next-app@latest

shadcn/uiをインストールします。

pnpm dlx shadcn@latest init

以下のようにターミナルに表示されたら無事shadcn/uiがインストールできました。

`<ユーザー名>@<ユーザー名>Mac <プロジェクト名> % pnpm dlx shadcn@latest init
✔ Preflight checks.
✔ Verifying framework. Found Next.js.
✔ Validating Tailwind CSS.
✔ Validating import alias.
✔ Which style would you like to use? › Default
✔ Which color would you like to use as the base color? › Slate
✔ Would you like to use CSS variables for theming? … no / yes
✔ Writing components.json.
✔ Checking registry.
✔ Updating tailwind.config.ts
✔ Updating src/app/globals.css
✔ Installing dependencies.
✔ Created 1 file:

src/lib/utils.ts

Success! Project initialization completed.
You may now add components.

Discussion