Fix NPM7 peer dependencies #14119

shilman · 2021-03-03T23:28:59Z

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:

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.

The text was updated successfully, but these errors were encountered:

stevendavisfoto · 2021-03-12T19:37:03Z

@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/[email protected]
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/[email protected]
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 [email protected]
npm ERR! node_modules/@storybook/addon-actions/node_modules/react-inspector
npm ERR!   react-inspector@"^5.0.1" from @storybook/[email protected]
npm ERR!   node_modules/@storybook/addon-actions
npm ERR!     @storybook/addon-actions@"6.1.21" from @storybook/[email protected]
npm ERR!     node_modules/@storybook/addon-essentials
npm ERR!       dev @storybook/addon-essentials@"^6.1.21" from the root project```

Methuselah96 · 2021-03-12T19:38:16Z

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

stevendavisfoto · 2021-03-12T19:39:02Z

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

Methuselah96 · 2021-03-12T19:39:56Z

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

rodrigoehlers · 2021-03-23T09:35:42Z

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 · 2021-03-23T09:59:53Z

@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 · 2021-03-23T10:04:36Z

@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 · 2021-03-23T10:18:43Z

@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 · 2021-04-07T16:14:06Z

Would changing the peerDependencies semver version from

storybook/addons/actions/package.json

Lines 62 to 65 in 8a40dbd

    
           "peerDependencies": { 
        
             "react": "^16.8.0 || ^17.0.0", 
        
             "react-dom": "^16.8.0 || ^17.0.0" 
        
           },

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 · 2021-04-12T08:29:12Z

@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 · 2021-04-12T09:07:45Z

@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 #14119 (comment), unless you use npm i --legacy-peer-deps or have legacy-peer-deps=true in your projects .nvmrc.

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.

ndelangen · 2021-04-12T15:35:08Z

@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 · 2021-04-12T16:15:23Z

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 reach/router#436) and react-inspector (see storybookjs/react-inspector#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 · 2021-04-12T16:59:00Z

@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 · 2021-04-12T17:06:26Z

@andykenward Right, the top part of that error message under "Found [email protected]" 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 · 2021-04-12T17:06:27Z

Ah okay. It looks like the @storybook/addon-links is using @reach/router, which doesn't actually support react 17.

storybook/lib/router/package.json

Line 39 in 90f27eb

"@reach/router": "^1.3.4",

andykenward · 2021-04-12T17:13:08Z

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

bcomnes · 2021-04-15T17:42:06Z

I started an issue specifically for reach router to react-router 6: #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: reach/router#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 · 2021-04-22T15:35:38Z

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 · 2021-05-11T11:59:11Z

Any update one this?

Jordan-Hall · 2021-05-14T10:25:52Z

@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 · 2021-05-14T15:54:32Z

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 · 2021-05-14T17:31:53Z

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

Ok so gonna try and starat this then.

…) has a peer-dep on React 16.x which conflicts with PRC’s peer-dep on React 17.x" This reverts commit e3612051ab01bf1dfbdf477f00ef96b0ea8aca47. Storybook has the same issue (storybookjs/storybook#14119, storybookjs/storybook#14619), so if we’re open to using '--legacy-peer-deps' to use Storybook, we can’t justify removing Playroom on anti-'--legacy-peer-deps' grounds.

Ennoriel · 2021-08-09T14:10:53Z

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 · 2021-09-23T15:39:51Z

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 · 2021-11-23T09:17:34Z

We recently upgraded to react-router v6!!

ricardo-fnd · 2022-04-22T14:29:32Z

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 · 2022-04-22T14:31:19Z

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

IanVS · 2022-04-22T14:34:17Z

@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 · 2022-04-22T14:53:19Z

@IanVS peerDeps from storybook

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

Methuselah96 · 2022-04-22T14:59:56Z

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

IanVS · 2022-04-22T15:02:53Z

I don't believe the latest stable version (i.e., v6.4.x) is compatible with React 18 based on #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 · 2022-04-22T15:06:15Z

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

ricardo-fnd · 2022-04-22T15:06:56Z

@IanVS I have react v.18.0.0

SteveAtKlover · 2022-04-22T17:15:02Z

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

IanVS · 2022-04-22T17:38:35Z

@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: #17215

ndelangen · 2023-01-18T00:04:01Z

Fixed in 7.0 beta

D1no · 2023-03-04T01:51:42Z

EDIT: Decided to file a new ticket for this. It's here: #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 #20260 it was said that mdx was updated in december (?)

ndelangen · 2023-03-06T09:40:56Z

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

IanVS · 2023-03-06T11:59:31Z

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.

shilman added dependencies maintenance User-facing maintenance tasks core P1 labels Mar 3, 2021

frederikhors mentioned this issue Apr 7, 2021

Move Storybook in it's own dir. SvelteStack/svelte-query#34

Merged

jackw mentioned this issue Jul 13, 2021

Toolkit: npx commands fail with NPM 7.x.x grafana/grafana#34807

Closed

shilman mentioned this issue Aug 2, 2021

Storybook React dependency issue with NPM 7 #15725

Closed

IanVS mentioned this issue Sep 23, 2021

Unmet peer dependency: react #15938

Closed

renanlimaleite mentioned this issue Jun 21, 2022

Fix warning storybook renanlimaleite/react-ts-vite#2

Open

IanVS mentioned this issue Sep 5, 2022

Deps: Upgrade react-element-to-jsx-string and react-inspector for React 18 #19104

Merged

shilman removed the P1 label Oct 18, 2022

tatimblin mentioned this issue Nov 15, 2022

chore: add storybook yext/react-components#2

Merged

ndelangen closed this as completed Jan 18, 2023

D1no mentioned this issue Mar 4, 2023

[Bug]: Broken React 18 peer dependency when installing sb@next having old(?) @storybook/blocks 7.0.0-alpha.8 with outdated @mdx-js/react version #21396

Closed

Fix NPM7 peer dependencies #14119

Fix NPM7 peer dependencies #14119

Comments

shilman commented Mar 3, 2021 • edited by ndelangen Loading

External libraries

Internal dependencies

stevendavisfoto commented Mar 12, 2021 • edited Loading

Methuselah96 commented Mar 12, 2021

stevendavisfoto commented Mar 12, 2021

Methuselah96 commented Mar 12, 2021 • edited Loading

rodrigoehlers commented Mar 23, 2021

shilman commented Mar 23, 2021

rodrigoehlers commented Mar 23, 2021

shilman commented Mar 23, 2021

andykenward commented Apr 7, 2021

ndelangen commented Apr 12, 2021

andykenward commented Apr 12, 2021 • edited Loading

ndelangen commented Apr 12, 2021

Methuselah96 commented Apr 12, 2021 • edited Loading

andykenward commented Apr 12, 2021

Methuselah96 commented Apr 12, 2021 • edited Loading

andykenward commented Apr 12, 2021 • edited Loading

andykenward commented Apr 12, 2021

bcomnes commented Apr 15, 2021

ndelangen commented Apr 22, 2021

MarcMcIntosh commented May 11, 2021

Jordan-Hall commented May 14, 2021

bcomnes commented May 14, 2021 • edited Loading

Jordan-Hall commented May 14, 2021

Ennoriel commented Aug 9, 2021

IanVS commented Sep 23, 2021

ndelangen commented Nov 23, 2021

ricardo-fnd commented Apr 22, 2022

Methuselah96 commented Apr 22, 2022

IanVS commented Apr 22, 2022 • edited Loading

ricardo-fnd commented Apr 22, 2022 • edited Loading

Methuselah96 commented Apr 22, 2022 • edited Loading

IanVS commented Apr 22, 2022 • edited Loading

ricardo-fnd commented Apr 22, 2022

ricardo-fnd commented Apr 22, 2022 • edited Loading

SteveAtKlover commented Apr 22, 2022

IanVS commented Apr 22, 2022 • edited Loading

ndelangen commented Jan 18, 2023

D1no commented Mar 4, 2023 • edited Loading

ndelangen commented Mar 6, 2023

IanVS commented Mar 6, 2023

shilman commented Mar 3, 2021 •

edited by ndelangen

Loading

stevendavisfoto commented Mar 12, 2021 •

edited

Loading

Methuselah96 commented Mar 12, 2021 •

edited

Loading

andykenward commented Apr 12, 2021 •

edited

Loading

Methuselah96 commented Apr 12, 2021 •

edited

Loading

Methuselah96 commented Apr 12, 2021 •

edited

Loading

andykenward commented Apr 12, 2021 •

edited

Loading

bcomnes commented May 14, 2021 •

edited

Loading

IanVS commented Apr 22, 2022 •

edited

Loading

ricardo-fnd commented Apr 22, 2022 •

edited

Loading

Methuselah96 commented Apr 22, 2022 •

edited

Loading

IanVS commented Apr 22, 2022 •

edited

Loading

ricardo-fnd commented Apr 22, 2022 •

edited

Loading

IanVS commented Apr 22, 2022 •

edited

Loading

D1no commented Mar 4, 2023 •

edited

Loading