Error: Could not resolve various Storybook dependencies with Storybook 8 and PNPM

[eldevyas]

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

> ProjectX@1.0.0 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/@storybook+addon-essentials@8.1.11_@types+react-dom@18.3.0_@types+react@18.3.3_prettier@3.3.2_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/@storybook+addon-essentials@8.1.11_@types+react-dom@18.3.0_@types+react@18.3.3_prettier@3.3.2_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/@storybook+addon-essentials@8.1.11_@types+react-dom@18.3.0_@types+react@18.3.3_prettier@3.3.2_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/@storybook+addon-essentials@8.1.11_@types+react-dom@18.3.0_@types+react@18.3.3_prettier@3.3.2_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/@storybook+addon-essentials@8.1.11_@types+react-dom@18.3.0_@types+react@18.3.3_prettier@3.3.2_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/@storybook+addon-essentials@8.1.11_@types+react-dom@18.3.0_@types+react@18.3.3_prettier@3.3.2_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/@storybook+addon-essentials@8.1.11_@types+react-dom@18.3.0_@types+react@18.3.3_prettier@3.3.2_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/@storybook+core-server@8.1.11_prettier@3.3.2_react-dom@18.3.1_react@18.3.1/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/@storybook+addon-interactions@8.1.11_@jest+globals@29.7.0_@types+jest@29.5.12_jest@29.7.0/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/@storybook+addon-interactions@8.1.11_@jest+globals@29.7.0_@types+jest@29.5.12_jest@29.7.0/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/@storybook+addon-interactions@8.1.11_@jest+globals@29.7.0_@types+jest@29.5.12_jest@29.7.0/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/@chromatic-com+storybook@1.6.0_react@18.3.1/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/@chromatic-com+storybook@1.6.0_react@18.3.1/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/@chromatic-com+storybook@1.6.0_react@18.3.1/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/@storybook+addon-onboarding@8.1.11_react@18.3.1/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/@chromatic-com+storybook@1.6.0_react@18.3.1/node_modules/@chromatic-com/storybook/dist/manager.mjs:7:25: ERROR: Could not resolve "filesize"
node_modules/.pnpm/@chromatic-com+storybook@1.6.0_react@18.3.1/node_modules/@chromatic-com/storybook/dist/manager.mjs:10:15: ERROR: Could not resolve "react-confetti"
node_modules/.pnpm/@chromatic-com+storybook@1.6.0_react@18.3.1/node_modules/@chromatic-com/storybook/dist/manager.mjs:11:15: ERROR: Could not resolve "strip-ansi"
node_modules/.pnpm/@storybook+addon-essentials@8.1.11_@types+react-dom@18.3.0_@types+react@18.3.3_prettier@3.3.2_unjzl3a5zay53n36pw25ml45ja/node_modules/@storybook/addon-essentials/dist/actions/manager.js:1:14: ERROR: Could not resolve "@storybook/addon-actions/manager"
node_modules/.pnpm/@storybook+addon-essentials@8.1.11_@types+react-dom@18.3.0_@types+react@18.3.3_prettier@3.3.2_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/esbuild@0.20.2/node_modules/esbuild/lib/main.js:1651:15)
    at ./node_modules/.pnpm/esbuild@0.20.2/node_modules/esbuild/lib/main.js:1059:25
    at runOnEndCallbacks (./node_modules/.pnpm/esbuild@0.20.2/node_modules/esbuild/lib/main.js:1486:45)
    at buildResponseToResult (./node_modules/.pnpm/esbuild@0.20.2/node_modules/esbuild/lib/main.js:1057:7)
    at ./node_modules/.pnpm/esbuild@0.20.2/node_modules/esbuild/lib/main.js:1086:16
    at responseCallbacks.<computed> (./node_modules/.pnpm/esbuild@0.20.2/node_modules/esbuild/lib/main.js:704:9)
    at handleIncomingPacket (./node_modules/.pnpm/esbuild@0.20.2/node_modules/esbuild/lib/main.js:764:9)
    at Socket.readFromStdout (./node_modules/.pnpm/esbuild@0.20.2/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:

• Created a new project with React and PNPM and used Storybook but encountered the same error.
• Reinstalled Node, and NPM, removed Yarn, and re-installed PNPM and Corepack.

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.

Additional information

Additional Context:

I have tried several approaches to resolve this issue, including:

• Clearing PNPM cache.
• Reinstalling dependencies.
• Trying different versions of PNPM.
• Ensuring all required dependencies are explicitly listed in package.json.
• Reinstalling Node.js, Corepack, NPM, and removing Yarn.

Create a reproduction

No response

[arunpt]

@eldevyas I'm also having the same issue, did you find any fix?

[arunpt]

Update: I was able to resolve it by deleting .pnp.js or .pnp.cjs from my user home directory

[orlein]

That helps me too. Thanks a lot

[toothlessdev]

thanks a lot!

sudo find ~ -name ".pnp.*" -type f -exec rm -f {} +

it helps me a lot

[boylec]

The problem is that storybook detects you're on Yarn PNP by simply searching for any .pnp.cjs file in your file tree