【解決】yarn storybook実行時のエラー - 知らぬ間にYarn Berryに切り替わっていた話

はじめに

最近、既存のプロジェクトで 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つのバージョンがあります：

1. Yarn Classic (v1系)

   • 従来の一般的なパッケージマネージャー
   • node_modules ディレクトリを使用
   • 多くのプロジェクトで使用されている標準的なバージョン

2. Yarn Berry (v2以降)

   • Plug'n'Play (PnP) という新しいモジュール解決システムを使用
   • .yarn ディレクトリや .pnp.cjs などの独自の設定ファイルを使用
   • より高度な機能を提供する新しいバージョン

解決方法

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

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

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

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

corepack disable
npm install -g yarn

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

rm -rf node_modules
yarn install

1. Storybookを起動

yarn storybook

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

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

教訓

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

まとめ

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

参考リンク

• Yarn Berry Documentation
• Node.js Corepack
• Yarn Classic Documentation