🍨

【Storybookのビルドエラー】Yarn PnP により依存が許可されていない

に公開

はじめに

Storybookでビルドエラーが出たので、対応方法を記載しておきます。

エラー内容

Could not resolve "@storybook/addon-○○/manager"
The Yarn Plug'n'Play manifest forbids importing ... because it's not listed as a dependency

"@storybook/addon-○○/manager "を解決できませんでした。
Yarn Plug'n'Playマニフェストでインポートが禁止されています。

このStorybookのビルドエラーは、Yarn Plug'n'Play(PnP)を使っている環境で、必要な依存が package.jsonに明示されていないために解決できないというものです。

対応方法

こちらのPRに記載されていました。
https://github.com/storybookjs/storybook/discussions/28425

.pnp.js更新、または.pnp.cjsユーザーホームディレクトリから削除することで解決でるとのことなので、やってみました。

下記のコマンドで、.pnpがどこにあるのか探します。

$ ls -a ~ | grep .pnp

コマンドを打ったら、下記の表示が出てきたので、こちらのファイルを消します。

.pnp.cjs
.pnp.loader.mjs
.pnpm-state

.pnp.cjsと.pnp.loader.mjsのファイルを消しました。

$ rm ~/.pnp.cjs
$ rm ~/.pnp.loader.mjs

消した後に、yarn installをするとエラーが解消しました🎉

$ yarn install

最後に

node_modulesを削除しても治らなかったのですが、.pnpのファイルを消したら消えました。

Discussion