pnpm workspaceとViteを使ったモノレポでReact 18から19へ移行した際に「Minified React error #525」というエラーに遭遇した体験が語られています。自社プロジェクト「Dress Code」での実例で、原因は依存パッケージ「country-flag-icons」がまだReact 18を参照しており、複数バージョンのReactが共存してしまったことにありました。
背景には、Viteのimport解決がファイルのディレクトリから親へ遡って探索する仕組みと、pnpmが同一パッケージの複数バージョンがある場合にパス順ソートで最初に見つかった参照先を共通参照先に選ぶ挙動が絡んでいたといいます。pnpmのhoist機能(依存関係を上位階層に引き上げる仕組み)により作られるシンボリックリンク構造も影響していました。
最終的には、Viteのresolve.dedupe設定でプロジェクトルート基準の同一パッケージ参照を強制的に統一することで解決したと報告しています。
出典が伝えている要点
- 記事はReact 18からReact 19への移行プロジェクトについて書かれている
- 使用しているモノレポ構成はpnpm workspaceとViteである
- 移行時に「Minified React error #525」というエラーが発生した
- country-flag-icons@1というライブラリがReact 18を参照していた
- pnpmのhoist機能により
node_modules/.pnpm/node_modulesに共通参照先が作成される - この問題はViteの
resolve.dedupe設定オプションで解決した - importの解決はファイルのディレクトリから親へ上がりながら探索される
- pnpmは同一パッケージの複数バージョンが存在する場合、パス順でソートした後、先に見つかった参照先を共通参照先に選ぶ
- Viteのデフォルト設定
resolve.preserveSymlinks: falseではシンボリックリンクの実体のパスが使用される resolve.dedupeはプロジェクトルート基準で同一パッケージを強制的に統一する- 筆者は自社プロジェクト(Dress Code)での実装経験を基に本記事を執筆している
原文より
共通の参照先にReactがあることはわかりましたが、なぜReact19ではなくReact18だったのでしょうか
出典: zenn.dev