When attempting to use Storybook 8 with PNPM in my Next.js project, I encounter errors indicating that various Storybook dependencies cannot be resolved. This issue persists despite multiple troubleshooting attempts, including clearing caches, reinstalling dependencies, and trying different versions of Storybook and PNPM.
Environment: Node: v20.15.0 PNPM: 8.15.6 NPM: 10.7.0 Next.js: v14.2.4 OS: MacOS 13.2.1
Dev Dependencies related to Storybook in package.json:
{
"@chromatic-com/storybook": "^1.6.0",
"@storybook/addon-essentials": "^8.1.11",
"@storybook/addon-interactions": "^8.1.11",
"@storybook/addon-links": "^8.1.11",
"@storybook/addon-onboarding": "^8.1.11",
"@storybook/blocks": "^8.1.11",
"@storybook/nextjs": "^8.1.11",
"@storybook/react": "^8.1.11",
"@storybook/test": "^8.1.11",
"eslint-plugin-storybook": "^0.8.0",
"storybook": "^8.1.11"
}
Expected Behavior: The Storybook should start without errors.
Actual Behavior: I receive the following errors when trying to run Storybook:
~ pnpm storybook
> [email protected] storybook /Users/X/Projects/GitHub/ProjectX
> storybook dev -p 6006
@storybook/cli v8.1.11
info => Serving static files from ././public at /
info => Starting manager..
✘ [ERROR] Could not resolve "@storybook/addon-toolbars/manager"
node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected][email protected]_unjzl3a5zay53n36pw25ml45ja/node_modules/@storybook/addon-essentials/dist/toolbars/manager.js:1:14:
1 │ export * from '@storybook/addon-toolbars/manager';
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
The Yarn Plug'n'Play manifest forbids importing
"@storybook/addon-toolbars" here because it's not listed as a
dependency of this package:
../../../../.pnp.cjs:36:31:
36 │ "packageDependencies": [\
╵ ~~
You can mark the path "@storybook/addon-toolbars/manager" as
external to exclude it from the bundle, which will remove this
error and leave the unresolved path in the bundle.
✘ [ERROR] Could not resolve "@storybook/addon-backgrounds/manager"
node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected][email protected]_unjzl3a5zay53n36pw25ml45ja/node_modules/@storybook/addon-essentials/dist/backgrounds/manager.js:1:14:
1 │ export * from '@storybook/addon-backgrounds/manager';
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
The Yarn Plug'n'Play manifest forbids importing
"@storybook/addon-backgrounds" here because it's not listed as a
dependency of this package:
../../../../.pnp.cjs:36:31:
36 │ "packageDependencies": [\
╵ ~~
You can mark the path "@storybook/addon-backgrounds/manager" as
external to exclude it from the bundle, which will remove this
error and leave the unresolved path in the bundle.
✘ [ERROR] Could not resolve "@storybook/addon-measure/manager"
node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected][email protected]_unjzl3a5zay53n36pw25ml45ja/node_modules/@storybook/addon-essentials/dist/measure/manager.js:1:14:
1 │ export * from '@storybook/addon-measure/manager';
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
The Yarn Plug'n'Play manifest forbids importing
"@storybook/addon-measure" here because it's not listed as a
dependency of this package:
../../../../.pnp.cjs:36:31:
36 │ "packageDependencies": [\
╵ ~~
You can mark the path "@storybook/addon-measure/manager" as
external to exclude it from the bundle, which will remove this
error and leave the unresolved path in the bundle.
✘ [ERROR] Could not resolve "@storybook/addon-outline/manager"
node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected][email protected]_unjzl3a5zay53n36pw25ml45ja/node_modules/@storybook/addon-essentials/dist/outline/manager.js:1:14:
1 │ export * from '@storybook/addon-outline/manager';
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
The Yarn Plug'n'Play manifest forbids importing
"@storybook/addon-outline" here because it's not listed as a
dependency of this package:
../../../../.pnp.cjs:36:31:
36 │ "packageDependencies": [\
╵ ~~
You can mark the path "@storybook/addon-outline/manager" as
external to exclude it from the bundle, which will remove this
error and leave the unresolved path in the bundle.
✘ [ERROR] Could not resolve "@storybook/addon-viewport/manager"
node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected][email protected]_unjzl3a5zay53n36pw25ml45ja/node_modules/@storybook/addon-essentials/dist/viewport/manager.js:1:14:
1 │ export * from '@storybook/addon-viewport/manager';
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
The Yarn Plug'n'Play manifest forbids importing
"@storybook/addon-viewport" here because it's not listed as a
dependency of this package:
../../../../.pnp.cjs:36:31:
36 │ "packageDependencies": [\
╵ ~~
You can mark the path "@storybook/addon-viewport/manager" as
external to exclude it from the bundle, which will remove this
error and leave the unresolved path in the bundle.
✘ [ERROR] Could not resolve "@storybook/addon-controls/manager"
node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected][email protected]_unjzl3a5zay53n36pw25ml45ja/node_modules/@storybook/addon-essentials/dist/controls/manager.js:1:14:
1 │ export * from '@storybook/addon-controls/manager';
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
The Yarn Plug'n'Play manifest forbids importing
"@storybook/addon-controls" here because it's not listed as a
dependency of this package:
../../../../.pnp.cjs:36:31:
36 │ "packageDependencies": [\
╵ ~~
You can mark the path "@storybook/addon-controls/manager" as
external to exclude it from the bundle, which will remove this
error and leave the unresolved path in the bundle.
✘ [ERROR] Could not resolve "@storybook/addon-actions/manager"
node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected][email protected]_unjzl3a5zay53n36pw25ml45ja/node_modules/@storybook/addon-essentials/dist/actions/manager.js:1:14:
1 │ export * from '@storybook/addon-actions/manager';
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
The Yarn Plug'n'Play manifest forbids importing
"@storybook/addon-actions" here because it's not listed as a
dependency of this package:
../../../../.pnp.cjs:36:31:
36 │ "packageDependencies": [\
╵ ~~
You can mark the path "@storybook/addon-actions/manager" as
external to exclude it from the bundle, which will remove this
error and leave the unresolved path in the bundle.
✘ [ERROR] Could not resolve "@storybook/global"
node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@storybook/core-server/dist/presets/common-manager.js:1:92:
1 │ ..._global=require("@storybook/global"),STATIC_FILTER...
╵ ~~~~~~~~~~~~~~~~~~~
The Yarn Plug'n'Play manifest forbids importing
"@storybook/global" here because it's not listed as a dependency
of this package:
../../../../.pnp.cjs:36:31:
36 │ "packageDependencies": [\
╵ ~~
You can mark the path "@storybook/global" as external to exclude
it from the bundle, which will remove this error and leave the
unresolved path in the bundle. You can also surround this
"require" call with a try/catch block to handle this failure at
run-time instead of bundle-time.
✘ [ERROR] Could not resolve "@storybook/instrumenter"
node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected][email protected]/node_modules/@storybook/addon-interactions/dist/manager.js:5:35:
5 │ ... CallStates, EVENTS } from '@storybook/instrumenter';
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~
The Yarn Plug'n'Play manifest forbids importing
"@storybook/instrumenter" here because it's not listed as a
dependency of this package:
../../../../.pnp.cjs:36:31:
36 │ "packageDependencies": [\
╵ ~~
You can mark the path "@storybook/instrumenter" as external to
exclude it from the bundle, which will remove this error and
leave the unresolved path in the bundle.
✘ [ERROR] Could not resolve "@storybook/global"
node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected][email protected]/node_modules/@storybook/addon-interactions/dist/manager.js:6:23:
6 │ import { global } from '@storybook/global';
╵ ~~~~~~~~~~~~~~~~~~~
The Yarn Plug'n'Play manifest forbids importing
"@storybook/global" here because it's not listed as a dependency
of this package:
../../../../.pnp.cjs:36:31:
36 │ "packageDependencies": [\
╵ ~~
You can mark the path "@storybook/global" as external to exclude
it from the bundle, which will remove this error and leave the
unresolved path in the bundle.
✘ [ERROR] Could not resolve "polished"
node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected][email protected]/node_modules/@storybook/addon-interactions/dist/manager.js:9:31:
9 │ import { transparentize } from 'polished';
╵ ~~~~~~~~~~
The Yarn Plug'n'Play manifest forbids importing "polished" here
because it's not listed as a dependency of this package:
../../../../.pnp.cjs:36:31:
36 │ "packageDependencies": [\
╵ ~~
You can mark the path "polished" as external to exclude it from
the bundle, which will remove this error and leave the
unresolved path in the bundle.
✘ [ERROR] Could not resolve "filesize"
node_modules/.pnpm/@[email protected][email protected]/node_modules/@chromatic-com/storybook/dist/manager.mjs:7:25:
7 │ import { filesize } from 'filesize';
╵ ~~~~~~~~~~
The Yarn Plug'n'Play manifest forbids importing "filesize" here
because it's not listed as a dependency of this package:
../../../../.pnp.cjs:36:31:
36 │ "packageDependencies": [\
╵ ~~
You can mark the path "filesize" as external to exclude it from
the bundle, which will remove this error and leave the
unresolved path in the bundle.
✘ [ERROR] Could not resolve "react-confetti"
node_modules/.pnpm/@[email protected][email protected]/node_modules/@chromatic-com/storybook/dist/manager.mjs:10:15:
10 │ import s8 from 'react-confetti';
╵ ~~~~~~~~~~~~~~~~
The Yarn Plug'n'Play manifest forbids importing "react-confetti"
here because it's not listed as a dependency of this package:
../../../../.pnp.cjs:36:31:
36 │ "packageDependencies": [\
╵ ~~
You can mark the path "react-confetti" as external to exclude it
from the bundle, which will remove this error and leave the
unresolved path in the bundle.
✘ [ERROR] Could not resolve "strip-ansi"
node_modules/.pnpm/@[email protected][email protected]/node_modules/@chromatic-com/storybook/dist/manager.mjs:11:15:
11 │ import b8 from 'strip-ansi';
╵ ~~~~~~~~~~~~
The Yarn Plug'n'Play manifest forbids importing "strip-ansi"
here because it's not listed as a dependency of this package:
../../../../.pnp.cjs:36:31:
36 │ "packageDependencies": [\
╵ ~~
You can mark the path "strip-ansi" as external to exclude it
from the bundle, which will remove this error and leave the
unresolved path in the bundle.
✘ [ERROR] Could not resolve "react-confetti"
node_modules/.pnpm/@[email protected][email protected]/node_modules/@storybook/addon-onboarding/dist/App-SU7ZWKZE.js:8:26:
8 │ import ReactConfetti from 'react-confetti';
╵ ~~~~~~~~~~~~~~~~
The Yarn Plug'n'Play manifest forbids importing "react-confetti"
here because it's not listed as a dependency of this package:
../../../../.pnp.cjs:36:31:
36 │ "packageDependencies": [\
╵ ~~
You can mark the path "react-confetti" as external to exclude it
from the bundle, which will remove this error and leave the
unresolved path in the bundle.
Error: Build failed with 15 errors:
node_modules/.pnpm/@[email protected][email protected]/node_modules/@chromatic-com/storybook/dist/manager.mjs:7:25: ERROR: Could not resolve "filesize"
node_modules/.pnpm/@[email protected][email protected]/node_modules/@chromatic-com/storybook/dist/manager.mjs:10:15: ERROR: Could not resolve "react-confetti"
node_modules/.pnpm/@[email protected][email protected]/node_modules/@chromatic-com/storybook/dist/manager.mjs:11:15: ERROR: Could not resolve "strip-ansi"
node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected][email protected]_unjzl3a5zay53n36pw25ml45ja/node_modules/@storybook/addon-essentials/dist/actions/manager.js:1:14: ERROR: Could not resolve "@storybook/addon-actions/manager"
node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected][email protected]_unjzl3a5zay53n36pw25ml45ja/node_modules/@storybook/addon-essentials/dist/backgrounds/manager.js:1:14: ERROR: Could not resolve "@storybook/addon-backgrounds/manager"
...
at failureErrorWithLog (./node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:1651:15)
at ./node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:1059:25
at runOnEndCallbacks (./node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:1486:45)
at buildResponseToResult (./node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:1057:7)
at ./node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:1086:16
at responseCallbacks.<computed> (./node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:704:9)
at handleIncomingPacket (./node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:764:9)
at Socket.readFromStdout (./node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:680:7)
at Socket.emit (node:events:519:28)
at addChunk (node:internal/streams/readable:559:12)
WARN Broken build, fix the error above.
WARN You may need to refresh the browser.
ELIFECYCLE Command failed with exit code 1.
Attempts to Fix:
I suspect the issue may be related to Storybook, but I'm not sure how to proceed further. Any guidance on resolving this would be greatly appreciated.
I have tried several approaches to resolve this issue, including:
I encountered the exact same problem, and I found the solution in storybook's github issues.
First, you should find the .pnp.js/.pnp.cjs file, it's usually in your user home directory, you can find it using this command find ~ -name ".pnp.*" if you're using a unix-based system.
Then delete it and everything will be fine.