Fix NPM7 peer dependencies

[shilman]

NPM7 has changed the semantics of peer dependencies which caused NPM to fail: #12983

I updated the CLI to use --legacy-peer-deps to work around this issue: #14106

However, the underlying structure of the project has not changed, and presumably this will bite us in the future.

There are at least two kinds of dependency errors:

• [x] Dependencies on external libraries like @reach/router which are not React17 compatible
• [ ] Use of optional peer dependencies within Storybook itself, e.g. addon-docs

External libraries

For each library that is not NPM7 compatible, we should either

• Fork it, make it compatible, issue a PR, replace the fork with the upgrade once PR is merged
• OR upgrade to an alternative

In the case of @reach/router, the path forward could be React Router which does support React 17

Internal dependencies

@storybook/addon-docs has optional peer dependencies on each of the framework packages it supports @storybook/react, @storybook/vue, etc. It should be refactored to use dependency injection so that those dependencies can be removed. In addition, the react-specific code should probably be moved into @storybook/react, which is a bigger project.

[stevendavisfoto]

@shilman i still have issues...

npm ERR! node_modules/react
npm ERR!   react@"^17.0.1" from the root project
npm ERR!   peer react@"^16.8.0 || ^17.0.0" from @material-ui/core@4.11.3
npm ERR!   node_modules/@material-ui/core
npm ERR!     @material-ui/core@"^4.11.3" from the root project
npm ERR!     peer @material-ui/core@"^4.0.0" from @material-ui/icons@4.11.2
npm ERR!     node_modules/@material-ui/icons
npm ERR!       @material-ui/icons@"^4.11.2" from the root project
npm ERR!     2 more (@material-ui/lab, @material-ui/pickers)
npm ERR!   31 more (react-dom, @material-ui/icons, @material-ui/lab, ...)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8.4" from react-inspector@5.1.0
npm ERR! node_modules/@storybook/addon-actions/node_modules/react-inspector
npm ERR!   react-inspector@"^5.0.1" from @storybook/addon-actions@6.1.21
npm ERR!   node_modules/@storybook/addon-actions
npm ERR!     @storybook/addon-actions@"6.1.21" from @storybook/addon-essentials@6.1.21
npm ERR!     node_modules/@storybook/addon-essentials
npm ERR!       dev @storybook/addon-essentials@"^6.1.21" from the root project```

[Methuselah96]

@stevendavisfoto That's why the issue is still open. It hasn't been resolved yet.

[stevendavisfoto]

@Methuselah96 what's the solution for now? downgrade to react 16? use --leacy-peer-deps?

[Methuselah96]

Yes, either use --legacy-peer-deps, downgrade to NPM 6, downgrade to React 16, or use an alternative packager manager.

[rodrigoehlers]

I'd like to contribute and replace @reach/router with an alternative. @shilman: You mentioned React Router as an alternative. Is anyone already working on this? If not, I'd like to start doing so.

[shilman]

@rodrigoehlers Thanks for your enthusiasm to fix this!! I was probably referring to this: https://reacttraining.com/blog/reach-react-router-future/

@ndelangen did the @reach/router work and is most familiar with it. Ideally he would give the green light on this and provide any mentoring needed. If you're eager to start, you could probably get going and then we could review what you come up with. Given the trajectory of the project, this is probably not a controversial change.

Let me know what you think and feel free to DM on Discord: https://discord.gg/storybook

[rodrigoehlers]

@shilman Sounds good, thanks. I'll wait for input from @ndelangen and setup the development environment in the meantime. If I don't contribute with this, I'll definitely do with another issue.

[shilman]

@rodrigoehlers I just chatted with @ndelangen and he's cool with the project. Please hit us up on Discord if you have questions getting set up or need a hand in any way!

[andykenward]

Would changing the peerDependencies semver version from https://github.com/storybookjs/storybook/blob/8a40dbd43106fae798548950dc3096482f3deae7/addons/actions/package.json#L62-L65

to

{
 "peerDependencies": {
    "react": ">=16.8.0",
    "react-dom": ">=16.8.0"
  }
}

Solve the npm 7 install issue? You can use the npm semver calculator to see what version of react that ranger covers.

[ndelangen]

@andykenward but storybook IS compatible with react 17 at runtime. Won't changing that mean users will get a warning?

Seems to me there's simply no point in having peerDependencies in npm 7?

[andykenward]

@ndelangen >=16.8.0 includes the version that are equal to or greater than 16.8.0. Which includes React 17 and above. Would also cover a React 18. So perhaps >=16.8.0 <=17. Try it out on https://semver.npmjs.com/ .

NPM 7 installs peerDependencies for you by default. It even adds them to your projects package.json file. What would be the alternative?

The fix in #14106 for the cli sb only works on the initial usage. If you bin/regenerate your node_modules & package-lock.json within your project, as you tend to do though-out a project. You then get the error https://github.com/storybookjs/storybook/issues/14119#issuecomment-797709081, unless you use npm i --legacy-peer-deps or have legacy-peer-deps=true in your projects .nvmrc.

Making my suggested change https://github.com/storybookjs/storybook/issues/14119#issuecomment-815041540 thought-out the storybook repo and testing locally takes a bit of time. Got stuck with the local publish process to verdaccio failing for a couple npm packages. Not had a chance to spend more time on it.

[ndelangen]

@andykenward I appreciate your expertise and time invested!

I personally haven't used npm's CLI in a long time.

Can you explain to me why B is better and actually solves the problem?:

A) "react": "^16.8.0 || ^17.0.0", 
B) "react": ">=16.8.0",

NPM 7 installs peerDependencies for you by default

Can you help me understand how come npm seems to choose the incorrect version then?

Why with version-range B, does npm chose the correct one?

Making my suggested change #14119 (comment) thought-out the storybook repo and testing locally takes a bit of time. Got stuck with the local publish process to verdaccio failing for a couple npm packages. Not had a chance to spend more time on it.

Understandable, again I want to stress, I'm really appreciative of our time! If you'd be able to pair on this together some day? https://calendly.com/ndelangen/storybook

[Methuselah96]

I think this recent conversation is barking up the wrong tree. There are two issues that are clearly described in the desciption. The first issue is with external dependencies not allowing React 17 (e.g., @reach/router (see https://github.com/reach/router/pull/436) and react-inspector (see https://github.com/storybookjs/react-inspector/issues/121)). The second issue is with internal libraries like @storybook/addon-docs that have optional peer dependencies on React, Vue, etc. The solution to that is proposed in the description of this issue.

The peer dependency range for @storybook/addon-actions is correct at ^16.8.0 || ^17.0.0, it allows for React 17, and it doesn't need to be changed. Changing the dependency range to >=16.8.0 won't make a difference in resolving this issue.

[andykenward]

@Methuselah96 I am going by the error message from npm 7. Which is flagging that the @storybook/addon.... are the issue. Npm finds React 17, but complains.

example project package.json

{
  "name": "vite-project",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "serve": "vite preview",
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook"
  },
  "dependencies": {
    "react": "^17.0.0",
    "react-dom": "^17.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.13.15",
    "@storybook/addon-actions": "^6.3.0-alpha.3",
    "@storybook/addon-essentials": "^6.3.0-alpha.3",
    "@storybook/addon-links": "^6.3.0-alpha.3",
    "@storybook/react": "^6.3.0-alpha.3",
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "@vitejs/plugin-react-refresh": "^1.3.1",
    "babel-loader": "^8.2.2",
    "typescript": "^4.1.2",
    "vite": "^2.1.5"
  }
}

I was just seeing if it would be an easier fix for the addon packages by doing my suggested change.

[Methuselah96]

@andykenward Right, the top part of that error message under "Found react@17.02" is specifying the React dependencies that are correctly resolved to React 17 (which includes @storybook/addon-actions). The bottom part of that error message under "Could not find resolve dependency" is the issue where react-inspector has a peer dependency on React 16 which is one of the issues at hand.

[andykenward]

Ah okay. It looks like the @storybook/addon-links is using @reach/router, which doesn't actually support react 17. https://github.com/storybookjs/storybook/blob/90f27eb4d3e6f876771cdbe8772e892b0c693d97/lib/router/package.json#L39

[andykenward]

@Methuselah96 D'oh I totally missed the difference between "Found react@17.0.2" vs "Could not find resolve dependency". I just saw the red ERR! meaning it's all bad :(. Thanks

[bcomnes]

I started an issue specifically for reach router to react-router 6: https://github.com/storybookjs/storybook/issues/14619

I gave it a shot this morning but gave up after a few hours. Perhaps this would be easier for someone more familiar with @storybook/router and the various imported types around @reach/router.

The quickest path forward would be for reach to just support reach 17: https://github.com/reach/router/pull/452

It's unclear if the maintainers are willing to do that, if anyone knows they are not, I can stop bugging them about it 😆 .

[ndelangen]

Perhaps this would be easier for someone more familiar with @storybook/router and the various imported types around @reach/router.

I guess that's me!

I'd be happy to debug this together, want to schedule something? https://calendly.com/ndelangen/storybook

[MarcMcIntosh]

Any update one this?

[Jordan-Hall]

@ndelangen why not migrate to react-router 6. happy to take a look I know it's in beta but it's pretty stable now. We are about to use in in production

[bcomnes]

Any update one this?

Sorry got busy at work last couple of weeks. Simplest thing is to fork reach and publish a scoped fork that supports react > 16. Second to that doing the work to upgrade to react-router 6 but that requires some non-trivial refactoring.

[Jordan-Hall]

upgrade to react-router 6 but that requires some non-trivial refactoring.

Ok so gonna try and starat this then.

[Ennoriel]

There has been some replies on the linked #reach/router/452 PR related to this issue. It is indeed suggested to switch momentarily to a fork for react 17 support.

It seems that the reach-router is not maintained anymore. The last PR merged was made by dependabot 9 months ago.

[IanVS]

why not migrate to react-router 6.

Just curious, @Jordan-Hall, since version 6 has been in beta for a long time without movement, would it maybe be safer to move first to react-router v5, and then move to 6 once it's stable?

[ndelangen]

We recently upgraded to react-router v6!!

[ricardo-fnd]

Hi guys. I'm using 2 nextJS applications in a monorepo, which all of them use react 18. I have storybook in another folder (shared lib) and it's warning me about the peerDependencies talked above. I can't simply downgrade react and I can't install the supported react version because that will make the monorepo install both react versions which is not good. Any suggestions?

[Methuselah96]

Are you able to run npm install with the --legacy-peer-deps flag?

[IanVS]

@ricardo-fnd what do you mean by "I can't install the supported react version"? Can you share the warnings you're seeing? react-router supports any react >= 16.8, so maybe you're having a different issue?

[ricardo-fnd]

@IanVS peerDeps from storybook

@Methuselah96 I am able yes. Will storybook just use the react version that I'm using (v18.0.0)?

[Methuselah96]

I don't believe the latest stable version (i.e., v6.4.x) is compatible with React 18 based on https://github.com/storybookjs/storybook/issues/17831. I think you'll need to use the pre-release (i.e., v6.5.0-alpha.x).

[IanVS]

I don't believe the latest stable version (i.e., v6.4.x) is compatible with React 18 based on https://github.com/storybookjs/storybook/issues/17831. I think you'll need to use the pre-release (i.e., v6.5.0-alpha.x`).

