Storybook: `npx sb init` does not work with NPM v7

Created on 2 Nov 2020  Β·  34Comments  Β·  Source: storybookjs/storybook

Describe the bug
The init script npx sb init does not work with NPM v7.

To Reproduce
Steps to reproduce the behavior:

  1. Use Node v15 with NPM v7 nvm use 15.
  2. Create a new project, e.g. npx create-react-app my-app.
  3. Go to app directory cd my-app.
  4. Try to init Storybook npx sb init.
  5. An error appears:
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"^17.0.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8.0" from @storybook/[email protected]
npm ERR! node_modules/@storybook/addon-essentials
npm ERR!   dev @storybook/addon-essentials@"^6.0.28" from the root project

Expected behavior
I would expect the command npx sb init to add Storybook to the project, same way as when using older versions of NPM.

System

  System:
    OS: macOS 10.15.7
    CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
  Binaries:
    Node: 15.0.1 - ~/.nvm/versions/node/v15.0.1/bin/node
    npm: 7.0.3 - ~/.nvm/versions/node/v15.0.1/bin/npm
  Browsers:
    Chrome: 86.0.4240.111
    Firefox: 70.0.1
    Safari: 14.0

Additional context
I think the problem is caused by a breaking change in NPM v7. It now installs peer dependencies automatically:
https://github.com/npm/rfcs/blob/latest/implemented/0025-install-peer-deps.md

P0 bug cli compatibility with other tools has workaround yarn / npm

Most helpful comment

@shilman Still does not work. I have tried this:

nvm use 15
npx create-react-app my-app
cd my-app
npx sb@next init

It produces this error:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: @storybook/[email protected]
npm ERR! node_modules/@storybook/react
npm ERR!   dev @storybook/react@"^6.1.0-beta.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @storybook/react@">=5.2" from @storybook/[email protected]
npm ERR! node_modules/@storybook/preset-create-react-app
npm ERR!   dev @storybook/preset-create-react-app@"^3.1.4" from the root project

All 34 comments

Any idea why it's trying to resolve react-storybook??

Try installing 6.1 instead? We've improved the dependency structure for React17 support.

npx sb@next init

@shilman Still does not work. I have tried this:

nvm use 15
npx create-react-app my-app
cd my-app
npx sb@next init

It produces this error:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: @storybook/[email protected]
npm ERR! node_modules/@storybook/react
npm ERR!   dev @storybook/react@"^6.1.0-beta.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @storybook/react@">=5.2" from @storybook/[email protected]
npm ERR! node_modules/@storybook/preset-create-react-app
npm ERR!   dev @storybook/preset-create-react-app@"^3.1.4" from the root project

Really weird. Will investigate. Thanks!

Could not repro using brew node@15/npm@7

Hi,

I have the same error with my new VueJS project when I try to use "npx -p @storybook/cli sb init".

node 15 and npm 7

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR! peer react@"^16.8.0" from @storybook/[email protected]
npm ERR! node_modules/@storybook/addon-essentials
npm ERR! dev @storybook/addon-essentials@"^6.0.28" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"17.0.1" from [email protected]
npm ERR! node_modules/react-dom
npm ERR! peer react-dom@"*" from @storybook/[email protected]
npm ERR! node_modules/@storybook/addon-essentials
npm ERR! dev @storybook/addon-essentials@"^6.0.28" from the root project

It requires two different versions of react. How do I do it?

For what it's worth, I'm seeing the same behavior.

Able to reproduce with the current default node container on dockerhub.

@Rapi-shiny can you try npx sb@next init instead?

@Rapi-shiny can you try npx sb@next init instead?

[email protected]
[email protected]

This caused a semi successful installation:
2020-11-05T05_06_17_212Z-debug.log
2020-11-05T05_06_17_269Z-debug.log

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

 β€’ Detecting project type. βœ“
 β€’ Adding Storybook support to your "Webpack React" app. βœ“
 β€’ Preparing to install dependencies. βœ“



