При попытке использовать Storybook 8 с PNPM в моем проекте Next.js я сталкиваюсь с ошибками, указывающими на невозможность разрешения различных зависимостей Storybook. Эта проблема сохраняется, несмотря на многочисленные попытки устранения неполадок, включая очистку кешей, переустановку зависимостей и использование различных версий Storybook и PNPM.
Среда: Узел: v20.15.0 ПНПМ: 8.15.6 НПМ: 10.7.0 Next.js: v14.2.4 ОС: MacOS 13.2.1.
Зависимости разработчиков, связанные с Storybook в 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"
}
Ожидаемое поведение: Сборник рассказов должен запуститься без ошибок.
Фактическое поведение: При попытке запустить 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, но я не знаю, как действовать дальше. Любые рекомендации по решению этой проблемы будут очень признательны.
Я попробовал несколько подходов к решению этой проблемы, в том числе:
🤔 А знаете ли вы, что...
Node.js обладает большой активной сообществом разработчиков и поддерживается множеством компаний.
Я столкнулся с точно такой же проблемой и нашел решение в сборнике рассказов на github.
Во-первых, вы должны найти файл .pnp.js/.pnp.cjs, обычно он находится в домашнем каталоге вашего пользователя. Вы можете запустить эту строку cmd find ~ -name ".pnp.*" в терминале, чтобы найти файл, если вы используете Mac.
Потом удалите его и все будет хорошо.