Material UI , Next12, React 18 - reactjs

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

I do I resolve the package.jason file error?

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

How to solve the dependency error of tawk to chat npm package with react 18.1.0?

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

I can't install npm install --save react-tilt

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.

Kindly help,am having issues when I try to install material UI in my react project

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

Npm dependency issue: react 17.0.2 and "react-swipeable-views": "0.13.9"

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/

Resources