up to date, audited 1577 packages in 3s

found 0 vulnerabilities
. βœ“

To run your Storybook, type:

   npm run storybook 

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

npm ERR! Cannot read property 'matches' of undefined

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/dmw/.npm/_logs/2020-11-05T05_10_50_441Z-debug.log

An error occurred while installing dependencies.

npm ERR! code 1
npm ERR! path /home/dmw/projects/html-chat
npm ERR! command failed
npm ERR! command sh -c sb init

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/dmw/.npm/_logs/2020-11-05T05_10_50_493Z-debug.log

@Rapi-shiny can you try npx sb@next init instead?

It works, thank you!

I have the original problem listed in this bug but also have the following problem when running npx sb@next init.

Using versions:
v15.1.0
7.0.8

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: @storybook/[email protected]
npm ERR! node_modules/@storybook/react
npm ERR! dev @storybook/react@"^6.1.0-beta.7" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @storybook/react@">=5.2" from @storybook/[email protected]
npm ERR! node_modules/@storybook/preset-create-react-app
npm ERR! dev @storybook/preset-create-react-app@"^3.1.5" from the root project
npm ERR!

I can add my voice to the "workaround doesn't work" party.

$ node --version
v15.2.0
$ npm --version
7.0.8

Then after a fresh npx create-react-app my-app, the suggested workaround npx sb@next init fails for me exactly as described by @euan-cowie in the previous comment. (Non-workaround version fails too, of course.)

Same. We cannot integrate storybook into our app even if we do a completely fresh create-react-app build.

$ node --version
v15.2.0
$ npm --version
7.0.10
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8.0" from @storybook/[email protected]
npm ERR! node_modules/@storybook/addon-essentials
npm ERR!   dev @storybook/addon-essentials@"^6.0.28" 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.

I have already tried the --legacy-peer-deps argument but no difference. We have also tried upgrading React but 17.0.1 and 16.14.0 produce the same results. npx sb@next init fails with the exact same errors as npx sb init.

Is this a problem with 6.1? You can install that with npx sb@next init, or upgrade with npx sb upgrade --prerelease.

npx sb upgrade --prerelease

Hi @shilman, npx sb@next init does not work. (Plz see details in my first comment) This remains true in a brand new create-react-app build regardless of which version of React I'm using. Because storybook cannot be installed, trying the upgrade command is futile. (_cannot upgrade version of undefined_)

$ npx sb init results:

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

 β€’ Detecting project type. βœ“
 β€’ Adding Storybook support to your "Create React App" based projectβΈ¨β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react-is
npm ERR!   dev react-is@"^17.0.1" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react-is@"^16.8.0" from @storybook/[email protected]
npm ERR! node_modules/@storybook/addon-essentials
npm ERR!   dev @storybook/addon-essentials@"^6.0.28" 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/nealgist/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/nealgist/.npm/_logs/2020-11-17T13_50_26_020Z-debug.log
An error occurred while installing dependencies.

npm ERR! code 1
npm ERR! path /Users/nealgist/Desktop/Projects/React/architecture
npm ERR! command failed
npm ERR! command sh -c sb init

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/nealgist/.npm/_logs/2020-11-17T13_50_26_048Z-debug.log

$ npx sb@next init results:

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

 β€’ Detecting project type. βœ“
 β€’ Adding Storybook support to your "Create React App" based projectβΈ¨β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: @storybook/[email protected]
npm ERR! node_modules/@storybook/react
npm ERR!   dev @storybook/react@"^6.1.0-rc.4" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer @storybook/react@">=5.2" from @storybook/[email protected]
npm ERR! node_modules/@storybook/preset-create-react-app
npm ERR!   dev @storybook/preset-create-react-app@"^3.1.5" 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/nealgist/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/nealgist/.npm/_logs/2020-11-17T13_51_37_241Z-debug.log
An error occurred while installing dependencies.

