Fresh CRA fails in npm8 on beta.44

[shilman]

When running npx sb@next init in a brand-new CRA app created with the sandbox script (npx create-react-app . --template typescript), using npm 8.12.1, I get an error and installation does not complete.

Adding Storybook support to your "Create React App" based project(⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂) ⠼ reify: timing arbo
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: 7.0.0-beta.44@0.1.0
npm ERR! Found: @storybook/react@7.0.0-beta.44
npm ERR! node_modules/@storybook/react
npm ERR!   dev @storybook/react@"^7.0.0-beta.44" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @storybook/react@">=5.2" from @storybook/preset-create-react-app@4.1.2
npm ERR! node_modules/@storybook/preset-create-react-app
npm ERR!   dev @storybook/preset-create-react-app@"^4.1.2" from the root project

Adding legacy-peer-deps = true to a .npmrc works around the issue.

https://discord.com/channels/486522875931656193/1072720859564883978/1072720859564883978

[tim-hoffmann]

Using legacy-peer-deps caused issues in my project so I override the dependency in my package.json:

"overrides": {
    "@storybook/react": "7.0.0-beta.44"
 }

[ndelangen]

@shilman this issue is NOT resolved yet:

(main) [130] % npx sb@next init                                                                                                                                                                     ~/Projects/Storybook/repro/cra-npm8
Need to install the following packages:
  sb@7.0.0-beta.48
Ok to proceed? (y) y

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

 • Detecting project type. ✓
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: cra-npm8@0.1.0
npm ERR! Found: @storybook/react@7.0.0-beta.48
npm ERR! node_modules/@storybook/react
npm ERR!   dev @storybook/react@"^7.0.0-beta.48" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer @storybook/react@">=5.2" from @storybook/preset-create-react-app@4.1.2
npm ERR! node_modules/@storybook/preset-create-react-app
npm ERR!   dev @storybook/preset-create-react-app@"^4.1.2" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /Users/me/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/me/.npm/_logs/2023-02-15T15_30_06_106Z-debug-0.log
An error occurred while installing dependencies.

... this is what i get now

[ndelangen]

I'm afraid I'm going to have to dive into the code of preset-create-react-app to fix this.

[ndelangen]

I have tested https://github.com/storybookjs/storybook/pull/21107 locally on my machine, and this fixes it!

(main)⚡ % npm config get registry                                                                                                                                                                  ~/Projects/Storybook/repro/cra-npm8
https://registry.yarnpkg.com/
(main) % npm config set registry http://localhost:6001                                                                                                                                              ~/Projects/Storybook/repro/cra-npm8
(main) % npm config get registry                                                                                                                                                                    ~/Projects/Storybook/repro/cra-npm8
http://localhost:6001/
(main) [1] % npx sb init                                                                                                                                                                            ~/Projects/Storybook/repro/cra-npm8
Need to install the following packages:
  sb@7.0.0-beta.48
Ok to proceed? (y) y

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

 • Detecting project type. ✓

added 464 packages in 12s

308 packages are looking for funding
  run `npm fund` for details
. ✓
 • Preparing to install dependencies. ✓

up to date in 2s

308 packages are looking for funding
  run `npm fund` for details
. ✓
🔎 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

╭ No migrations were applicable to your project ────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│                                                                                                                                                               │
│   If you'd like to run the migrations again, you can do so by running 'npx storybook@next automigrate'                                                        │
│                                                                                                                                                               │
│   The automigrations try to migrate common patterns in your project, but might not contain everything needed to migrate to the latest version of Storybook.   │
│                                                                                                                                                               │
│   Please check the changelog and migration guide for manual migrations and more information: https://storybook.js.org/migration-guides/7.0                    │
│   And reach out on Discord if you need help: https://discord.gg/storybook                                                                                     │
│                                                                                                                                                               │
╰───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯

For more information visit: https://storybook.js.org

To run your Storybook, type:

   npm run storybook 

(main)⚡ %        

[shilman]

Good golly!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.0.0-beta.49 containing PR #21107 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb@next upgrade --prerelease

[IanVS]

Does this work for others? I'm not having any luck. I created a fresh CRA, and tried to install storybook:

▶ npx sb@next init

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

 • Detecting project type. ✓
    Detected webpack project. Setting builder to webpack
 • Adding Storybook support to your "Create React App" based project(⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂) ⠼ reify: timing arboris
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: cra-vulns@0.1.0
npm ERR! Found: @storybook/react@7.0.0-beta.50
npm ERR! node_modules/@storybook/react
npm ERR!   dev @storybook/react@"^7.0.0-beta.50" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @storybook/react@">=5.2" from @storybook/preset-create-react-app@4.1.2
npm ERR! node_modules/@storybook/preset-create-react-app
npm ERR!   dev @storybook/preset-create-react-app@"^4.1.2" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /Users/ianvs/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/ianvs/.npm/_logs/2023-02-20T01_52_47_987Z-debug-0.log
An error occurred while installing dependencies.

[ndelangen]

@IanVS it should not be using @storybook/preset-create-react-app@4.1.2 It should be using the beta version..

I'll investigate.

[shilman]

Yippee!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.0.0-beta.52 containing PR #21166 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb@next upgrade --prerelease