It's "compatible" in the sense that it will render, but you'll see warnings in your console, and react 18 features won't work.

@ricardo-fnd do you have react and react-dom installed in the workspace where your storybook is installed? The warnings make it seem like you might not.

[ricardo-fnd]

@Methuselah96 pre-release solved most of the warnings, but some modules still not support react 18 even in pre-release. maybe wip?

[ricardo-fnd]

@IanVS I have react v.18.0.0

[SteveAtKlover]

@ricardo-fnd i don't believe SB works with react 18 yet. it only came out last month.

[IanVS]

@ricardo-fnd i don't believe SB works with react 18 yet. it only came out last month.

It should work when using the latest alpha versions of 6.5: https://github.com/storybookjs/storybook/pull/17215

[ndelangen]

Fixed in 7.0 beta

[D1no]

EDIT: Decided to file a new ticket for this. It's here: https://github.com/storybookjs/storybook/issues/21396

@ndelangen

Just installed the latest storybook 7 version in our pnpm monorepo, where react 18.2 is global and got this:

 ERR_PNPM_PEER_DEP_ISSUES  Unmet peer dependencies

_tooling/storybook
└─┬ @storybook/blocks 7.0.0-alpha.8
  └─┬ @mdx-js/react 1.6.22
    └── ✕ unmet peer react@"^16.13.1 || ^17.0.0": found 18.2.0

Not sure why @mdx-js/react is at version 1.6.22 in SB <-> while the latest release of mdx is 2.3.0 at time of writing (?)

In https://github.com/storybookjs/storybook/issues/20260 it was said that mdx was updated in december (?)

[ndelangen]

@D1no please try the latest beta instead, alpha.8 is quite old already.

[IanVS]

It looks like alpha.8 has the latest tag in npm: https://www.npmjs.com/package/@storybook/blocks?activeTab=versions. But you'll want to install it at next if you're using 7.0. I believe if you're using 6.5, you'll want to use @storybook/ui instead.