npm ERR! code 1
npm ERR! path /Users/nealgist/Desktop/Projects/React/architecture
npm ERR! command failed
npm ERR! command sh -c sb init

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/nealgist/.npm/_logs/2020-11-17T13_51_37_270Z-debug.log

npm version 7.0.10
node version 15.2.0

$ npm list

β”œβ”€β”€ @material-ui/[email protected]
β”œβ”€β”€ @material-ui/[email protected]
β”œβ”€β”€ @testing-library/[email protected]
β”œβ”€β”€ @testing-library/[email protected]
β”œβ”€β”€ @testing-library/[email protected]
β”œβ”€β”€ [email protected]
β”œβ”€β”€ [email protected]
β”œβ”€β”€ [email protected]
β”œβ”€β”€ [email protected]
└── [email protected]

@nealgist any idea why @storybook/react@"^6.1.0-rc.4" and @storybook/react@">=5.2" are conflicting? i'm only interested in figuring out the problem for sb@next since we'll be releasing that as stable very soon.

any idea why @storybook/react@"^6.1.0-rc.4" and @storybook/react@">=5.2" are conflicting?

@shilman When NPM evaluates @storybook/react@">=5.2", it currently installs @storybook/[email protected]. It ignores the RC version. The RC versions are used only when explicitly mentioned in the range.

It can be tested using this snippet:

const semver = require('semver')
semver.satisfies('6.1.0-rc.4', '>=5.2')  // false

See https://github.com/npm/node-semver#prerelease-tags for more details.

@fczbkk @nealgist I've released 6.1.0. Does that solve the problem? I'm still unable to reproduce.

@shilman It works now. Thank you!

I have tried it on Vue project with Node v15 and NPM v7:

nvm use 15
vue create vue-storybook-example
cd vue-storybook-example
npx sb init
npm run storybook

It seems to be working fine. It produces a lot of warnings, though:

