Describe the bug
The init script npx sb init
does not work with NPM v7.
To Reproduce
Steps to reproduce the behavior:
nvm use 15
.npx create-react-app my-app
.cd my-app
.npx sb init
.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
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.
Most helpful comment
@shilman Still does not work. I have tried this:
It produces this error: