Ошибка: не удалось разрешить различные зависимости Storybook с помощью Storybook 8 и PNPM

При попытке использовать 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.

Попытки исправить:

  • Создал новый проект с помощью React и PNPM и использовал Storybook, но столкнулся с той же ошибкой.
  • Переустановил Node и NPM, удалил Yarn и переустановил PNPM и Corepack.

Я подозреваю, что проблема может быть связана с Storybook, но я не знаю, как действовать дальше. Любые рекомендации по решению этой проблемы будут очень признательны.

Я попробовал несколько подходов к решению этой проблемы, в том числе:

  • Очистка кэша PNPM.
  • Переустановка зависимостей.
  • Пробую разные версии PNPM.
  • Обеспечение явного указания всех необходимых зависимостей в package.json.
  • Переустановка Node.js, Corepack, NPM и удаление Yarn.
  • Создание нового проекта Next.js на моем компьютере с помощью PNPM и Storybook. Получил ту же проблему.
Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
0
0
179
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я столкнулся с точно такой же проблемой и нашел решение в сборнике рассказов на github.

Во-первых, вы должны найти файл .pnp.js/.pnp.cjs, обычно он находится в домашнем каталоге вашего пользователя. Вы можете запустить эту строку cmd find ~ -name ".pnp.*" в терминале, чтобы найти файл, если вы используете Mac.

Потом удалите его и все будет хорошо.

Оно работало завораживающе. Спасибо, я ценю это!

YASSINE CHETTOUCH 03.07.2024 19:56

Другие вопросы по теме

Развертывание приложения Teams Toolkit через CI/CD завершается с ошибкой «Эта команда работает только для проекта, созданного с помощью Teams Toolkit»
React Native w/Expo: странная ошибка при использовании run:android
Сборка npm run не удалась из-за несовместимости машинописного текста или lodash
Start-Process (pnpm run build) Эту команду невозможно запустить из-за ошибки: %1 не является допустимым приложением Win32
Установите пакет TypeScript из подпапки репозитория GitHub
Я получаю необработанный отказ от обещания, для которого мне нужен правильный синтаксис в nodejs
Приложение Vite React не открывает браузер по умолчанию с терминала
Использование NPM для создания приложения React: СЕРЬЕЗНОЕ ИЗМЕНЕНИЕ: webpack <5 используется для включения полифилов для основных модулей node.js по умолчанию. Это уже не так
Npm не может разрешить дерево зависимостей до удаления node_modules
Как решить проблему с прокси-сервером узловых модулей?