Dependency conflict when installing dependencies using npm 8 #46443

fluiddot · 2022-12-09T18:23:35Z

Description

Part of Upgrade node and npm to latest LTS versions.

Related to #46400 and now that #40540 is solved, I tried installing the dependencies using npm 8.19.3 (node version 14.20.1). The first time I ran npm i it worked but the second time I encountered the following error:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: @storybook/addon-knobs@6.2.9
npm ERR! Found: react@18.2.0
npm ERR! node_modules/react
npm ERR!   dev react@"18.2.0" from the root project
npm ERR!   peer react@">=16.3.0" from @emotion/core@10.1.1
npm ERR!   node_modules/@emotion/core
npm ERR!     peer @emotion/core@"^10.0.28" from @emotion/styled-base@10.0.31
npm ERR!     node_modules/@emotion/styled-base
npm ERR!       @emotion/styled-base@"^10.0.27" from @emotion/styled@10.0.27
npm ERR!       node_modules/@storybook/addon-knobs/node_modules/@emotion/styled
npm ERR!         @emotion/styled@"^10.0.27" from @storybook/theming@6.2.9
npm ERR!         node_modules/@storybook/addon-knobs/node_modules/@storybook/theming
npm ERR!     peer @emotion/core@"^10.0.27" from @emotion/styled@10.0.27
npm ERR!     node_modules/@storybook/addon-knobs/node_modules/@emotion/styled
npm ERR!       @emotion/styled@"^10.0.27" from @storybook/theming@6.2.9
npm ERR!       node_modules/@storybook/addon-knobs/node_modules/@storybook/theming
npm ERR!         @storybook/theming@"6.2.9" from @storybook/addon-knobs@6.2.9
npm ERR!         node_modules/@storybook/addon-knobs
npm ERR!         3 more (@storybook/addons, @storybook/api, @storybook/components)
npm ERR!     3 more (@storybook/theming, emotion-theming, react-select)
npm ERR!   91 more (@emotion/primitives-core, @emotion/react, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peerOptional react@"^16.8.0 || ^17.0.0" from @storybook/addon-knobs@6.2.9
npm ERR! node_modules/@storybook/addon-knobs
npm ERR!   dev @storybook/addon-knobs@"6.2.9" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: react@17.0.2
npm ERR! node_modules/react
npm ERR!   peerOptional react@"^16.8.0 || ^17.0.0" from @storybook/addon-knobs@6.2.9
npm ERR!   node_modules/@storybook/addon-knobs
npm ERR!     dev @storybook/addon-knobs@"6.2.9" 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.

Based on the error logs, looks like there's a dependency conflict in @storybook/addon-knobs with the React versions.

Step-by-step reproduction instructions

Install npm 8 (e.g. run command npm i -g npm@8).
Apply the changes from fd6e6f9.
Run npm i.
Observe that the first installation succeeds but displays several warnings.
Run npm i again.
Observe that the installation fails with the error outlined in the issue's description.

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

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

kevin940726 · 2022-12-12T09:11:53Z

@storybook/addon-knobs has been deprecated. I guess we'll have to migrate it to @storybook/addon-controls instead. A temporary solution will be to set legacy-peer-deps to true in the .npmrc config.

mirka · 2022-12-13T18:33:36Z

I guess we'll have to migrate it to @storybook/addon-controls instead.

We've been chipping away at this for a while (#35665) and we're down to just 11 more files. I'll try and get this prioritized so we can get it over the finish line. Please go with the temporary solution if it's urgent though.

ciampo · 2023-01-17T15:21:26Z

As of #47152, the @storybok/addon-knobs dependency has been removed from the repo 🎉

@fluiddot , can you still replicate the issue or has it been fixed?

fluiddot · 2023-01-18T15:46:47Z

As of #47152, the @storybok/addon-knobs dependency has been removed from the repo 🎉

@fluiddot , can you still replicate the issue or has it been fixed?

Thanks for the call out @ciampo 🙇 , I haven't tested this after the recent fixes. Let me do another check and get back here with the results.

fluiddot · 2023-01-24T15:40:03Z

I tried to install the dependencies again with npm 8 but found new issues:

`@testing-library/react-native` dependency

Error:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: @testing-library/react-native@11.3.0
npm ERR! Found: jest@27.4.5
npm ERR! node_modules/jest
npm ERR!   dev jest@"27.4.5" from the root project
npm ERR!   peer jest@"^27.0.0" from jest-watch-typeahead@1.0.0
npm ERR!   node_modules/jest-watch-typeahead
npm ERR!     dev jest-watch-typeahead@"1.0.0" from the root project
npm ERR!   7 more (snapshot-diff, @wordpress/e2e-test-utils, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peerOptional jest@">=28.0.0" from @testing-library/react-native@11.3.0
npm ERR! node_modules/@testing-library/react-native
npm ERR!   dev @testing-library/react-native@"11.3.0" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: jest@29.4.0
npm ERR! node_modules/jest
npm ERR!   peerOptional jest@">=28.0.0" from @testing-library/react-native@11.3.0
npm ERR!   node_modules/@testing-library/react-native
npm ERR!     dev @testing-library/react-native@"11.3.0" from the root project

This can be easily fixed by simply bumping the version of the dependency to 11.5.0.

React version conflict between Gutenberg and React Native

Error:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: gutenberg@15.0.1
npm ERR! Found: react@18.2.0
npm ERR! node_modules/react
npm ERR!   dev react@"18.2.0" from the root project
npm ERR!   peer react@">=16.0.0" from @testing-library/react-native@11.5.0
npm ERR!   node_modules/@testing-library/react-native
npm ERR!     dev @testing-library/react-native@"11.5.0" from the root project
npm ERR!   28 more (@wordpress/block-directory, @wordpress/block-editor, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"18.0.0" from react-native@0.69.4
npm ERR! node_modules/react-native
npm ERR!   dev react-native@"0.69.4" from the root project
npm ERR!   peer react-native@">=0.59" from @testing-library/react-native@11.5.0
npm ERR!   node_modules/@testing-library/react-native
npm ERR!     dev @testing-library/react-native@"11.5.0" from the root project
npm ERR!   3 more (@wordpress/react-native-aztec, ...)

After fixing the issue in @testing-library/react-native dependency, I bumped into the above error. As far as I investigated, seems we use a higher version of React (18.2.0) than the one supported by React Native (18.0.0). This version was set in #45235 and didn't produce any side issues, but looks like npm 8 is more strict with the dependency resolution.

I foresee we have the following options to solve this:

Downgrade the React version in Gutenberg to 18.0.0.
Upgrade React Native to the latest version 0.71.0 as this is the one where the React dependency was updated to 18.2.0(reference).
Use --legacy-peer-deps parameter when installing the dependencies.

Probably the second one is the most optimal but we currently don't have enough bandwidth to execute another React Native upgrade in the Gutenberg Mobile project, especially as we did one a month ago. The third one I understand is a no-go because disrupts the development workflow, so we might consider going with the first one temporarily. WDYT?

cc @jsnajdr @noahtallen @tyxla @geriux as participants in #45235 PR

noahtallen · 2023-01-24T21:08:56Z

It looks like we would miss out on a lot of bug fixes: https://github.com/facebook/react/blob/main/CHANGELOG.md I'm not sure if any of these were critical to getting React working in Gutenberg, but it'd definitely be nice to have them. Out of curiosity, when would we expect to be able to do another React Native upgrade? (Though I do know react native is a huge pain to upgrade!)

I also see in this PR (#46576) that legacy-peer-deps could be enabled for the time being, just so there is a base to work off of. While not ideal in the long-run, maybe ok for now as we get everything updated and start chipping away at peer dependency issues?

All that said, in my experience with these types of projects (where we start to enforce peer dependencies), we've generally had to include some way to override some broken peer dependencies which we manually verify. For example Yarn has the .yarnrc.yml file to accomplish this, along with a "resolutions" feature and a built-in way to patch installed packages. I think pnpm has a similar feature.

I think NPM has some similar features too, so I wonder if we could override the React version required by React Native with overrides? https://docs.npmjs.com/cli/v8/configuring-npm/package-json?v=true#overrides

Obviously we'd need to test that react native works, but could be worth it in this case. There will probably be some similar packages we rely on which haven't yet declared support for React 18, or even React 17.

I guess the main downside is that you're not following what the library technically supports, but in this case, it seems like React Native is probably just very cautious rather than explicitly saying React 18.2 isn't supported.

jsnajdr · 2023-01-25T08:27:12Z

React Native did the peer dependency update from 18.0.0 to 18.2.0 in this commit. It doesn't just update the dependency, but also synchronizes many changes from React to React Native's renderer. Which is the mobile equivalent of the react-dom package.

So, our react-native situation is like using react@18.2.0 together with react-dom@18.0.0. Is that harmful? Potentially yes, but in this actual case it's not: when I look at the diff between react@18.0.0 and react@18.2.0, there are no changes at all.

How is that possible? It's because in React all the hard work is done by the react-dom package, or the react-native one. The react package is really tiny, 6kB minified, it contains code for creating elements, defines constants for various element types, and has trivial implementation of hooks that look like:

function useState(initialState) {
  var dispatcher = resolveDispatcher();
  return dispatcher.useState(initialState);
}

This code hasn't changed between 18.0.0 and 18.2.0.

So the conclusion is that we can safely override or ignore the 18.0.0 peer dependency.

Downgrade the React version in Gutenberg to 18.0.0.

This doesn't look like a good tradeoff to me: downgrading React, which has already been shipped in the Gutenberg plugin and will be shipped in Core soon, and which powers user-visible features, only to be able to upgrade NPM, which is a build tool invisible outside the Gutenberg repo and doesn't affect any published artifacts?

I'd rather either postpone the NPM upgrade, or do the React Native upgrade to unblock it.

we currently don't have enough bandwidth to execute another React Native upgrade in the Gutenberg Mobile project

Do we know what exactly the React Native upgrade from 0.69.4 to 0.71.1 would mean? Is it only a matter of the Gutenberg repo, or does it spread also to other wordpress-mobile/* projects? On our team we are kind of specialists on upgrades and migrations, so maybe we could help 🙂

fluiddot · 2023-01-25T14:54:44Z

Thanks @noahtallen @jsnajdr for checking this, I really appreciate it 🙇 .

I also see in this PR (#46576) that legacy-peer-deps could be enabled for the time being, just so there is a base to work off of. While not ideal in the long-run, maybe ok for now as we get everything updated and start chipping away at peer dependency issues?

Yep, this could be a temporary solution until we fix the dependency issues.

I think NPM has some similar features too, so I wonder if we could override the React version required by React Native with overrides? https://docs.npmjs.com/cli/v8/configuring-npm/package-json?v=true#overrides

I tried using the overrides configuration for the dependencies that failed and it worked 🎊 . So this could be a better option than using legacy-peer-deps, although it would still be a temporary solution.

So, our react-native situation is like using react@18.2.0 together with react-dom@18.0.0. Is that harmful? Potentially yes, but in this actual case it's not: when I look at the diff between react@18.0.0 and react@18.2.0, there are no changes at all.

How is that possible? It's because in React all the hard work is done by the react-dom package, or the react-native one. The react package is really tiny, 6kB minified, it contains code for creating elements, defines constants for various element types, and has trivial implementation of hooks that look like:
function useState(initialState) {
  var dispatcher = resolveDispatcher();
  return dispatcher.useState(initialState);
}
This code hasn't changed between 18.0.0 and 18.2.0.

So the conclusion is that we can safely override or ignore the 18.0.0 peer dependency.

Interesting results, thank you very much @jsnajdr for investigating this. With this information, seems that the option of overriding the dependencies would work until we provide a fix.

This doesn't look like a good tradeoff to me: downgrading React, which has already been shipped in the Gutenberg plugin and will be shipped in Core soon, and which powers user-visible features, only to be able to upgrade NPM, which is a build tool invisible outside the Gutenberg repo and doesn't affect any published artifacts?

Good point, let's discard this option.

I'd rather either postpone the NPM upgrade, or do the React Native upgrade to unblock it.

Postponing NPM upgrade can't be risky as the currently supported Node version (node 14) is in maintenance and the End-of-life is April, 30th, 2023. Hence, we'd need to upgrade React Native before that date. We could try to prioritize the upgrade in the Gutenberg Mobile project but most of the bandwidth is focused on other projects, so this option can be a bit tight in the schedule.

Being this said, I'll prepare a PR as a follow-up on these comments and to address this issue using the option of overriding the dependencies.

Following my previous comment, I'd like to make an update because I spotted more issues when installing the dependencies:

`@testing-library/react-native`

Error logs

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: @testing-library/react-native@11.3.0
npm ERR! Found: jest@27.4.5
npm ERR! node_modules/jest
npm ERR!   dev jest@"27.4.5" from the root project
npm ERR!   peer jest@"^27.0.0" from jest-watch-typeahead@1.0.0
npm ERR!   node_modules/jest-watch-typeahead
npm ERR!     dev jest-watch-typeahead@"1.0.0" from the root project
npm ERR!   7 more (snapshot-diff, @wordpress/e2e-test-utils, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peerOptional jest@">=28.0.0" from @testing-library/react-native@11.3.0
npm ERR! node_modules/@testing-library/react-native
npm ERR!   dev @testing-library/react-native@"11.3.0" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: jest@29.4.0
npm ERR! node_modules/jest
npm ERR!   peerOptional jest@">=28.0.0" from @testing-library/react-native@11.3.0
npm ERR!   node_modules/@testing-library/react-native
npm ERR!     dev @testing-library/react-native@"11.3.0" from the root project

Requires jest@">=28.0.0"
Gutenberg is currently using jest@27.4.5

I see there's an ongoing effort to upgrade Jest version to 29 in #47388, so we can either downgrade the dependency @testing-library/react-native to a previous version (10.1.1) or wait to the PR to be merged.

`react-native`

Error logs

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: react-native@0.69.4
npm ERR! Found: react@18.2.0
npm ERR! node_modules/react
npm ERR!   dev react@"18.2.0" from the root project
npm ERR!   peer react@">=16.8.0" from @emotion/primitives-core@11.0.0
npm ERR!   node_modules/@emotion/primitives-core
npm ERR!     @emotion/primitives-core@"^11.0.0" from @emotion/native@11.0.0
npm ERR!     node_modules/@emotion/native
npm ERR!       dev @emotion/native@"11.0.0" from the root project
npm ERR!   83 more (@emotion/react, @emotion/styled, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"18.0.0" from react-native@0.69.4
npm ERR! node_modules/react-native
npm ERR!   dev react-native@"0.69.4" from the root project
npm ERR!   peer react-native@">=0.14.0 <1" from @emotion/native@11.0.0
npm ERR!   node_modules/@emotion/native
npm ERR!     dev @emotion/native@"11.0.0" from the root project
npm ERR!   19 more (@react-native-clipboard/clipboard, ...)
npm ERR!
npm ERR! Conflicting peer dependency: react@18.0.0
npm ERR! node_modules/react
npm ERR!   peer react@"18.0.0" from react-native@0.69.4
npm ERR!   node_modules/react-native
npm ERR!     dev react-native@"0.69.4" from the root project
npm ERR!     peer react-native@">=0.14.0 <1" from @emotion/native@11.0.0
npm ERR!     node_modules/@emotion/native
npm ERR!       dev @emotion/native@"11.0.0" from the root project
npm ERR!     19 more (@react-native-clipboard/clipboard, ...)

Requires react@"18.0.0"
Gutenberg is currently using react@18.2.0

As discussed above, the optimal approach for this would be to upgrade React Native to version 0.71.0. However, in the meantime, we could override the dependency as a workaround.

`storybook-source-link`

Error logs

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: storybook-source-link@2.0.3
npm ERR! Found: react@18.2.0
npm ERR! node_modules/react
npm ERR!   dev react@"18.2.0" from the root project
npm ERR!   peer react@">=16.8.0" from @emotion/primitives-core@11.0.0
npm ERR!   node_modules/@emotion/primitives-core
npm ERR!     @emotion/primitives-core@"^11.0.0" from @emotion/native@11.0.0
npm ERR!     node_modules/@emotion/native
npm ERR!       dev @emotion/native@"11.0.0" from the root project
npm ERR!   84 more (@emotion/react, @emotion/styled, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peerOptional react@"^16.8.0 || ^17.0.0" from storybook-source-link@2.0.3
npm ERR! node_modules/storybook-source-link
npm ERR!   dev storybook-source-link@"2.0.3" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: react@17.0.2
npm ERR! node_modules/react
npm ERR!   peerOptional react@"^16.8.0 || ^17.0.0" from storybook-source-link@2.0.3
npm ERR!   node_modules/storybook-source-link
npm ERR!     dev storybook-source-link@"2.0.3" from the root project

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: storybook-source-link@2.0.3
npm ERR! Found: react-dom@18.2.0
npm ERR! node_modules/react-dom
npm ERR!   dev react-dom@"18.2.0" from the root project
npm ERR!   peer react-dom@">=16.8.0" from @floating-ui/react-dom@1.0.0
npm ERR!   node_modules/@floating-ui/react-dom
npm ERR!     @floating-ui/react-dom@"^1.0.0" from @wordpress/components@23.2.0
npm ERR!     packages/components
npm ERR!       @wordpress/components@23.2.0
npm ERR!       node_modules/@wordpress/components
npm ERR!         @wordpress/components@"file:packages/components" from the root project
npm ERR!         17 more (@wordpress/block-directory, @wordpress/block-editor, ...)
npm ERR!   50 more (@react-spring/web, @storybook/addon-a11y, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peerOptional react-dom@"^16.8.0 || ^17.0.0" from storybook-source-link@2.0.3
npm ERR! node_modules/storybook-source-link
npm ERR!   dev storybook-source-link@"2.0.3" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: react-dom@17.0.2
npm ERR! node_modules/react-dom
npm ERR!   peerOptional react-dom@"^16.8.0 || ^17.0.0" from storybook-source-link@2.0.3
npm ERR!   node_modules/storybook-source-link
npm ERR!     dev storybook-source-link@"2.0.3" from the root project

Requires react@"^16.8.0 || ^17.0.0"
Gutenberg is currently using react@18.2.0
Requires react-dom@"^16.8.0 || ^17.0.0"
Gutenberg is currently using react-dom@18.2.0

Looks like this issue could be resolved by upgrading the dependency to version 2.0.4 that allows React 18 as a peer dependency.

cc @mirka as author of the PR that introduced this dependency, in case we could bump the version. Thanks!

Other warnings

Warning logs

npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @mdx-js/react@1.6.22
npm WARN Found: react@18.2.0
npm WARN node_modules/react
npm WARN   dev react@"18.2.0" from the root project
npm WARN   86 more (@emotion/primitives-core, @emotion/react, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react@"^16.13.1 || ^17.0.0" from @mdx-js/react@1.6.22
npm WARN node_modules/@mdx-js/react
npm WARN   @mdx-js/react@"^1.6.22" from @storybook/addon-docs@6.5.7
npm WARN   node_modules/@storybook/addon-docs
npm WARN
npm WARN Conflicting peer dependency: react@17.0.2
npm WARN node_modules/react
npm WARN   peer react@"^16.13.1 || ^17.0.0" from @mdx-js/react@1.6.22
npm WARN   node_modules/@mdx-js/react
npm WARN     @mdx-js/react@"^1.6.22" from @storybook/addon-docs@6.5.7
npm WARN     node_modules/@storybook/addon-docs
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: ajv-keywords@3.4.1
npm WARN Found: ajv@8.7.1
npm WARN node_modules/ajv
npm WARN   dev ajv@"8.7.1" from the root project
npm WARN   4 more (ajv-draft-04, ajv-errors, ajv-formats, table)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer ajv@"^6.9.1" from ajv-keywords@3.4.1
npm WARN node_modules/ajv-keywords
npm WARN   ajv-keywords@"^3.4.1" from webpack@4.46.0
npm WARN   node_modules/@storybook/core-common/node_modules/webpack
npm WARN   4 more (webpack, webpack, schema-utils, schema-utils)
npm WARN
npm WARN Conflicting peer dependency: ajv@6.12.6
npm WARN node_modules/ajv
npm WARN   peer ajv@"^6.9.1" from ajv-keywords@3.4.1
npm WARN   node_modules/ajv-keywords
npm WARN     ajv-keywords@"^3.4.1" from webpack@4.46.0
npm WARN     node_modules/@storybook/core-common/node_modules/webpack
npm WARN     4 more (webpack, webpack, schema-utils, schema-utils)
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: react-element-to-jsx-string@14.3.4
npm WARN Found: react@18.2.0
npm WARN node_modules/react
npm WARN   dev react@"18.2.0" from the root project
npm WARN   86 more (@emotion/primitives-core, @emotion/react, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react@"^0.14.8 || ^15.0.1 || ^16.0.0 || ^17.0.1" from react-element-to-jsx-string@14.3.4
npm WARN node_modules/react-element-to-jsx-string
npm WARN   react-element-to-jsx-string@"^14.3.4" from @storybook/react@6.5.7
npm WARN   node_modules/@storybook/react
npm WARN
npm WARN Conflicting peer dependency: react@17.0.2
npm WARN node_modules/react
npm WARN   peer react@"^0.14.8 || ^15.0.1 || ^16.0.0 || ^17.0.1" from react-element-to-jsx-string@14.3.4
npm WARN   node_modules/react-element-to-jsx-string
npm WARN     react-element-to-jsx-string@"^14.3.4" from @storybook/react@6.5.7
npm WARN     node_modules/@storybook/react
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: react-element-to-jsx-string@14.3.4
npm WARN Found: react-dom@18.2.0
npm WARN node_modules/react-dom
npm WARN   dev react-dom@"18.2.0" from the root project
npm WARN   52 more (@floating-ui/react-dom, @react-spring/web, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react-dom@"^0.14.8 || ^15.0.1 || ^16.0.0 || ^17.0.1" from react-element-to-jsx-string@14.3.4
npm WARN node_modules/react-element-to-jsx-string
npm WARN   react-element-to-jsx-string@"^14.3.4" from @storybook/react@6.5.7
npm WARN   node_modules/@storybook/react
npm WARN
npm WARN Conflicting peer dependency: react-dom@17.0.2
npm WARN node_modules/react-dom
npm WARN   peer react-dom@"^0.14.8 || ^15.0.1 || ^16.0.0 || ^17.0.1" from react-element-to-jsx-string@14.3.4
npm WARN   node_modules/react-element-to-jsx-string
npm WARN     react-element-to-jsx-string@"^14.3.4" from @storybook/react@6.5.7
npm WARN     node_modules/@storybook/react
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: react-inspector@5.1.1
npm WARN Found: react@18.2.0
npm WARN node_modules/react
npm WARN   dev react@"18.2.0" from the root project
npm WARN   86 more (@emotion/primitives-core, @emotion/react, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react@"^16.8.4 || ^17.0.0" from react-inspector@5.1.1
npm WARN node_modules/react-inspector
npm WARN   react-inspector@"^5.1.0" from @storybook/addon-actions@6.5.7
npm WARN   node_modules/@storybook/addon-actions
npm WARN
npm WARN Conflicting peer dependency: react@17.0.2
npm WARN node_modules/react
npm WARN   peer react@"^16.8.4 || ^17.0.0" from react-inspector@5.1.1
npm WARN   node_modules/react-inspector
npm WARN     react-inspector@"^5.1.0" from @storybook/addon-actions@6.5.7
npm WARN     node_modules/@storybook/addon-actions
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: webpack-filter-warnings-plugin@1.2.1
npm WARN Found: webpack@5.65.0
npm WARN node_modules/webpack
npm WARN   dev webpack@"5.65.0" from the root project
npm WARN   35 more (@pmmmwh/react-refresh-webpack-plugin, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer webpack@"^2.0.0 || ^3.0.0 || ^4.0.0" from webpack-filter-warnings-plugin@1.2.1
npm WARN node_modules/webpack-filter-warnings-plugin
npm WARN   webpack-filter-warnings-plugin@"^1.2.1" from @storybook/builder-webpack4@6.5.7
npm WARN   node_modules/@storybook/builder-webpack4
npm WARN
npm WARN Conflicting peer dependency: webpack@4.46.0
npm WARN node_modules/webpack
npm WARN   peer webpack@"^2.0.0 || ^3.0.0 || ^4.0.0" from webpack-filter-warnings-plugin@1.2.1
npm WARN   node_modules/webpack-filter-warnings-plugin
npm WARN     webpack-filter-warnings-plugin@"^1.2.1" from @storybook/builder-webpack4@6.5.7
npm WARN     node_modules/@storybook/builder-webpack4

I undestand that these warnings won't block using npm 8 but it would be interesting to address them in the future.

Affected dependencies:

@mdx-js/react
ajv-keywords
react-element-to-jsx-string
react-inspector
webpack-filter-warnings-plugin

mirka · 2023-01-25T15:41:03Z

storybook-source-link

Done in #47425 👍

This was referenced Dec 9, 2022

Dependencies referenced from a GitHub repository can't be installed using npm 8 #40540

Closed

Allow developing Gutenberg with NPM v7 and v8 #46400

Closed

kathrynwp added Storybook Storybook and its stories for components [Type] Bug An existing feature does not function as intended labels Dec 12, 2022

mirka added this to Inbox (needs triage) 📬 in WordPress Components via automation Dec 13, 2022

This was referenced Dec 13, 2022

ToolTip: Remove knobs in stories #46515

Merged

Icon: Remove knobs in stories #46517

Merged

This was referenced Dec 23, 2022

ColorPicker: Remove knobs in stories #46772

Merged

Guide: Remove knobs in stories #46773

Merged

ResizableBox: Remove knobs in stories #46774

Merged

ciampo mentioned this issue Jan 6, 2023

ItemGroup: migrate Storybook to controls, refactor to TypeScript #46945

Merged

This was referenced Jan 6, 2023

Notice: Remove knobs in stories #46956

Merged

SlotFill: Remove knobs in stories #46957

Merged

Panel: Remove knobs from stories #46958

Merged

This was referenced Jan 12, 2023

Toolbar: unify Storybook examples under one file, migrate from knobs to controls #47117

Merged

DropdownMenu: convert Storybook examples from knobs to controls #47149

Merged

Remove @storybook/addon-knobs from the repository #47152

Merged

mirka mentioned this issue Jan 25, 2023

Storybook: Update storybook-source-link dep #47425

Merged

fluiddot mentioned this issue Feb 2, 2023

Fix dependency conflicts to allow using NPM 7 and 8 #47712

Closed

mirka moved this from Inbox (needs triage) 📬 to Done 🎉 in WordPress Components Feb 6, 2023

fluiddot added this to Triage in Mobile Apps via automation Feb 27, 2023

fluiddot mentioned this issue Feb 28, 2023

[Discussion] Upgrade node and npm to latest LTS versions #48588

Closed

kevin940726 mentioned this issue Mar 9, 2023

Upgrade Node.js and npm to v18 and v9 #48950

Closed

fluiddot mentioned this issue Mar 10, 2023

Override React dependency of React Native #48990

Closed

jhnstn moved this from Triage to In progress in Mobile Apps Mar 27, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Dependency conflict when installing dependencies using npm 8 #46443

Dependency conflict when installing dependencies using npm 8 #46443

fluiddot commented Dec 9, 2022 •

edited by gziolo

kevin940726 commented Dec 12, 2022

mirka commented Dec 13, 2022

ciampo commented Jan 17, 2023

fluiddot commented Jan 18, 2023

fluiddot commented Jan 24, 2023

noahtallen commented Jan 24, 2023 •

edited

jsnajdr commented Jan 25, 2023

fluiddot commented Jan 25, 2023 •

edited

mirka commented Jan 25, 2023

Dependency conflict when installing dependencies using npm 8 #46443

Dependency conflict when installing dependencies using npm 8 #46443

Comments

fluiddot commented Dec 9, 2022 • edited by gziolo

Description

Step-by-step reproduction instructions

Screenshots, screen recording, code snippet

Environment info

Please confirm that you have searched existing issues in the repo.

Please confirm that you have tested with all plugins deactivated except Gutenberg.

kevin940726 commented Dec 12, 2022

mirka commented Dec 13, 2022

ciampo commented Jan 17, 2023

fluiddot commented Jan 18, 2023

fluiddot commented Jan 24, 2023

@testing-library/react-native dependency

React version conflict between Gutenberg and React Native

noahtallen commented Jan 24, 2023 • edited

jsnajdr commented Jan 25, 2023

fluiddot commented Jan 25, 2023 • edited

@testing-library/react-native

react-native

storybook-source-link

Other warnings

mirka commented Jan 25, 2023

fluiddot commented Dec 9, 2022 •

edited by gziolo

`@testing-library/react-native` dependency

noahtallen commented Jan 24, 2023 •

edited

fluiddot commented Jan 25, 2023 •

edited

`@testing-library/react-native`

`react-native`

`storybook-source-link`