React 18 dependency clash

[lukemt]

What package has an issue

@mantine/core

Describe the bug

I get this error when I try to add mantine to my new create-react-app. Looks like @radix-ui/react-scroll-area@"^0.1.1 depends on an older react version. Using --force didn't help. Only ´--legacy-peer-deps´ did.

npm install @mantine/hooks @mantine/core
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   peer react@"*" from @testing-library/[email protected]
npm ERR!   node_modules/@testing-library/react
npm ERR!     @testing-library/react@"^12.1.4" from the root project
npm ERR!   peer react@"^18.0.0" from [email protected]
npm ERR!   node_modules/react-dom
npm ERR!     peer react-dom@"*" from @testing-library/[email protected]
npm ERR!     node_modules/@testing-library/react
npm ERR!       @testing-library/react@"^12.1.4" from the root project
npm ERR!     react-dom@"^18.0.0" from the root project
npm ERR!     2 more (@mantine/core, @mantine/styles)
npm ERR!   5 more (react-scripts, the root project, @mantine/core, ...)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8 || ^17.0" from @radix-ui/[email protected]
npm ERR! node_modules/@mantine/core/node_modules/@radix-ui/react-scroll-area
npm ERR!   @radix-ui/react-scroll-area@"^0.1.1" from @mantine/[email protected]
npm ERR!   node_modules/@mantine/core
npm ERR!     @mantine/core@"*" 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.

In which browser did the problem occur

node.js

If possible, please include a link to a codesandbox with the reproduced problem

No response

Do you know how to fix the issue

No

Are you willing to participate in fixing this issue and create a pull request with the fix

No response

Possible fix

No response

[rtivital]

npm issue only, yarn works fine

[nicolaslps]

I had the same issue and it was indeed an npm problem.
To solve this bug I updated npm to v8.6.0 npm install --g npm@latest.
After that, npm i will be overriding peer dependency and everything should work properly.

[belgattitude]

Just sharing cause it's always confusing. Only npm v7 will auto install peer-dependencies. Npm v6-8 / yarn / pnpm will do as expected.

Did a little doc here: https://gist.github.com/belgattitude/df235dc0ca3929ef2b56eb26fe6f3bed#test-1-with-peer-deps-but-not-metaoptional

So I guess nothing to do about it.

[rtivital]

Fixed in 5.0

[dethrtrns]

Faced a similar issue today while installing the notifications package, turns out it was just a dependency conflict. Removing the node_modules and package-lock.json and then running npm i, got it fixed!