はじめに

最近、既存のプロジェクトで yarn storybook を実行しようとしたところ、予期せぬエラーに遭遇しました。調査してみると、知らぬ間にYarn Berryにアップグレードされていたことが原因でした。この記事では、その問題の解決方法を共有します。

発生した問題

以下のようなエラーが発生しました：

! The local project doesn't define a 'packageManager' field. Corepack will now add one referencing yarn@3.2.3+sha512...
! For more details about this field, consult the documentation at https://nodejs.org/api/packages.html#packagemanager

**Internal Error**: hoge-package@workspace:.: This package doesn't seem to be present in your lockfile; run "yarn install" to update the lockfile

yarn install を実行すると、今まで見たことのない以下のようなファイルが生成されました：

Untracked files:
  .pnp.cjs
  .pnp.loader.mjs
  .yarn/
  yarn.lock

原因

この問題は、プロジェクトが知らぬ間にYarn Berry（v3.2.3）に切り替わっていたことが原因でした。

Yarn Classic vs Yarn Berry

Yarnには大きく分けて2つのバージョンがあります：

Yarn Classic (v1系)
- 従来の一般的なパッケージマネージャー
- node_modules ディレクトリを使用
- 多くのプロジェクトで使用されている標準的なバージョン
Yarn Berry (v2以降)
- Plug'n'Play (PnP) という新しいモジュール解決システムを使用
- .yarn ディレクトリや .pnp.cjs などの独自の設定ファイルを使用
- より高度な機能を提供する新しいバージョン

解決方法

以下の手順で問題を解決できました：

まず、Yarn Berryによって生成された新しいファイルを削除

rm .pnp.cjs .pnp.loader.mjs yarn.lock
rm -rf .yarn

Yarnを従来のバージョン(v1)に戻す

corepack disable
npm install -g yarn

依存関係を再インストール

rm -rf node_modules
yarn install

Storybookを起動

yarn storybook

なぜこの解決方法が有効だったのか

プロジェクトは元々Yarn Classicで構築されていたため、Yarn Berryの新しい機能や設定ファイルは不要でした
Yarn Classicに戻すことで、プロジェクトの既存の構成や依存関係の管理方法を維持できました
余分な設定ファイルを生成せずに、必要なパッケージのみをインストールできるようになりました

教訓

パッケージマネージャーのバージョンが予期せず変更される可能性があることを認識しておく
エラーメッセージに「packageManager field」や「Corepack」という言葉が出てきたら、Yarnのバージョンを確認する
プロジェクトの依存関係管理方式を変更する際は、チーム全体で合意を得てから行う

まとめ

今回の問題は、Yarn BerryとYarn Classicの違いを理解し、適切なバージョンに戻すことで解決できました。このような問題に遭遇した際は、まずパッケージマネージャーのバージョンを確認することをお勧めします。

参考リンク