[Bug]: storybook init (v7) fails with Yarn PnP

[Methuselah96]

Describe the bug

Running storybook init with Yarn PnP causes this error:

> npx storybook init

 storybook init - the simplest way to add a Storybook to your project. 

(node:38504) ExperimentalWarning: The Fetch API is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
 • Detecting project type. ✓
    Detected webpack project. Setting builder to webpack
 • Adding Storybook support to your "Create React App" based project➤ YN0000: ┌ Resolution step
➤ YN0002: │ @storybook/preset-create-react-app@npm:7.0.2 [1b0ac] doesn't provide react-refresh (paa6d3), requested by @pmmmwh/react-refresh-webpack-plugin
➤ YN0002: │ @storybook/preset-create-react-app@npm:7.0.2 [1b0ac] doesn't provide typescript (pe909d), requested by @storybook/react-docgen-typescript-plugin
➤ YN0002: │ @storybook/preset-create-react-app@npm:7.0.2 [1b0ac] doesn't provide webpack (p28ecc), requested by @pmmmwh/react-refresh-webpack-plugin
➤ YN0002: │ @storybook/preset-create-react-app@npm:7.0.2 [1b0ac] doesn't provide webpack (pd0ace), requested by @storybook/react-docgen-typescript-plugin
➤ YN0002: │ before-storybook@workspace:. doesn't provide @babel/core (p55c72), requested by @storybook/preset-create-react-app
➤ YN0002: │ before-storybook@workspace:. doesn't provide @testing-library/dom (p1ac37), requested by @testing-library/user-event
➤ YN0002: │ eslint-config-react-app@npm:7.0.1 [dfa48] doesn't provide @babel/plugin-syntax-flow (p2f44f), requested by eslint-plugin-flowtype
➤ YN0002: │ eslint-config-react-app@npm:7.0.1 [dfa48] doesn't provide @babel/plugin-transform-react-jsx (pd12b2), requested by eslint-plugin-flowtype
➤ YN0000: │ Some peer dependencies are incorrectly met; run yarn explain peer-requirements <hash> for details, where <hash> is the six-letter p-prefixed code
➤ YN0000: └ Completed in 11s 415ms
➤ YN0000: ┌ Fetch step
➤ YN0013: │ write-file-atomic@npm:2.4.3 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ write-file-atomic@npm:4.0.2 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ ws@npm:6.2.2 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ xtend@npm:4.0.2 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ yauzl@npm:2.10.0 can't be found in the cache and will be fetched from the remote registry
➤ YN0000: └ Completed in 2s 441ms
➤ YN0000: ┌ Link step
➤ YN0000: │ ESM support for PnP uses the experimental loader API and is therefore experimental
➤ YN0007: │ esbuild@npm:0.17.15 must be built because it never has been before or the last one failed
➤ YN0000: └ Completed in 1s 878ms
➤ YN0000: Done with warnings in 16s 244ms
. ✓
 • Preparing to install dependencies. ✓


 • Installing dependencies➤ YN0000: ┌ Resolution step
➤ YN0002: │ @storybook/preset-create-react-app@npm:7.0.2 [1b0ac] doesn't provide react-refresh (paa6d3), requested by @pmmmwh/react-refresh-webpack-plugin
➤ YN0002: │ @storybook/preset-create-react-app@npm:7.0.2 [1b0ac] doesn't provide typescript (pe909d), requested by @storybook/react-docgen-typescript-plugin
➤ YN0002: │ @storybook/preset-create-react-app@npm:7.0.2 [1b0ac] doesn't provide webpack (p28ecc), requested by @pmmmwh/react-refresh-webpack-plugin
➤ YN0002: │ @storybook/preset-create-react-app@npm:7.0.2 [1b0ac] doesn't provide webpack (pd0ace), requested by @storybook/react-docgen-typescript-plugin
➤ YN0002: │ before-storybook@workspace:. doesn't provide @babel/core (p55c72), requested by @storybook/preset-create-react-app
➤ YN0002: │ before-storybook@workspace:. doesn't provide @testing-library/dom (p1ac37), requested by @testing-library/user-event
➤ YN0002: │ eslint-config-react-app@npm:7.0.1 [dfa48] doesn't provide @babel/plugin-syntax-flow (p2f44f), requested by eslint-plugin-flowtype
➤ YN0002: │ eslint-config-react-app@npm:7.0.1 [dfa48] doesn't provide @babel/plugin-transform-react-jsx (pd12b2), requested by eslint-plugin-flowtype
➤ YN0000: │ Some peer dependencies are incorrectly met; run yarn explain peer-requirements <hash> for details, where <hash> is the six-letter p-prefixed code
➤ YN0000: └ Completed in 0s 421ms
➤ YN0000: ┌ Fetch step
➤ YN0000: └ Completed in 0s 761ms
➤ YN0000: ┌ Link step
➤ YN0000: │ ESM support for PnP uses the experimental loader API and is therefore experimental
➤ YN0000: └ Completed in 0s 390ms
➤ YN0000: Done with warnings in 2s 3ms
. ✓
🔎 checking possible migrations..

attention => Storybook now collects completely anonymous telemetry regarding usage.
This information is used to shape Storybook's roadmap and prioritize features.
You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
https://storybook.js.org/telemetry

[Storybook automigrate] ❌ Failed trying to evaluate .storybook\main.js with the following error: Cannot find module '@storybook\addon-links\package.json'
Require stack:
- C:\Users\nbier\Documents\test-storybook-init-yarn-pnp\.storybook\main.js
- C:\Users\nbier\AppData\Local\npm-cache\_npx\6fe9a9991b157df1\node_modules\@storybook\core-common\dist\index.js
- C:\Users\nbier\AppData\Local\npm-cache\_npx\6fe9a9991b157df1\node_modules\@storybook\telemetry\dist\index.js
- C:\Users\nbier\AppData\Local\npm-cache\_npx\6fe9a9991b157df1\node_modules\@storybook\cli\dist\generate.js
- C:\Users\nbier\AppData\Local\npm-cache\_npx\6fe9a9991b157df1\node_modules\@storybook\cli\bin\index.js
Please fix the error and try again.
> 

To Reproduce

1. Clone https://github.com/Methuselah96/test-storybook-init-yarn-pnp.
2. Run npx storybook init.

System

Environment Info:

  System:
    OS: Windows 10 10.0.22621
    CPU: (8) x64 Intel(R) Core(TM) i7-8550U CPU @ 1.80GHz
  Binaries:
    Node: 18.12.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - C:\Program Files\nodejs\yarn.CMD
    npm: 8.19.2 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.22621.1413.0), Chromium (111.0.1661.62)

Additional context

No response

[shilman]

I could not reproduce this on a mac. It looks like a windows bug which is trying to resolve '@storybook\addon-links\package.json' somehow?

[IanVS]

@Methuselah96 did you try running npx sb init --use-pnp?

[Methuselah96]

@IanVS Just tried it with the same end result.

[jackw]

I had the same issue with npx storybook@next upgrade in a yarn pnp project on a mac. I'm pretty sure npx/npm doesn't understand how to resolve the .yarn/cache zipped dependencies.

Running yarn dlx storybook@next upgrade got me through the migration.

Maybe try yarn dlx sb init @Methuselah96 ?

[Methuselah96]

Thanks, yarn dlx sb init works. So I guess maybe the docs just need a note for users of Yarn PnP to use yarn dlx instead of npx?

[jackw]

Yeah it's a bit odd. The migration guide only has tabs for npm and pnpm. I've opened a PR to introduce the yarn pnp commands. Also noticed the init commands don't appear in the docs currently. 🤔