[Bug]: create Nextjs sandbox failed. #30302

zhyd1997 · 2025-01-18T09:00:49Z

Describe the bug

⚙️ Initializing Storybook
> node /Users/zhyd1997/workspace/storybook/code/lib/create-storybook/bin/index.cjs init --yes --debug
╭──────────────────────────────────────────────────────────────╮
│                                                              │
│   Adding Storybook version 8.6.0-alpha.0 to your project..   │
│   This is a pre-release version.                             │
│                                                              │
╰──────────────────────────────────────────────────────────────╯
 • Detecting project type. ✓
Installing dependencies...

➤ YN0000: · Yarn 4.6.0
➤ YN0000: ┌ Resolution step
➤ YN0000: └ Completed
➤ YN0000: ┌ Fetch step
➤ YN0000: └ Completed
➤ YN0000: ┌ Link step
➤ YN0000: └ Completed
➤ YN0000: · Done in 0s 269ms
 • Adding Storybook support to your "Next" app
  ✔ Getting the correct version of 9 packages
    Configuring eslint-plugin-storybook in your package.json
  ⠧ Installing Storybook dependencies
An error occurred while installing dependencies:
YARN2 error
YN0060: INCOMPATIBLE_PEER_DEPENDENCY
-> @storybook/test is listed by your project with version 8.6.0-alpha.0 (p8d038), which doesn't satisfy what @storybook/react requests (but they have non-overlapping ranges!).

YN0060: INCOMPATIBLE_PEER_DEPENDENCY
-> storybook is listed by your project with version 8.6.0-alpha.0 (p23005), which doesn't satisfy what @storybook/addon-essentials and other dependencies request (but they have non-overlapping ranges!).

YN0002: MISSING_PEER_DEPENDENCY
-> before-storybook@workspace:. doesn't provide webpack (pd8fe4), requested by @storybook/nextjs.

YN0086: EXPLAIN_PEER_DEPENDENCIES_CTA
-> Some peer dependencies are incorrectly met by your project; run yarn explain peer-requirements <hash> for details, where <hash> is the six-letter p-prefixed code.

YN0086: EXPLAIN_PEER_DEPENDENCIES_CTA
-> Some peer dependencies are incorrectly met by dependencies; run yarn explain peer-requirements for details.

YN0001: EXCEPTION
-> Error: Assertion failed: Writing attempt prevented to /Users/zhyd1997/workspace/storybook/code/addons/essentials/node_modules/@storybook/addon-docs which is outside project root: /Users/zhyd1997/workspace/storybook/sandbox/nextjs-default-ts


Please check the logfile generated at ./storybook.log for troubleshooting and try again.

     Error: Error: YARN2 error
YN0060: INCOMPATIBLE_PEER_DEPENDENCY
-> @storybook/test is listed by your project with version 8.6.0-alpha.0 (p8d038), which doesn't satisfy what @storybook/react requests (but they have non-overlapping ranges!).

YN0060: INCOMPATIBLE_PEER_DEPENDENCY
-> storybook is listed by your project with version 8.6.0-alpha.0 (p23005), which doesn't satisfy what @storybook/addon-essentials and other dependencies request (but they have non-overlapping ranges!).

YN0002: MISSING_PEER_DEPENDENCY
-> before-storybook@workspace:. doesn't provide webpack (pd8fe4), requested by @storybook/nextjs.

YN0086: EXPLAIN_PEER_DEPENDENCIES_CTA
-> Some peer dependencies are incorrectly met by your project; run yarn explain peer-requirements <hash> for details, where <hash> is the six-letter p-prefixed code.

YN0086: EXPLAIN_PEER_DEPENDENCIES_CTA
-> Some peer dependencies are incorrectly met by dependencies; run yarn explain peer-requirements for details.

YN0001: EXCEPTION
-> Error: Assertion failed: Writing attempt prevented to /Users/zhyd1997/workspace/storybook/code/addons/essentials/node_modules/@storybook/addon-docs which is outside project root: /Users/zhyd1997/workspace/storybook/sandbox/nextjs-default-ts


