Nuxt UI + pnpm環境で`tailwindcss`が解決できない問題の解決方法メモ📝
Nuxt UIをpnpm環境で導入した際、tailwindcssが解決できずにエラーとなる事象に遭遇したので、その解決方法をメモ📝
発生したエラー
Nuxt UIの公式ドキュメント通りにセットアップしたものの、下記のようなエラーが発生。
ERROR Internal server error: Can't resolve 'tailwindcss' in 'path/file'
tailwindcss自体は依存に含まれているはずなのに、Nuxtのビルド時に解決できずに落ちてしまう👀
原因
pnpmはデフォルトで依存パッケージをフラットに配置せず、各パッケージごとにnode_modulesを分離して管理する。そのため、Nuxt UIやtailwindcssのような依存解決が深いパッケージの場合、ルートに依存が見つからずエラーになることがある。
解決方法
pnpm-workspace.yamlや.npmrcに下記の設定を追加することで、依存パッケージをルートにフラットに配置でき、エラーが解消された。
# .npmrc + shamefully-hoist=true
この設定により、node_modulesがnpmのようなフラットな構造になり、Nuxt UIやtailwindcssの依存解決がうまくいくようになる。
公式ドキュメントにも以下の記載があった😭
If you're using pnpm, ensure that you either set shamefully-hoist=true in your .npmrc file or install tailwindcss in your project's root directory. Installation - Nuxt UI
公式ガイドの注意事項はちゃんと読まないとダメですね・・・！
