[Bug]: cannot start or build storybook development environment

[binomialstew]

Describe the bug

I cannot start or even build storybook development environment following the contributing guidelines. yarn start throws a large log of errors (link below) mostly related to missing packages. I'm using the version of node in the .nvmrc (v22.6.0). This is on a fresh clone of the next branch, but I have tried and seen similar errors by checking out many of the later versions (v8.5.0), (v8.4.0) by tag or main branch.

❯ yarn start
Installing Script Dependencies...
👉 Selected sandbox: react-vite/default-ts

Task readiness up to dev
🟢 install > 🟡 compile > 🟡 sandbox > 🔇 dev

🔄 install > 🟡 compile > 🟡 sandbox > 🔇 dev

✅ install > 🔄 compile > 🟡 sandbox > 🔇 dev

🥾 Bootstrapping
> nx run-many -t build --parallel=11
An error occurred while executing: `nx run-many -t build --parallel=11`
❌ Failed to bootstrap

> nx run core:build

Bundling...
✘ [ERROR] Could not resolve "react"

    src/manager/globals/runtime.ts:1:23:
      1 │ import * as REACT from 'react';
        ╵                        ~~~~~~~

  The Yarn Plug'n'Play manifest forbids importing "react" here because it's not listed as a dependency of this package:

    ../../../.pnp.cjs:37:31:
      37 │         "packageDependencies": [\
         ╵                                ~~

  You can mark the path "react" 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-dom"

    src/manager/globals/runtime.ts:2:27:
      2 │ import * as REACT_DOM from 'react-dom';
        ╵                            ~~~~~~~~~~~

  The Yarn Plug'n'Play manifest forbids importing "react-dom" here because it's not listed as a dependency of this package:

    ../../../.pnp.cjs:37:31:
      37 │         "packageDependencies": [\
         ╵                                ~~

and so on with similar errors due to missing dependencies

Then:

Error: Build failed with 144 errors:
src/channels/index.ts:2:23: ERROR: Could not resolve "@storybook/global"
src/channels/postmessage/index.ts:2:23: ERROR: Could not resolve "@storybook/global"
src/channels/postmessage/index.ts:7:41: ERROR: Could not resolve "telejson"
src/channels/postmessage/index.ts:8:22: ERROR: Could not resolve "tiny-invariant"
src/channels/websocket/index.ts:2:23: ERROR: Could not resolve "@storybook/global"

Then:

shortMessage: 'Command failed with exit code 1: nx run-many -t build --parallel=11',
  command: 'nx run-many -t build --parallel=11',
  escapedCommand: '"nx run-many -t build --parallel=11"',
  exitCode: 1,
  signal: undefined,
  signalDescription: undefined,
  stdout: '\n' +
    ' NX   Running target build for 65 projects:\n' +
    '\n' +
    '- experimental-nextjs-vite\n' +
    '- web-components-webpack5\n' +
    '- web-components-vite\n' +
    '- preact-webpack5\n' +
    '- server-webpack5\n' +
    '- svelte-webpack5\n' +
    '- builder-webpack5\n' +
    '- react-webpack5\n' +
    '- create-react-app\n' +
    '- html-webpack5\n' +
    '- vue3-webpack5\n' +
    '- web-components\n' +
    '- preact-vite\n' +
    '- preact-webpack\n' +
    '- server-webpack\n' +
    '- svelte-vite\n' +
    '- svelte-webpack\n' +
    '- builder-vite\n' +
    '- react-vite\n' +
    '- react-webpack\n' +
    '- create-storybook\n' +
    '- html-vite\n' +
    '- html-webpack\n' +
    '- sveltekit\n' +
    '- vue3-vite\n' +
    '- vue3-webpack\n' +
    '- addon-interactions\n' +
    '- addon-backgrounds\n' +
    '- addon-storysource\n' +
    '- angular\n' +
    '- react-dom-shim\n' +
    '- addon-essentials\n' +
    '- addon-onboarding\n' +
    '- cli\n' +
    '- nextjs\n' +
    '- source-loader\n' +
    '- addon-highlight\n' +
    '- core-webpack\n' +
    '- ember\n' +
    '- instrumenter\n' +
    '- preact\n' +
    '- server\n' +
    '- svelte\n' +
    '- addon-controls\n' +
    '- addon-toolbars\n' +
    '- addon-viewport\n' +
    '- react\n' +
    '- addon-actions\n' +
    '- addon-measure\n' +
    '- addon-outline\n' +
    '- csf-plugin\n' +
    '- html\n' +
    '- vue3\n' +
    '- addon-themes\n' +
    '- addon-links\n' +
    '- addon-a11y\n' +
    '- addon-docs\n' +
    '- addon-jest\n' +
    '- codemod\n' +
    '- experimental-addon-test\n' +
    '- addon-gfm\n' +
    '- blocks\n' +
    '- test\n' +
    '- storybook\n' +
    '- core\n' +
    '\n' +
    '\n' +
    '\n' +
    '> nx run core:build\n' +
    '\n' +
    'Bundling...\n' +
    '✘ [ERROR] Could not resolve "react"\n' +
    '\n' +
    '    src/manager/globals/runtime.ts:1:23:\n' +
    "      1 │ import * as REACT from 'react';\n" +
    '        ╵                        ~~~~~~~\n' +
    '\n' +
    `  The Yarn Plug'n'Play manifest forbids importing "react" here because it's not listed as a dependency of this package:\n` +
    '\n' +
    '    ../../../.pnp.cjs:37:31:\n' +
    '      37 │         "packageDependencies": [\\\n' +
    '         ╵                                ~~\n' +
    '\n' +
    '  You can mark the path "react" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle.\n' +
    '\n' +
    '✘ [ERROR] Could not resolve "react-dom"\n' +
    '\n' +
    '    src/manager/globals/runtime.ts:2:27:\n' +
    "      2 │ import * as REACT_DOM from 'react-dom';\n" +
    '        ╵                            ~~~~~~~~~~~\n' +
    '\n' +
    `  The Yarn Plug'n'Play manifest forbids importing "react-dom" here because it's not listed as a dependency of this package:\n` +
    '\n' +
    '    ../../../.pnp.cjs:37:31:\n' +
    '      37 │         "packageDependencies": [\\\n' +
    '         ╵                                ~~\n' +
    '\n' +
    '  You can mark the path "react-dom" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle.\n' +

Reproduction link

https://nx.app/runs/AMn7obhFIx

Reproduction steps

1. Clone storybook locally
2. cd to directory
3. Run fnm use
4. Run yarn start

System

Storybook Environment Info:

System: OS: macOS 14.7.1 CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz Shell: 5.9 - /bin/zsh Binaries: Node: 22.6.0 - ~/.local/state/fnm_multishells/12442_1730489635105/bin/node Yarn: 4.3.0 - ~/.local/state/fnm_multishells/12442_1730489635105/bin/yarn <----- active npm: 10.8.2 - ~/.local/state/fnm_multishells/12442_1730489635105/bin/npm Browsers: Chrome: 130.0.6723.92 Safari: 17.6

Additional context

I've run storybook and even contributed in the past, but I haven't tried to run this locally for a few years now

[binomialstew]

I suggest a build label

[mukulpadwal]

@binomialstew, I encountered a similar problem when trying to run the command yarn start. It seems to be related to insufficient RAM. I recommend closing any unnecessary applications and then running the command in the terminal again. That worked for me, but I could be mistaken.

[binomialstew]

@binomialstew, I encountered a similar problem when trying to run the command yarn start. It seems to be related to insufficient RAM. I recommend closing any unnecessary applications and then running the command in the terminal again. That worked for me, but I could be mistaken.

Thanks for the info, @mukulpadwal . It doesn't seem to be the issue here, unfortunately. I just restarted my machine (MacBook Pro with 32GB of RAM) to ensure there is sufficient memory available, but I see the same error with yarn start.

[binomialstew]

Closing this because these errors were caused by a stray .pnp.cjs in the directory above the storybook project. I'm not familiar enough with pnp to tell if there is a good way to prevent this happening for others.