Please check the logfile generated at ./storybook.log for troubleshooting and try again.
    at Yarn2Proxy.addDependencies (/Users/zhyd1997/workspace/storybook/code/core/dist/common/index.cjs:25592:15)
    at async baseGenerator (/Users/zhyd1997/workspace/storybook/code/lib/create-storybook/dist/bin/index.cjs:2166:5)
    at async generator4 (/Users/zhyd1997/workspace/storybook/code/lib/create-storybook/dist/bin/index.cjs:2350:3)
    at async installStorybook (/Users/zhyd1997/workspace/storybook/code/lib/create-storybook/dist/bin/index.cjs:2966:12)
    at async doInitiate (/Users/zhyd1997/workspace/storybook/code/lib/create-storybook/dist/bin/index.cjs:3081:25)
    at async withTelemetry (/Users/zhyd1997/workspace/storybook/code/core/dist/core-server/index.cjs:51862:12)
    at async initiate (/Users/zhyd1997/workspace/storybook/code/lib/create-storybook/dist/bin/index.cjs:3146:26)
An error occurred while executing: `node /Users/zhyd1997/workspace/storybook/code/lib/create-storybook/bin/index.cjs init --yes --debug`
🚨 Initializing Storybook failed

Error running task sandbox for nextjs/default-ts:
{
  "shortMessage": "Command failed with exit code 1: node /Users/zhyd1997/workspace/storybook/code/lib/create-storybook/bin/index.cjs init --yes --debug",
  "command": "node /Users/zhyd1997/workspace/storybook/code/lib/create-storybook/bin/index.cjs init --yes --debug",
  "escapedCommand": "\"node /Users/zhyd1997/workspace/storybook/code/lib/create-storybook/bin/index.cjs init --yes --debug\"",
  "exitCode": 1,
  "failed": true,
  "timedOut": false,
  "isCanceled": false,
  "killed": false
}

Error: Command failed with exit code 1: node /Users/zhyd1997/workspace/storybook/code/lib/create-storybook/bin/index.cjs init --yes --debug
    at makeError (/Users/zhyd1997/workspace/storybook/scripts/node_modules/execa/lib/error.js:59:13)
    at handlePromise (/Users/zhyd1997/workspace/storybook/scripts/node_modules/execa/index.js:119:50)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async exec (/Users/zhyd1997/workspace/storybook/scripts/utils/exec.ts:43:7)
    at async executeCLIStep (/Users/zhyd1997/workspace/storybook/scripts/utils/cli-step.ts:105:3)
    at async init (/Users/zhyd1997/workspace/storybook/scripts/tasks/sandbox-parts.ts:145:3)
    at async Object.run (/Users/zhyd1997/workspace/storybook/scripts/tasks/sandbox.ts:111:5)
    at async runTask (/Users/zhyd1997/workspace/storybook/scripts/task.ts:319:24)
    at async run (/Users/zhyd1997/workspace/storybook/scripts/task.ts:489:28) {
  shortMessage: 'Command failed with exit code 1: node /Users/zhyd1997/workspace/storybook/code/lib/create-storybook/bin/index.cjs init --yes --debug',
  command: 'node /Users/zhyd1997/workspace/storybook/code/lib/create-storybook/bin/index.cjs init --yes --debug',
  escapedCommand: '"node /Users/zhyd1997/workspace/storybook/code/lib/create-storybook/bin/index.cjs init --yes --debug"',
  exitCode: 1,
  signal: undefined,
  signalDescription: undefined,
  stdout: undefined,
  stderr: undefined,
  failed: true,
  timedOut: false,
  isCanceled: false,
  killed: false
}
➜  storybook git:(next) ✗

Reproduction link

NA

Reproduction steps

yarn task
select to generate nextjs-default-ts sandbox from template.
see the errors above.

System

Storybook Environment Info:

  System:
    OS: macOS 15.1.1
    CPU: (14) arm64 Apple M3 Max
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.16.0 - ~/.nvm/versions/node/v18.16.0/bin/node
    Yarn: 4.3.0 - ~/.nvm/versions/node/v18.16.0/bin/yarn <----- active
    npm: 9.5.1 - ~/.nvm/versions/node/v18.16.0/bin/npm
  Browsers:
    Chrome: 131.0.6778.266
    Safari: 18.1.1

Additional context

➜  storybook git:(next) ✗ yarn task                
Installing Script Dependencies...
✔ Which task would you like to run? › Create the sandbox from a template (sandbox)
✔ What template would you like to make a sandbox for? › nextjs/default-ts

To run this directly next time, use:
  yarn task --task sandbox --template nextjs/default-ts

👉 Selected sandbox: nextjs/default-ts

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

✔ We need to run all tasks from sandbox onwards, would you like to start from an earlier task? › Create the sandbox from a template (sandbox)
🟢 install > 🟢 compile > 🔄 sandbox


