Cannot run `npm update` on npm@7.0.x due to storybook's peer dependency

[xiaoshuw]

Describe the bug
After upgrading npm to npm@7.0.6, npm update

To Reproduce

1. Go to a storybook project
2. run npm install -g npm@7.0.6 (any npm 7 version seems the same)
3. npm update

Expected behavior
Should update the projects.

But it shows:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: root@undefined
npm ERR! Found: react@16.14.0
npm ERR! node_modules/react
npm ERR! peer react@"^16.8.0" from @storybook/addon-essentials@6.0.27
npm ERR! node_modules/@storybook/addon-essentials
npm ERR! dev @storybook/addon-essentials@"^6.0.27" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"17.0.1" from react-dom@17.0.1
npm ERR! node_modules/react-dom
npm ERR! peer react-dom@"*" from @storybook/addon-essentials@6.0.27
npm ERR! node_modules/@storybook/addon-essentials
npm ERR! dev @storybook/addon-essentials@"^6.0.27" 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/xiaoshuw/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/xiaoshuw/.npm/_logs/2020-10-28T18_57_59_771Z-debug.log

I am guessing it is due to the "react-dom":"*" on the addon-essentials

"peerDependencies": {
"babel-loader": "^8.0.0",
"react": "^16.8.0",
"react-dom": "*",
"react-is": "^16.8.0"
},

[davidprae]

I'm getting a similar error just trying to install Storybook with "react": "17.0.1"

• Detecting project type. ✓
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: onerecord-react-ui@1.0.0
npm ERR! Found: react@17.0.1
npm ERR! node_modules/react
npm ERR!   peer 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/addon-essentials@6.0.27
npm ERR! node_modules/@storybook/addon-essentials
npm ERR!   dev @storybook/addon-essentials@"^6.0.27" 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!

[strass]

I'm hitting the same issue. If I use --legacy-peer-deps I can install packages but afterwards my react storybook ends up being detected as an @storybook/angular project?

[shilman]

Please upgrade to 6.1 alpha which should be react 17 compatible

npx sb upgrade --prerelease

[hiepxanh]

it is not the bug by storybook it-self, please install new version of NPM by running npm i -g npm@7.0.11
since that it causing by this bug in npm (bug)[https://github.com/npm/cli/issues/2134]
BTW: we should not test with npm@7 or yarn@2 it very unstable and causing crazy issues

[xiaoshuw]

welled tried npm 7.0.11, still the same.

[rsispal]

Also having this issue, with NPM version 7.1.1.

[shilman]

AFAIK we're blocked on this: reach/router#436

If you're reading this comment, please go upvote that PR to let them know it's important 🙏

[antoniosZ]

hasn't reach/router been absorbed by react-router?

https://reacttraining.com/blog/reach-react-router-future/
https://reach.tech/router/

perhaps migrate to the latest react-router?
I think it will also solve #11928

[viridia]

I've stopped using reach/router in my own projects since it appears to be abandoned. I've used react-router in some projects but it's pretty hefty compared to other alternatives.

I tried several different routers, wouter looks to be a reasonable and small replacement that wasn't too difficult to migrate to.

[ndelangen]

This issue is resolved in storybook 7.0 beta.