Next.js13でNextUIを使うとスタイルが書き出されない件の解決策

Next.js13.4以降のApp Routerを使っていて、NextUIを導入いたのですが、読み込んだコンポーネントのCSSが書き出されず困りました。

公式ページの設定はしっかり行っているし、NextUIの基本的なCSSは書き出されていたので、コンポーネントのCSSを書き出す部分がおかしそうです。

丸一日試行錯誤したのですが、とりあえずの解決策は、「@nextui-org/react」と「 framer-motion」だけでなく、「 @nextui-org/theme」と「@nextui-org/system」も入れたら表示されました。

npm i @nextui-org/theme @nextui-org/system

Inputコンポーネントのラベルが動かないなどの問題が残っていますが、この動作は多分使わないのでとりあえずこのままいこうかとおもいます。

原因はわかりませんが、pnpmをつかていたり、モノレポで運用しているのが怪しいかなと。

あと、公式ページのNext.jsのApp Routerの説明では、「@nextui-org/react」ではなく「@nextui-org/button」のように、個別のコンポーネントから読み込むようにとの注意書きがあります。

「@nextui-org/react」だけをインストールしたときでも、「@nextui-org/button」でTypeエラーが出ず普通に読み込めて書き出されたのですが、CSSは書き出されない状態でした。

他にも、pnpmを使っているので、.npmrcを作って

public-hoist-pattern[]=*@nextui-org/*

を書いて再インストールしたのですが、やはりだめ。（インストールが止まるときは、devサーバーを止めてからじゃないとインストールできない）

nextui-org/next-app-templateを試してみたらちゃんとCSSが書き出されたので、ファイルを比較しているとpackage.jsonで「@nextui-org/react」は読み込まれておらず、各コンポーネントがズラッと個別インストールされていた。

 "dependencies": {
    "@nextui-org/button": "2.0.9",
    "@nextui-org/code": "2.0.7",
    "@nextui-org/input": "2.0.10",
    "@nextui-org/kbd": "2.0.8",
    "@nextui-org/link": "2.0.9",
    "@nextui-org/navbar": "2.0.9",
    "@nextui-org/snippet": "2.0.10",
    "@nextui-org/switch": "2.0.9",
    "@nextui-org/system": "2.0.5",
    "@nextui-org/theme": "2.0.4"
 }

これらをまとめてインストールしてみると、一応CSSが書き出されるようになった。

この中でsystemとthemeがメインなので、それだけを残したところ、まだ動く。

「@nextui-org/react」の中にsystemとthemeが入っているはずなのに、謎。

あと、「@nextui-org/react」ではなく「@nextui-org/button」というようにインポートしろと書かれていたが、「@nextui-org/react」でも一応動く。

個別インポートは流石に面倒すぎる…。