v0のコードをローカルに移すとエラーが
reactができる生成AI『v0』を久しぶりにローカル移植したところエラーが起きてしまいました。
※以前の「v0をローカルで動かす」の記事はこちら
上記で書いたとおりダウンロードボタンから表示される「npx shadcn@～」をコマンドで実行すると次のようなエラーが
npx shadcn@2.3.0 add "https://v0.dev/chat/b/b_fSDxjS1XpA3?token=eyJhbGciOiJkaXIiLCJlbmMiOiJBMjU2R0NNIn0..pkkMlD0QyKAJLLxa.4-XBM9N37xSgMsZHSDyH97LmNn4KCX6fXkOrYAtn3OJiwoUmmdpZ54tg01k.VSe9Prlgq1LfE93k-FNrqg"
Something went wrong. Please check the error below for more details.
If the problem persists, please open an issue on GitHub.
Cannot read properties of undefined (reading 'resolvedPaths')
全く情報がわからないエラー内容。
ただよく見ると「npx shadcn@2.3.0 ～」となっており、以前は「npx shadcn@latest」だったはずなので「あれ？」と思い、latestに直すと解消されました。（2025/5/1時点でlatestのバージョンは2.5.0）
npx shadcn@latest add "https://v0.dev/chat/b/b_fSDxjS1XpA3?token=eyJhbGciOiJkaXIiLCJlbmMiOiJBMjU2R0NNIn0..pkkMlD0QyKAJLLxa.4-XBM9N37xSgMsZHSDyH97LmNn4KCX6fXkOrYAtn3OJiwoUmmdpZ54tg01k.VSe9Prlgq1LfE93k-FNrqg"
しかし、これは根本的な解決ではなく一部の場合でしか利用できないようで実行するとエラーが起きました。
※ここからは推測も含みますのでご了承下さい。（私はアマチュアReactユーザです。）
どうやらエラーの原因を調べて見ると現在のv0で生成するコードはTailwind CSSのバージョン3を利用して作られていますが、「npx ～」でプロジェクトを作成するとTailwind CSSが最新のバージョン4でインストールされていたためのエラーとなったようです。（Tailwindは3と4で形式がかなり変わってるようです）
※これは[Deploy]からVercelにデプロイした際の環境の情報です
ということで結論を言えばちゃんと 「npx shadcn@2.3.0 ～」 には意味がありv0がまだTailwindバージョン4に対応していないため 「shadcn→2.3、Tailwind→3で環境作れよ」 ってことみたいです。
じゃあTailwind3のプロジェクトを作って「npx shadcn@2.3.0 ～」をすればいいのですが、下記のバグも見つかりひどい目に会いました…
以下、成功した手順になります。
Tailwind3でのインストール
通常通りプロジェクト作成。
npx create-next-app@latest
※ただTailwind CSSは「No」を選んで入れないで下さい。
プロジェクトのフォルダに移動。
cd test-app
バージョン3のTailwindcssをインストール。
（3.4.17はVercelに合わせただけです。postcssは不要の場合もあります。）
npm install tailwindcss@3.4.17 postcss@8
tailwind.config.js作成。
npx tailwindcss init
でここからまた面倒なのですが、先ほどのリンク先のGitHubに挙がっているエラーの通り、appフォルダにあるglobals.cssの最上部に以下の「@tailwind～」で始まる3行を追加します。（こうしないとTailwindcssのインストールが検出できないようです）
+ @tailwind base;
+ @tailwind components;
+ @tailwind utilities;
:root {
--background: #ffffff;
--foreground: #171717;
}
…
やっとやりたかった最初のv0で作成したコマンドです。
npx shadcn@2.3.0 add "https://v0.dev/chat/b/b_fSDxjS1XpA3?token=eyJhbGciOiJkaXIiLCJlbmMiOiJBMjU2R0NNIn0..pkkMlD0QyKAJLLxa.4-XBM9N37xSgMsZHSDyH97LmNn4KCX6fXkOrYAtn3OJiwoUmmdpZ54tg01k.VSe9Prlgq1LfE93k-FNrqg"
これで上手く行きました。。
感想
このエラーと向き合い久しぶりに 「ソフトウェア地獄」 を見ました。
「shadcnのバージョンが～」「TailwindCSSのバージョンが～」
に追われ 「じゃあReactのバージョンは？」「他のパッケージも…？」
など疑心暗鬼になり訳が分からなくなった次第です。
元々大前提としてソフトウェアはバージョンを管理・把握すべきですがv0という便利なAIに頼りすぎたためこういうことになってしまいました。
（ただNode.jsなどReact周りは依存関係訳わからなすぎ！と言いたいです。本業の方すごいです。。）
ChatGPTが過去のデータしか学習していないのと同様、コード生成AIも学習したソースが古くうかつに「ソフトなど最新の環境に変えると対応できないことがあるよ」 というお話でした。