在我的 Next.js 项目中尝试将 Storybook 8 与 PNPM 结合使用时，我遇到错误，表明无法解析各种 Storybook 依赖项。尽管尝试了多次故障排除，包括清除缓存、重新安装依赖项以及尝试不同版本的 Storybook 和 PNPM，但此问题仍然存在。
环境： 节点：v20.15.0 PNPM：8.15.6 国家公共管理：10.7.0 Next.js：v14.2.4 操作系统：MacOS 13.2.1
package.json 中与 Storybook 相关的开发依赖项：
{
"@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"
}
预期行为： 故事书应该可以正常启动。
实际行为： 我在尝试运行 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.
尝试修复：
我怀疑这个问题可能与 Storybook 有关，但我不知道如何进一步处理。任何有关解决此问题的指导将不胜感激。
我尝试了多种方法来解决这个问题，包括：
我遇到了完全相同的问题，我在storybook github issues中找到了解决方案。
首先，您应该找到
.pnp.js/.pnp.cjsfind ~ -name ".pnp.*"然后删除它，一切都会好起来的。