Conflicting peer dependencies on React

[matt-clarson]

When running npm install I'm getting an error about conflicting peer dependencies on React.

Using Node v16.15.1
Using npm v8.11.0

There are three packages that are each conflicting with React 18 - next-query-params, react-virtualized-auto-sizer, and react-window-infinite-loader but as far as i can see none of the packages are used in any of the solutions - can they just get removed?

Sample error output:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: next-query-params@2.2.1
npm ERR! Found: react@18.1.0
npm ERR! node_modules/react
npm ERR!   react@"^18.1.0" from the root project
npm ERR!   peer react@"^17.0.2 || ^18.0.0-0" from next@12.1.6
npm ERR!   node_modules/next
npm ERR!     next@"^12.1.6" from the root project
npm ERR!     peer next@">=10.2.0" from eslint-config-next@12.1.6
npm ERR!     node_modules/eslint-config-next
npm ERR!       dev eslint-config-next@"12.1.6" from the root project
npm ERR!     1 more (next-query-params)
npm ERR!   6 more (react-dom, react-hook-form, react-query, react-window, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8.0 || ^17.0.0" from next-query-params@2.2.1
npm ERR! node_modules/next-query-params
npm ERR!   next-query-params@"^2.1.1" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: react@17.0.2
npm ERR! node_modules/react
npm ERR!   peer react@"^16.8.0 || ^17.0.0" from next-query-params@2.2.1
npm ERR!   node_modules/next-query-params
npm ERR!     next-query-params@"^2.1.1" 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!

[simoneb]

Interesting because CI is working and doing the same locally confirms the same. I'm not sure why those dependencies are there but before removing them I would try to figure out why you're getting this error which doesn't seem to be occurring elsewhere

[matt-clarson]

Using npm install --legacy-peer-deps seems to work fine.
Using pnpm install also works, although it prints a lot of warnings.
The slides and next app both build/run ok with either of these options

[simoneb]

These are workarounds but it would be good to understand why it's happening.

[matt-clarson]

if i downgrade npm to v7.24.2 (running npm i -g npm@7) the install works fine - what npm version are you/the ci using @simoneb, rather than node version?

[simoneb]

All LTS installations ship with npm@8 by default. You can see which npm comes with which node here https://nodejs.org/en/download/releases/

[matt-clarson]

@toomuchdesign and i have looked into this more - looks the underlying problem was a change introduced in npm 8.6.0 - see this issue for discussion npm/cli#4664, and here for a more recent discussion - https://answers.netlify.com/t/node-v16-15-1-npm-v8-11-0-breaks-some-builds/64367