この記事では、shadcn/uiをNext.jsアプリケーションに追加しようとしてハマった時の対応記録を簡単に紹介します。せっかくなので、「Next.js Advent Calendar 2024」7日目の記事として公開しました。

遭遇した現象

Next.js App Routerとしてセットアップしたアプリケーションにshadcn/uiを追加しようとしました。しかしnpx shadcn initを実行すると、次のようなエラーが発生しました。

% npx shadcn@latest init          
✔ Preflight checks.
✔ Verifying framework. Found Next.js.
✔ Validating Tailwind CSS.
✔ Validating import alias.
✔ Which style would you like to use? › New York
✔ Which color would you like to use as the base color? › Neutral
✔ 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 @radix-ui/react-icons clsx tailwind-merge
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"19.0.0-rc-69d4b800-20241021" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.x || ^17.x || ^18.x" from @radix-ui/[email protected]
npm ERR! node_modules/@radix-ui/react-icons
npm ERR!   @radix-ui/react-icons@"*" 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/okamotohidetaka/.npm/_logs/2024-10-27T06_41_03_696Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in: /Users/okamotohidetaka/.npm/_logs/2024-10-27T06_41_03_696Z-debug-0.log

Next.jsが利用しているReactと競合している・・・？

エラーログを見る限り、Reactのdependencyが解決できていない様子です。Next.jsがRC版のv19を使っているけども、shadcnが内部で利用しているradix-uiはそれよりも前のバージョンを使っている・・・ということでしょうか。shadcn/uiにもIssueが立っていました。

Issueで紹介されていた解決策としては、次のコマンドを実行すると良いそうです。

% npm config set legacy-peer-deps true

このコマンドを実行すると、セットアップが成功しました。

% npx shadcn@latest init

✔ Preflight checks.
✔ Verifying framework. Found Next.js.
✔ Validating Tailwind CSS.
✔ Validating import alias.
✔ Which style would you like to use? › New York
✔ Which color would you like to use as the base color? › Neutral
✔ 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.

もしlegacy-peer-depsを設定してもエラーになる場合

失敗した時のセットアップコマンドが追加したファイルが原因でエラーが起きることもある様子です。

% npx shadcn@latest init                   

✖ Preflight checks.

A components.json file already exists at /Users/okamotohidetaka/development/my-services/kyoto-subway-final-train-alert.
To start over, remove the components.json file and run init again.

上のようなエラーが出た時は、components.jsonを消してからリトライしましょう。

 rm components.json