Zenn
😬

pnpm workspaceはパッケージごとの.npmrcを考慮しない

2024/09/11に公開
Next.js
monorepo
pnpm
NextUI
tech

TL;DR

何が起こったんや

私のプロジェクトでは、NextUIというUIライブラリを使っているのですが、公式のドキュメントで、.npmrcに以下の記載をする必要があるとされています。

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

これは、@nextui-org/reactの依存ライブラリであるコンポーネント類を、この設定によってnode_modulesルートに引き上げる設定で、これがないとpnpm環境でインポートがうまくできません。

先日、このプロジェクトをモノレポジトリに移行したところ、NextUIで作ったすべてのコンポーネントのデザインが死んでしまいました。

なんで死んだのか

  1. .npmrcが考慮されず、node_modulesのルートにnextuiのコンポーネントが上がってこなかった
  2. それによって、tailwind.config.tsに指定したcontent設定がうまく動いてなかった

という状況でした。

どうやって修正したか

  1. .npmrcをプロジェクトルートに配置する
  2. tailwind.config.tsを以下のように変更する
    content: [
        "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
        "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
        "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
        "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}",
        "../../node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}",
    ],

これで動くようになりました。

結論

  • .npmrcはプロジェクトルートに配置しよう
  • .npmrcが考慮された依存関係はプロジェクトルートに配置されるので、相対パスで参照しているなら変更しよう

以上です。

関連Issue

https://github.com/nextui-org/nextui/issues/3215
https://github.com/pnpm/pnpm/issues/7435

Discussion