I'm trying to try out the latest version of NextJS(version 12) to give my project access to SSR ServerComponents & Http streaming.
MaterialUI works fine with Next 12.0.7 and React 17 (installed using npx create-next-app#latest)
When I do
npm install react#beta react-dom#beta
Then
npm install #mui/material #mui/styled-engine-sc styled-components --save
Gives
(base) marcfielding#MBP meta-ui % npm install #mui/material #mui/styled-engine-sc styled-components --save
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: meta-ui#undefined
npm ERR! Found: react#18.0.0-rc.0-next-f2a59df48-20211208
npm ERR! node_modules/react
npm ERR! react#"^18.0.0-beta-24dd07bd2-20211208" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react#"^17.0.2" from #mui/material#5.2.3
npm ERR! node_modules/#mui/material
npm ERR! #mui/material#"*" 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!
npm ERR! See /Users/marcfielding/.npm/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/marcfielding/.npm/_logs/2021-12-09T16_48_20_688Z-debug.log
Is this just a wait for MUI to catch up? Or is there a release I can install I was following the instructions from here previously?
If you don't mind using yarn, here is a repo you can fork with the deps you want: https://github.com/MiniDeathStar/material-ui-next12-react-18
If you want to use npm, you can run:
npm install #mui/material #mui/styled-engine-sc styled-components --legacy-peer-deps
Mui shouldn't be broken by React#18. I've used them together just fine. Npm is a finicky package manager though, so I'll advocate for Yarn 3 whenever I get the chance.
Related
Why am I having the below error
PS C:\Users\USER\Desktop\Shareme\shareme_frontend> npm install #sanity/client #sanity/image-url react-google-login react-icons react-loader-spinner react-masonry-css react-router-dom uuid
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: shareme_frontend#0.1.0
npm ERR! Found: react#18.2.0
npm ERR! node_modules/react
npm ERR! react#"^18.2.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react#"^16 || ^17" from react-google-login#5.2.2
npm ERR! node_modules/react-google-login
npm ERR! react-google-login#"*" 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!
npm ERR! See C:\Users\USER\AppData\Local\npm-cache\eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\USER\AppData\Local\npm-cache\_logs\2022-06-29T15_11_18_949Z-debug-0.log
react-google-login is not updated to the latest react v18.
Either wait for an update, downgrade react to v17, or use --force flag.
npm i react-google-login --force
Note that by using --force, there is no guarantee that this package will work with v18 of react
react-google-login#5.2.2 is not compatible with react 18 version as 5.2.2 is published year ago as per npm page.
It is still looking for react version of 17 / 16.
Below error block will tell you this:
npm ERR! Could not resolve dependency:
npm ERR! peer react#"^16 || ^17" from react-google-login#5.2.2
You can downgrade your react for this specific project via :
deleting node_modules
run npm cache clean
manually update your package.json to change version of react to 17
run npm install
I am trying to install tawk to chat npm package from https://github.com/tawk/tawk-messenger-react. But I get the following error as attached below. I fear if I choose to install it forcefully, it will mess up my code-base. How can I solve it?
error log URL- https://termbin.com/4q35
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: laptop-warehouse#0.1.0
npm ERR! Found: react-dom#18.1.0
npm ERR! node_modules/react-dom
npm ERR! react-dom#"^18.1.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react-dom#"^17.0.2" from #tawk.to/tawk-messenger-react#1.0.0
npm ERR! node_modules/#tawk.to/tawk-messenger-react
npm ERR! #tawk.to/tawk-messenger-react#"*" 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!
npm ERR! See /home/somaya/.npm/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/somaya/.npm/_logs/2022-05-07T19_08_49_501Z-debug-0.log
Looks like #tawk.to/tawk-messenger-react# package isn't compatible with react-dom 18. Try using react-dom#"^17.0.2"
try running npm install <dependencyName> --force or npm install <dependencyName> --legacy-peer-deps
if that doesnt work remove node modules and install packages again
if that also doesnt work then you will have to downgrade your react and react-dom versions
If you're using react 18.1.0 you should use #tawk.to/tawk-messenger-react#2.0.1
Base on the error you provide you are using #tawk.to/tawk-messenger-react#1.0.0 which supports react 17 and conflict on version you are using.
Our messenger version 1.*.* is supporting react 17
and version 2.*.* for supporting react 18
C:\Users\JohnSam\Desktop\React\smartapp>npm install --save react-tilt
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: smartbrain2#0.1.0
npm ERR! Found: react#17.0.2
npm ERR! node_modules/react
npm ERR! react#"^17.0.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react#"^15.0.0 || ^16.0.0-beta || ^16.0.0" from react-tilt#0.1.4
npm ERR! node_modules/react-tilt
npm ERR! react-tilt#"*" 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!
npm ERR! See C:\Users\Sengk\AppData\Local\npm-cache\eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Sengk\AppData\Local\npm-cache\_logs\2021-11-30T08_35_11_646Z-debug.log
The error says that the version of React you are using (17.0.2) is not compatible with react-tilt.
When looking at the package.json file of react-tilt, you'll see it requires a peerdependency of react#^15.0.0 || ^16.0.0-beta || ^16.0.0.
NPM enforces correct peerdependencies by default since npm v7. If you realy want to, you can ignore this check and run npm install --save --legacy-peer-deps react-tilt.
Note that this means there is no guarantee this package will completely work with React 17.
I am using React 18.1.0 and had the same issue with react-tilt.
To fix it I ran this command:
npm install --save --legacy-peer-deps react-tilt
So far it is working ok.
I have faced the same issue with My React app, By installing the package using the below command helped me in solving the issue.
npm install --save --legacy-peer-deps react-tilt
I'm also using react 18 and just came across this since i've been stuck on this error but npm install --save --legacy-peer-deps react-tilt seems to make it work just fine.
npm ERR! C:\Users\sammy waweru\AppData\Local\npm-cache_logs\2021-11-19T09_14_33_601Z-debug.log
PS C:\Users\sammy waweru\Desktop\challanges\linked-in clone> npm install #mui/material #emotion/react #emotion/styled
up to date, audited 2099 packages in 41s
163 packages are looking for funding
run npm fund for details
27 vulnerabilities (16 moderate, 9 high, 2 critical)
To address all issues (including breaking changes), run:
npm audit fix --force
Run npm audit for details.
PS C:\Users\sammy waweru\Desktop\challanges\linked-in clone> npm i -S material-ui
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: click-me#0.1.0
npm ERR! Found: react#17.0.2
npm ERR! node_modules/react
npm ERR! react#"^17.0.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react#"^15.4.0 || ^16.0.0" from material-ui#0.20.2
npm ERR! node_modules/material-ui
npm ERR! material-ui#"*" 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!
npm ERR! See C:\Users\sammy waweru\AppData\Local\npm-cache\eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\sammy waweru\AppData\Local\npm-cache_logs\2021-11-19T09_16_16_671Z-debug.log
PS C:\Users\sammy waweru\Desktop\challanges\linked-in clone>
install #mui/material without the other depandencies and check if it work
You are probably using a react version that doesn't support material ui.
Try:
npm i react#latest react-scripts#latest react-dom#latest
then try re-installing material ui
I am trying to setup material dashboard from
git clone https://github.com/creativetimofficial/material-dashboard-react.git.
Using node-16
I run npm install
I get
npm ERR! While resolving: material-dashboard-react#1.10.0
npm ERR! Found: react#17.0.2
npm ERR! node_modules/react
npm ERR! react#"17.0.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react#"^15.3.0 || ^16.0.0" from react-swipeable-views#0.13.9
npm ERR! node_modules/react-swipeable-views
npm ERR! react-swipeable-views#"0.13.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.
npm ERR!
npm ERR! See /home/simha/.npm/eresolve-report.txt for a full report.
How can I resolve this.
It looks like the root project installs react#17.0.2. But "react-swipeable-views" requires version 15 or 16 of react.
Edit: As a first option, you could try updating "react-swipeable-views" to its latest version. It may possibly support React 17.
The following command will update it.
npm install react-swipeable-views#latest
If this doesn't work...
Try reducing the numbers for react in the package.json to something in the 16.x.x range, then re-run
npm install
so it will satisfy the peer dependency.
https://docs.npmjs.com/about-semantic-versioning
If you're not familiar with NPM semantic versioning, use this calculator. Enter react -> "^16.0.0" to see that it does not include 17
https://semver.npmjs.com/