pnpm install の nuxt prepareで依存パッケージから読み込まれるintlify/shared 由来のエラーを何とかできた話

npmとかpnpmとかでよく聞く話なのかもしれないですが、package-lock.json とか pnpm-lock.jsonを再作成しただけで、(package.jsonを触っていないのに）エラーがでることありますよね。

しかも、package.jsonが原因ならば一つ前のバージョンに戻して、エラーが出るようになった原因の修正を取り除けば良さそうなのですが、自動生成されるpackage-lock.jsonを戻すとエラーが出なくなるという事であれば、泣きたくなる状況です。

そもそも、パッケージをインストールするときに npm addとか npm installを実施するとか scriptを追記するとか程度しか通常実施しないですよね。
改めて、package.jsonのバージョン指定の仕方とか、devDependenciesとDependenciesの違いとかあまり理解していなかったです。

しかも、引き継いだvueプロジェクトが pnpmを使っていたので、更にハードルが上がってしまい、さらにはGoogleでエラーメッセージを検索しても役立つ情報が見つからなかったのです。。。

発生事象

依存パッケージの脆弱性問題があったので、依存パッケージのバージョンを上げて、pnpm install実施で以下のエラー。
package.json を戻して、pnpm-lock.json を削除して pnpm install を実施しても同じエラーが出る。。

エラーメッセージ

nuxt prepare

[9:41:16 AM] ERROR [unhandledRejection] No "exports" main defined in /(省略..)/web/node_modules/.pnpm/@intlify+bundle-utils@4.0.0_vue-i18n@9.3.0-beta.16_vue@3.2.47_/node_modules/@intlify/shared/package.json

削除前と自動生成された、pnpm-lock.jsonの差分を見ると、エラーメッセージに出てきた @intlify/sharedでα版を参照している用になっていて、多分これが原因と考えたわけです

以前

  '@intlify/bundle-utils@4.0.0(vue-i18n@9.3.0-beta.16)':
    dependencies:
      '@intlify/message-compiler': 10.0.0-beta.1
      '@intlify/shared': 10.0.0-beta.1
      jsonc-eslint-parser: 1.4.1
      source-map: 0.6.1
      vue-i18n: 9.3.0-beta.16(vue@3.3.4)
      yaml-eslint-parser: 0.3.2

  '@intlify/bundle-utils@4.0.0(vue-i18n@9.3.0-beta.16(vue@3.3.4))':
    dependencies:
      '@intlify/message-compiler': 12.0.0-alpha.2
      '@intlify/shared': 12.0.0-alpha.2
      jsonc-eslint-parser: 1.4.1
      source-map: 0.6.1
      yaml-eslint-parser: 0.3.2
    optionalDependencies:
      vue-i18n: 9.3.0-beta.16(vue@3.3.4)

解決策

overrides設定を利用します。

overrides設定により、依存パッケージから参照されるパッケージのバージョンを固定する事ができます。

ただし、pnpmで利用するには pnpmセクションに入れ込む必要があります。

一部抜粋するとこんな感じ

  "dependencies": {
    "@floating-ui/vue": "^0.2.1",
    "@pinia/nuxt": "^0.4.11",
    "@types/blueimp-load-image": "^5.16.6",
    "@vuepic/vue-datepicker": "^4.5.1",
    "blueimp-canvas-to-blob": "^3.29.0",
    "blueimp-load-image": "^5.16.0",
    "blurhash": "^2.0.5",
    "firebase": "^9.23.0",
    "fractional": "^1.0.0",
    "nuxt3-meta-pixel": "^1.0.9",
    "pinia": "^2.3.1",
    "vite": "^4.5.13",
    "vue": "^3.5.13",
    "vuedraggable": "^4.1.0"
  },
  "pnpm": {
    "overrides": {
      "@intlify/message-compiler": "^11.0.0",
      "@intlify/shared": "^11.0.0"
    }
  },
  "volta": {
    "node": "16.19.1"
  }

package.jsonのpnpmセクションとかはwebb検索しても見つからず、geminiに

"pnpm で overrides機能は使えないですか？"
と質問した結果として得たものです。

公式ドキュメントとしてはpnpm-workspace.yamlで設定しろと出てきました