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

Workaround:

npx --legacy-peer-deps sb init

react 17.0.1 npm 7.5.2 Finally, npx --legacy-peer-deps sb init works for me.

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 chain 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 😄

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.

@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: react-storybook@0.1.0
npm ERR! Found: @storybook/react@6.1.0-beta.1
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/preset-create-react-app@3.1.4
npm ERR! node_modules/@storybook/preset-create-react-app
npm ERR!   dev @storybook/preset-create-react-app@"^3.1.4" from the root project

Another workaround (that also works for co-workers that might be unaware of the --legacy-peer-deps flag) is creating a .npmrc in your root folder with the following line:

legacy-peer-deps=true

After that npm install should just work (also on CI).

If you’re reading this, please go upvote https://github.com/reach/router/pull/436 to let them know it’s important 🙏

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.)

вы так и не решили проблему?

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

node 15.3.0 npm 7.0.14

resolve error:

npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! Found: react@17.0.1
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/addon-actions@6.1.6
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/addon-essentials@6.1.6
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 create-react-context@0.3.0
npm ERR! node_modules/@reach/router/node_modules/create-react-context
npm ERR!   create-react-context@"0.3.0" from @reach/router@1.3.4
npm ERR!   node_modules/@reach/router
npm ERR!     @reach/router@"^1.3.3" from @storybook/api@6.1.6
npm ERR!     node_modules/@storybook/api
npm ERR!       @storybook/api@"6.1.6" from @storybook/addon-actions@6.1.6
npm ERR!       node_modules/@storybook/addon-actions
npm ERR!       2 more (@storybook/addon-essentials, @storybook/addons)
npm ERR!     1 more (@storybook/router)```

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

Alright, not sure how it’s solved now, but it is.

for someone has a problem installing storybook on fresh project then try this npx -p @storybook/cli sb init

if no working try this npm i @storybook/cli npx sb init

Last commit in create-react-context is 3 years ago. Is there anyway for us to not depend on it, even indirectly… Storybook is really modern…

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

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/addon-essentials@6.0.28
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.

react 17.0.1 npm 7.5.2 Finally, npx --legacy-peer-deps sb init works for me.

works for me too.

@marcoavazquez in npm7

npm install --legacy-peer-deps

Olé!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.1.21 containing PR #14106 that references this issue. Upgrade today to the @latest NPM tag to try it out!

npx sb upgrade

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.

thanks, it helped, today the only option to make it move 😗

@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 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 create-react-context@0.3.0

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

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…

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 🙏

@John118118 #13280

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.

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

npm@7.0.3 node@v15.0.1 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