👷 Bootstrapping Template
> node /Users/zhyd1997/workspace/storybook/code/lib/cli-storybook/bin/index.cjs repro nextjs/default-ts --output /Users/zhyd1997/workspace/storybook/sandbox/nextjs-default-ts --no-init --debug
╭──────────────────────────────────────────────────╮
│                                                  │
│   Creating a Storybook 8.6.0-alpha.0 sandbox..   │
│   This is a pre-release version.                 │
│                                                  │
╰──────────────────────────────────────────────────╯
⚠️  /Users/zhyd1997/workspace/storybook/sandbox/nextjs-default-ts already exists! Overwriting...
🏃 Adding Next.js Latest (Webpack |

storybook.log

The text was updated successfully, but these errors were encountered:

greptile-apps · 2025-01-18T09:01:38Z

** Disclaimer** This information might be inaccurate, due to it being generated automatically
This is a Yarn 2+ peer dependency resolution issue when installing Storybook in a Next.js project. To fix:

Add webpack as a peer dependency in the Next.js project:

{
  "peerDependencies": {
    "webpack": "^5.0.0"
  }
}

Update the version constraints in code/lib/create-storybook/package.json to ensure compatible versions between @storybook/test, @storybook/react, and @storybook/addon-essentials
Fix the project root path issue in code/core/src/Yarn2Proxy.ts by ensuring the writing path is within the sandbox directory

About Greptile

This response provides a starting point for your research, not a precise solution.

Help us improve! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

Edit Issue Bot Settings · Greptile

shilman · 2025-01-18T11:48:26Z

We should fix as part of #30291.

boylec · 2025-01-23T19:12:17Z

@shilman

#30291 has been marked as completed but the fix (#30304) doesn't seem to have covered this issue.

Perhaps this one should be reopened?

greptile-apps · 2025-01-24T03:30:49Z

** Disclaimer** This information might be inaccurate, due to it being generated automatically
This is a Yarn 2+ peer dependency resolution issue when installing Storybook in a Next.js project. To fix: 1. Add webpack as a peer dependency in package.json: json { "peerDependencies": { "webpack": "^5.0.0" } } 2. Add resolutions in package.json to align versions: json { "resolutions": { "@storybook/test": "8.6.0-alpha.0", "storybook": "8.6.0-alpha.0" } } 3. Update the project root path in .yarnrc.yml to include the essentials addon directory: yaml nodeLinker: pnp pnpMode: strict projectRoot: "/Users/zhyd1997/workspace/storybook"

About Greptile

This response provides a starting point for your research, not a precise solution.

Help us improve! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

Edit Issue Bot Settings · Greptile

zhyd1997 · 2025-01-24T12:58:28Z

Hi @boylec @shilman

Apologize but I have tried many times, it's not easy to find the root cause until I just run yarn add -D @storybook/[email protected]:

Have submitted a pull request!

zhyd1997 added bug needs triage labels Jan 18, 2025

shilman mentioned this issue Jan 18, 2025

[Bug]: Initial Next.JS template failed #30291

Open

shilman closed this as completed Jan 18, 2025

shilman reopened this Jan 24, 2025

shilman added good first issue help wanted cli nextjs and removed needs triage labels Jan 24, 2025

zhyd1997 linked a pull request Jan 24, 2025 that will close this issue

fix: added additional react resolutions for next 15 or above sandboxes. #30372

Open

8 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Bug]: create Nextjs sandbox failed. #30302

[Bug]: create Nextjs sandbox failed. #30302

zhyd1997 commented Jan 18, 2025 •

edited

Loading

greptile-apps bot commented Jan 18, 2025

About Greptile

shilman commented Jan 18, 2025

boylec commented Jan 23, 2025 •

edited

Loading

greptile-apps bot commented Jan 24, 2025

About Greptile

zhyd1997 commented Jan 24, 2025

[Bug]: create Nextjs sandbox failed. #30302

[Bug]: create Nextjs sandbox failed. #30302

Comments

zhyd1997 commented Jan 18, 2025 • edited Loading

Describe the bug

Reproduction link

Reproduction steps

System

Additional context

greptile-apps bot commented Jan 18, 2025

About Greptile

shilman commented Jan 18, 2025

boylec commented Jan 23, 2025 • edited Loading

greptile-apps bot commented Jan 24, 2025

About Greptile

zhyd1997 commented Jan 24, 2025

zhyd1997 commented Jan 18, 2025 •

edited

Loading

boylec commented Jan 23, 2025 •

edited

Loading