npm WARN ERESOLVE overriding peer dependency
npm WARN Found: [email protected]
npm WARN node_modules/react
npm WARN   peerOptional react@"^16.8.0 || ^17.0.0" from @storybook/[email protected]
npm WARN   node_modules/@storybook/addon-actions
npm WARN     dev @storybook/addon-actions@"^6.1.0" from the root project
npm WARN   8 more (@storybook/addon-essentials, @storybook/addon-links, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react@"^16.8.4" from [email protected]
npm WARN node_modules/react-inspector
npm WARN   react-inspector@"^5.0.1" from @storybook/[email protected]
npm WARN   node_modules/@storybook/addon-actions
npm WARN ERESOLVE overriding peer dependency
npm WARN Found: [email protected]
npm WARN node_modules/react
npm WARN   peerOptional react@"^16.8.0 || ^17.0.0" from @storybook/[email protected]
npm WARN   node_modules/@storybook/addon-actions
npm WARN     dev @storybook/addon-actions@"^6.1.0" from the root project
npm WARN   8 more (@storybook/addon-essentials, @storybook/addon-links, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react@"15.x || 16.x || 16.4.0-alpha.0911da3" from @reach/[email protected]
npm WARN node_modules/@reach/router
npm WARN   @reach/router@"^1.3.3" from @storybook/[email protected]
npm WARN   node_modules/@storybook/api
npm WARN   1 more (@storybook/router)
npm WARN ERESOLVE overriding peer dependency
npm WARN Found: [email protected]
npm WARN node_modules/react-dom
npm WARN   peerOptional react-dom@"^16.8.0 || ^17.0.0" from @storybook/[email protected]
npm WARN   node_modules/@storybook/addon-actions
npm WARN     dev @storybook/addon-actions@"^6.1.0" from the root project
npm WARN   7 more (@storybook/addon-essentials, @storybook/addon-links, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react-dom@"15.x || 16.x || 16.4.0-alpha.0911da3" from @reach/[email protected]
npm WARN node_modules/@reach/router
npm WARN   @reach/router@"^1.3.3" from @storybook/[email protected]
npm WARN   node_modules/@storybook/api
npm WARN   1 more (@storybook/router)
npm WARN ERESOLVE overriding peer dependency
npm WARN Found: [email protected]
npm WARN node_modules/react
npm WARN   peerOptional react@"^16.8.0 || ^17.0.0" from @storybook/[email protected]
npm WARN   node_modules/@storybook/addon-actions
npm WARN     dev @storybook/addon-actions@"^6.1.0" from the root project
npm WARN   8 more (@storybook/addon-essentials, @storybook/addon-links, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react@"^16.6.0" from [email protected]
npm WARN node_modules/react-helmet-async
npm WARN   react-helmet-async@"^1.0.2" from @storybook/[email protected]
npm WARN   node_modules/@storybook/ui
npm WARN ERESOLVE overriding peer dependency
npm WARN Found: [email protected]
npm WARN node_modules/react-dom
npm WARN   peerOptional react-dom@"^16.8.0 || ^17.0.0" from @storybook/[email protected]
npm WARN   node_modules/@storybook/addon-actions
npm WARN     dev @storybook/addon-actions@"^6.1.0" from the root project
npm WARN   7 more (@storybook/addon-essentials, @storybook/addon-links, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react-dom@"^16.6.0" from [email protected]
npm WARN node_modules/react-helmet-async
npm WARN   react-helmet-async@"^1.0.2" from @storybook/[email protected]
npm WARN   node_modules/@storybook/ui
npm WARN ERESOLVE overriding peer dependency
npm WARN Found: [email protected]
npm WARN node_modules/react
npm WARN   peerOptional react@"^16.8.0 || ^17.0.0" from @storybook/[email protected]
npm WARN   node_modules/@storybook/addon-actions
npm WARN     dev @storybook/addon-actions@"^6.1.0" from the root project
npm WARN   8 more (@storybook/addon-essentials, @storybook/addon-links, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react@"^0.14.0 || ^15.0.0-0 || ^16.0.0" from [email protected]
npm WARN node_modules/react-sizeme
npm WARN   react-sizeme@"^2.6.7" from @storybook/[email protected]
npm WARN   node_modules/@storybook/ui
npm WARN ERESOLVE overriding peer dependency
npm WARN Found: [email protected]
npm WARN node_modules/react-dom
npm WARN   peerOptional react-dom@"^16.8.0 || ^17.0.0" from @storybook/[email protected]
npm WARN   node_modules/@storybook/addon-actions
npm WARN     dev @storybook/addon-actions@"^6.1.0" from the root project
npm WARN   7 more (@storybook/addon-essentials, @storybook/addon-links, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react-dom@"^0.14.0 || ^15.0.0-0 || ^16.0.0" from [email protected]
npm WARN node_modules/react-sizeme
npm WARN   react-sizeme@"^2.6.7" from @storybook/[email protected]
npm WARN   node_modules/@storybook/ui
npm WARN ERESOLVE overriding peer dependency
npm WARN Found: [email protected]
npm WARN node_modules/vue
npm WARN   vue@"^2.6.11" from the root project

Fantastic! Thanks @fczbkk for narrowing down the problem and also for your patience as we got the release in order. I'll close this and reopen if people are still experiencing the issue.

We'll deal with all those warnings separately--it's a bigger project but we're slowly working our way through..

fwiw I'm still experiencing this with react 17 app:

node 15.3.0
npm 7.0.14

resolve error:
npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! Found: [email protected] npm ERR! node_modules/react npm ERR! react@"^17.0.1" from the root project npm ERR! peerOptional react@"^16.8.0 || ^17.0.0" from @storybook/[email protected] npm ERR! node_modules/@storybook/addon-actions npm ERR! dev @storybook/addon-actions@"^6.1.6" from the root project npm ERR! @storybook/addon-actions@"6.1.6" from @storybook/[email protected] npm ERR! node_modules/@storybook/addon-essentials npm ERR! dev @storybook/addon-essentials@"^6.1.6" from the root project npm ERR! 8 more (@storybook/addon-essentials, @storybook/addon-links, ...) npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer react@"^0.14.0 || ^15.0.0 || ^16.0.0" from [email protected] npm ERR! node_modules/@reach/router/node_modules/create-react-context npm ERR! create-react-context@"0.3.0" from @reach/[email protected] npm ERR! node_modules/@reach/router npm ERR! @reach/router@"^1.3.3" from @storybook/[email protected] npm ERR! node_modules/@storybook/api npm ERR! @storybook/api@"6.1.6" from @storybook/[email protected] npm ERR! node_modules/@storybook/addon-actions npm ERR! 2 more (@storybook/addon-essentials, @storybook/addons) npm ERR! 1 more (@storybook/router)

@John118118 #13280

It seems like this might've regressed. Can somebody who's able to reproduce this problem bisect and figure out which 6.1.x version it started working in, and which version it stopped working in again? Thank you πŸ™

@shilman all 6.1.x versions have this error (I just tried them all by running each of npx [email protected].[0..6] init - restoring to a clean react repo in between attempts).

This PR is what I think we need: https://github.com/jamiebuilds/create-react-context/pull/32

Workaround:

npx --legacy-peer-deps sb init

This PR is what I think we need: jamiebuilds/create-react-context#32

@John118118 can you elaborate on this? i believe all our peer deps have already been updated to accommodate react 17...

create-react-context is rejecting react 17 as a peer dep in this line in the error stack:

npm ERR! peer react@"^0.14.0 || ^15.0.0 || ^16.0.0" from [email protected]

which appears to be the crux of this entire problem. If that PR was to be merged (and released, etc) it would accept it.

I'm _assuming_ NPM v7 has introduced a strict peer dependency check, and the legacy flag uses a/the previous, more lax, checks or something. I can see lots of mentions of strict peer dependency handling in the release commit messages, but I'm still new to the modern JS ecosphere so I can't be certain without a considerable amount of research :)

e: more appropriate wording

@John118118 Aha thanks for explaining, much appreciated. That makes a lot more sense. I guess we'll just need to wait for it, or maybe take matters into our own hands if it doesn't happen in a reasonable amount of time... πŸ™„

create-react-context is a polyfill for React.createContext which was introduced in React 16. Storybook (according to package.json) only supports React 16+. So the polyfill shouldn't be need anyway. BUT you need to look at the whole chaini Storybook isn't requiring create-react-context directly, it's actually Reach Router that requires it. So first create-react-context needs to be updated (PR), and then Reach Router needs to be updated itself and to use the updated CRC, and then Storybook needs to be updated to use the new Reach Router. 🀝

This is annoying but not much can be done other than helping out those projects. πŸš€

There's no finger pointing or blame here, many JS projects are facing the same teething pains with NPM v7 due to package managers previously not bothering to resolve peerDependencies properly. So for years projects have understandably been getting away with broken / outdated / overly strict peer deps and now that suddenly NPM does the right thing it's highlighting these issues. Hopefully the community will get used to it and we won't have issues like this again πŸ˜„

If you're reading this, please go upvote https://github.com/reach/router/pull/436 to let them know it's important πŸ™

I can confirm this issue.

I worked with lastest next.js typescript.
npm version 7.0.8
node version 15.2.1

I can not install storybook. Neither npx sb@next init nor npx sb init, error message is the similar like above mentioned.

Then I run npm install -g npm@latest, suddenly my npm would down graded to 6.14.9, then I install the storybook with npx sb init, then it works.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

hckhanh picture hckhanh  Β·  69Comments

43081j picture 43081j  Β·  61Comments

moimikey picture moimikey  Β·  67Comments

ilyaulyanov picture ilyaulyanov  Β·  100Comments

firaskrichi picture firaskrichi  Β·  61Comments