does someone encounter this problem while installing - react-messenger-customer-chat?
[Next.js, tailwind]
Here is github repo: https://github.com/Yoctol/react-messenger-customer-chat
package.json
{
"name": "with-tailwindcss",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
},
"dependencies": {
"#headlessui/react": "^1.2.0",
"graphql": "^15.5.0",
"graphql-request": "^3.4.0",
"he": "^1.2.0",
"mdx-bundler": "^4.1.0",
"next": "^10.2.3",
"next-themes": "^0.0.14",
"react": "^17.0.2",
"react-dom": "^17.0.1",
"react-icons": "^4.2.0",
"sitemap": "^7.0.0"
},
"devDependencies": {
"autoprefixer": "^10.2.6",
"postcss": "^8.3.0",
"tailwindcss": "^2.1.4"
}
}
What am I supposed to do right now?
edit1:
npm i -S react#^16.x.x
error:
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! Found: react#16.14.0
npm ERR! node_modules/react
npm ERR! react#"16.x.x" from the root project
npm ERR! peer react#">=16" from #headlessui/react#1.2.0
npm ERR! node_modules/#headlessui/react
npm ERR! #headlessui/react#"^1.2.0" from the root project
npm ERR! 6 more (#next/react-dev-overlay, next, next-themes, react-icons, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react#"17.0.2" from react-dom#17.0.2
npm ERR! node_modules/react-dom
npm ERR! peer react-dom#"^16.9.0 || ^17" from #next/react-dev-overlay#10.2.3
npm ERR! node_modules/#next/react-dev-overlay
npm ERR! #next/react-dev-overlay#"10.2.3" from next#10.2.3
npm ERR! node_modules/next
npm ERR! peer next#"*" from next-themes#0.0.14
npm ERR! node_modules/next-themes
npm ERR! 1 more (the root project)
npm ERR! peer react-dom#"^16.6.0 || ^17" from next#10.2.3
npm ERR! node_modules/next
npm ERR! peer next#"*" from next-themes#0.0.14
npm ERR! node_modules/next-themes
npm ERR! next-themes#"^0.0.14" from the root project
npm ERR! 1 more (the root project)
npm ERR! 2 more (next-themes, 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\bubuq3\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\bubuq3\AppData\Local\npm-cache\_logs\2021-06-14T11_30_57_998Z-debug.log
So I now I need older versio of next-themes and react-dom etc?
The problem is here:
npm ERR! node_modules/react
npm ERR! react#"^17.0.2" from the root project
npm ERR! Could not resolve dependency:
npm ERR! peer react#"^0.14.0 || ^15.0.0-0 || ^16.0.0-0" from react-messenger-customer-chat#0.8.0
You have react v.17 installed, but react-messenger-customer-chat requires version 15 or 16. You could install react 16 like this for example:
npm i -S react#^16.x.x
Related
I had been attempting to update dependencies on an old project recently. Within my package.json file - I outline my npm and node version, as well as the dependencies I'm using:
"engines": {
"npm": "9.x",
"node": "14.x"
},
"dependencies": {
"isomorphic-fetch": "^3.0.0",
"jquery": "^3.3.1",
"react": "^16.5.2",
"react-dom": "^16.5.2",
"react-google-charts": "^1.6.6",
"react-scripts": "^2.1.3",
"react-select": "^1.3.0",
"react-toggle-display": "^2.2.0",
"react-tooltip": "^3.8.4",
"react-transition-group": "^4.4.5",
"survey-react": "^0.12.36"
}
When I run npm install; however, I'm met with a litany of errors regarding the packages I'm using.
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: react-transition-group#4.4.5
npm ERR! Found: react#16.5.2
npm ERR! node_modules/react
npm ERR! react#"^16.5.2" from the root project
npm ERR! peer react#"^16.0.0" from react-dom#16.5.2
npm ERR! node_modules/react-dom
npm ERR! react-dom#"^16.5.2" from the root project
npm ERR! peer react-dom#">=15.0.0" from react-google-charts#1.6.6
npm ERR! node_modules/react-google-charts
npm ERR! react-google-charts#"^1.6.6" from the root project
npm ERR! 2 more (react-select, react-tooltip)
npm ERR! 4 more (react-google-charts, react-input-autosize, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react#">=16.6.0" from react-transition-group#4.4.5
npm ERR! node_modules/react-transition-group
npm ERR! react-transition-group#"^4.4.5" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: react#18.2.0
npm ERR! node_modules/react
npm ERR! peer react#">=16.6.0" from react-transition-group#4.4.5
npm ERR! node_modules/react-transition-group
npm ERR! react-transition-group#"^4.4.5" from the root project
I'm unsure what steps I should take to resolve this. Is this an issue with the version of react I'm currently using?
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: react-native#0.70.5
npm ERR! Found: react#18.2.0
npm ERR! node_modules/react
npm ERR! peer react#"^18.2.0" from react-dom#18.2.0
npm ERR! node_modules/react-dom
npm ERR! react-dom#"^18.2.0" from the root project
npm ERR! peer react-dom#">=15.0.1" from react-base64-downloader#2.1.7
npm ERR! node_modules/react-base64-downloader
npm ERR! react-base64-downloader#"" from the root project
npm ERR! peer react#">=16.13.1" from react-native-permissions#3.6.1
npm ERR! node_modules/react-native-permissions
npm ERR! react-native-permissions#"^3.6.1" from the root project
npm ERR! 5 more (react-native-webview, react-shallow-renderer, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react#"18.1.0" from react-native#0.70.5
npm ERR! node_modules/react-native
npm ERR! peer react-native#"" from react-native-android-permissions#1.0.2
npm ERR! node_modules/react-native-android-permissions
npm ERR! react-native-android-permissions#"^1.0.2" from the root project
npm ERR! peer react-native#"" from react-native-fs#2.20.0
npm ERR! node_modules/react-native-fs
npm ERR! react-native-fs#"^2.20.0" from the root project
npm ERR! 4 more (react-native-permissions, react-native-root-toast, ...)
npm ERR!
npm ERR! Conflicting peer dependency: react#18.1.0
npm ERR! node_modules/react
npm ERR! peer react#"18.1.0" from react-native#0.70.5
npm ERR! node_modules/react-native
npm ERR! peer react-native#"" from react-native-android-permissions#1.0.2
npm ERR! node_modules/react-native-android-permissions
npm ERR! react-native-android-permissions#"^1.0.2" from the root project
npm ERR! peer react-native#"*" from react-native-fs#2.20.0
npm ERR! node_modules/react-native-fs
npm ERR! react-native-fs#"^2.20.0" from the root project
npm ERR! 4 more (react-native-permissions, react-native-root-toast, ...)
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.
How to fix this issue ?.
I am using react#18.2.0, react-dom#18.2.0
& this is my package.json
//package.json//
"dependencies": {
"expo": "~47.0.3",
"expo-file-system": "^15.1.1",
"expo-media-library": "^15.0.0",
"expo-status-bar": "~1.4.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-native": "0.70.5",
"react-native-android-permissions": "^1.0.2",
"react-native-fetch-blob": "^0.10.8",
"react-native-fs": "^2.20.0",
"react-native-permissions": "^3.6.1",
"react-native-root-siblings": "^4.1.1",
"react-native-root-toast": "^3.3.1",
"react-native-webview": "^11.23.1",
"rn-fetch-blob": "^0.12.0"
}
I have this error, I am confused, should I upgrade or change version of npm?, I just want to run my app using npm install I tried npm install --legacy-peer-deps and it works but I doubt it will be a bigger problem in the future development, especially rejecting the unsupported libraries, what should I do?, yet I need all of this libraries, should I change it? need help
npm install
D:\mobile\finds-mobile>npm install
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: #typescript-eslint/eslint-plugin#4.33.0
npm WARN Found: eslint#8.12.0
npm WARN node_modules/eslint
npm WARN dev eslint#"^8.12.0" from the root project
npm WARN 11 more (#react-native-community/eslint-config, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer eslint#"^5.0.0 || ^6.0.0 || ^7.0.0" from #typescript-eslint/eslint-plugin#4.33.0
npm WARN node_modules/#typescript-eslint/eslint-plugin
npm WARN #typescript-eslint/eslint-plugin#"^4.22.1" from #react-native-community/eslint-config#3.0.1
npm WARN node_modules/#react-native-community/eslint-config
npm WARN
npm WARN Conflicting peer dependency: eslint#7.32.0
npm WARN node_modules/eslint
npm WARN peer eslint#"^5.0.0 || ^6.0.0 || ^7.0.0" from #typescript-eslint/eslint-plugin#4.33.0
npm WARN node_modules/#typescript-eslint/eslint-plugin
npm WARN #typescript-eslint/eslint-plugin#"^4.22.1" from #react-native-community/eslint-config#3.0.1
npm WARN node_modules/#react-native-community/eslint-config
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: #typescript-eslint/parser#4.33.0
npm WARN Found: eslint#8.12.0
npm WARN node_modules/eslint
npm WARN dev eslint#"^8.12.0" from the root project
npm WARN 11 more (#react-native-community/eslint-config, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer eslint#"^5.0.0 || ^6.0.0 || ^7.0.0" from #typescript-eslint/parser#4.33.0
npm WARN node_modules/#typescript-eslint/parser
npm WARN #typescript-eslint/parser#"^4.22.1" from #react-native-community/eslint-config#3.0.1
npm WARN node_modules/#react-native-community/eslint-config
npm WARN 1 more (#typescript-eslint/eslint-plugin)
npm WARN
npm WARN Conflicting peer dependency: eslint#7.32.0
npm WARN node_modules/eslint
npm WARN peer eslint#"^5.0.0 || ^6.0.0 || ^7.0.0" from #typescript-eslint/parser#4.33.0
npm WARN node_modules/#typescript-eslint/parser
npm WARN #typescript-eslint/parser#"^4.22.1" from #react-native-community/eslint-config#3.0.1
npm WARN node_modules/#react-native-community/eslint-config
npm WARN 1 more (#typescript-eslint/eslint-plugin)
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: eslint-plugin-react-native#3.11.0
npm WARN Found: eslint#8.12.0
npm WARN node_modules/eslint
npm WARN dev eslint#"^8.12.0" from the root project
npm WARN 11 more (#react-native-community/eslint-config, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer eslint#"^3.17.0 || ^4 || ^5 || ^6 || ^7" from eslint-plugin-react-native#3.11.0
npm WARN node_modules/eslint-plugin-react-native
npm WARN eslint-plugin-react-native#"^3.10.0" from #react-native-community/eslint-config#3.0.1
npm WARN node_modules/#react-native-community/eslint-config
npm WARN
npm WARN Conflicting peer dependency: eslint#7.32.0
npm WARN node_modules/eslint
npm WARN peer eslint#"^3.17.0 || ^4 || ^5 || ^6 || ^7" from eslint-plugin-react-native#3.11.0
npm WARN node_modules/eslint-plugin-react-native
npm WARN eslint-plugin-react-native#"^3.10.0" from #react-native-community/eslint-config#3.0.1
npm WARN node_modules/#react-native-community/eslint-config
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: react-dom#18.2.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! peer react#">=16.x" from #fortawesome/react-fontawesome#0.1.18
npm ERR! node_modules/#fortawesome/react-fontawesome
npm ERR! #fortawesome/react-fontawesome#"^0.1.14" from style-components#0.1.0
npm ERR! node_modules/style-components
npm ERR! style-components#"^0.1.0" from the root project
npm ERR! 58 more (#haskkor/react-native-pincode, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react#"^18.2.0" from react-dom#18.2.0
npm ERR! node_modules/react-dom
npm ERR! peer react-dom#">=16.6.0" from react-transition-group#4.4.2
npm ERR! node_modules/react-transition-group
npm ERR! react-transition-group#"^4.4.1" from style-components#0.1.0
npm ERR! node_modules/style-components
npm ERR! style-components#"^0.1.0" from the root project
npm ERR! peer react-dom#">=16.8.0" from style-components#0.1.0
npm ERR! node_modules/style-components
npm ERR! style-components#"^0.1.0" from the root project
npm ERR! 1 more (styled-components)
npm ERR!
npm ERR! Conflicting peer dependency: react#18.2.0
npm ERR! node_modules/react
npm ERR! peer react#"^18.2.0" from react-dom#18.2.0
npm ERR! node_modules/react-dom
npm ERR! peer react-dom#">=16.6.0" from react-transition-group#4.4.2
npm ERR! node_modules/react-transition-group
npm ERR! react-transition-group#"^4.4.1" from style-components#0.1.0
npm ERR! node_modules/style-components
npm ERR! style-components#"^0.1.0" from the root project
npm ERR! peer react-dom#">=16.8.0" from style-components#0.1.0
npm ERR! node_modules/style-components
npm ERR! style-components#"^0.1.0" from the root project
npm ERR! 1 more (styled-components)
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\Macky\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\Macky\AppData\Local\npm-cache\_logs\2022-07-25T01_01_52_241Z-debug-0.log
package.json
{
"name": "test",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"#haskkor/react-native-pincode": "^1.22.6",
"#react-native-async-storage/async-storage": "^1.17.3",
"#react-native-community/google-signin": "^5.0.0",
"#react-native-community/netinfo": "^8.2.0",
"#react-native-firebase/app": "^14.7.0",
"#react-native-firebase/auth": "^14.7.0",
"#react-native-firebase/firestore": "^14.7.0",
"#react-native-firebase/storage": "^14.7.0",
"#react-native-masked-view/masked-view": "^0.2.6",
"#react-navigation/bottom-tabs": "^6.3.1",
"#react-navigation/drawer": "^6.4.1",
"#react-navigation/native": "^6.0.10",
"#react-navigation/stack": "^6.2.1",
"moment": "^2.29.1",
"npm": "^8.6.0",
"react": "17.0.2",
"react-native": "0.68.0",
"react-native-action-button": "^2.8.5",
"react-native-camera": "^4.2.1",
"react-native-fbsdk": "^3.0.0",
"react-native-gesture-handler": "^2.3.2",
"react-native-gifted-chat": "^0.16.3",
"react-native-image-crop-picker": "^0.37.3",
"react-native-keychain": "^8.0.0",
"react-native-linear-gradient": "^2.5.6",
"react-native-onboarding-swiper": "^1.2.0",
"react-native-qrcode-scanner": "^1.5.5",
"react-native-reanimated": "^2.5.0",
"react-native-safe-area-context": "^4.2.4",
"react-native-screens": "^3.13.1",
"react-native-skeleton-placeholder": "^5.0.0",
"react-native-svg": "^12.3.0",
"react-native-timeline-flatlist": "^0.8.0",
"react-native-timeline-listview": "^0.2.3",
"react-native-touch-id": "^4.4.1",
"react-native-vector-icons": "^9.1.0",
"reanimated-bottom-sheet": "^1.0.0-alpha.22",
"style-components": "^0.1.0",
"styled-components": "^5.3.5",
"victory-native": "^36.3.1"
},
"devDependencies": {
"#babel/core": "^7.17.8",
"#babel/runtime": "^7.17.8",
"#react-native-community/cli": "^7.0.3",
"#react-native-community/eslint-config": "^3.0.1",
"babel-jest": "^27.5.1",
"eslint": "^8.12.0",
"jest": "^27.5.1",
"metro-react-native-babel-preset": "^0.70.0",
"react-test-renderer": "17.0.2"
},
"jest": {
"preset": "react-native"
},
"rnpm": {
"assets": [
"./assets/fonts"
]
}
}
Perform the Below steps:
delete node_modules folder
delete package-lock.json file
install new version of dev Dependencies.
npm install
Hope it will help you!
---------ISSUE RESOLVED - SOLUTION AT THE END OF QUESTION--------
I was trying to install Material UI Icons in my Netflix-Clone React.js project with npm, but I got the following error -
PS D:\REACT Projects\netflix> npm i #mui/icons-material #mui/material
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: netflix#0.1.0
npm ERR! Found: react#18.0.0
npm ERR! node_modules/react
npm ERR! react#"^18.0.0" from the root project
npm ERR! peer react#">=16.8.0" from #emotion/react#11.8.2
npm ERR! node_modules/#emotion/react
npm ERR! peerOptional #emotion/react#"^11.5.0" from #mui/material#5.5.3
npm ERR! node_modules/#mui/material
npm ERR! #mui/material#"^5.5.3" from the root project
npm ERR! 1 more (#mui/icons-material)
npm ERR! peer #emotion/react#"^11.0.0-rc.0" from #emotion/styled#11.8.1
npm ERR! node_modules/#emotion/styled
npm ERR! peerOptional #emotion/styled#"^11.3.0" from #mui/material#5.5.3
npm ERR! node_modules/#mui/material
npm ERR! #mui/material#"^5.5.3" from the root project
npm ERR! 1 more (#mui/icons-material)
npm ERR! 1 more (#emotion/styled)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react#"^17.0.0" from #mui/material#5.5.3
npm ERR! node_modules/#mui/material
npm ERR! #mui/material#"^5.5.3" from the root project
npm ERR! peer #mui/material#"^5.0.0" from #mui/icons-material#5.5.1
npm ERR! node_modules/#mui/icons-material
npm ERR! #mui/icons-material#"^5.5.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.
Below is my package.json file -
{
"name": "netflix",
"version": "0.1.0",
"private": true,
"dependencies": {
"#mui/icons-material": "^5.5.1",
"#mui/material": "^5.5.3",
"#testing-library/jest-dom": "^5.16.3",
"#testing-library/react": "^13.0.0",
"#testing-library/user-event": "^14.0.4",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-scripts": "5.0.0",
"sass": "^1.49.10",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
I saw a stackoverflow post with similar issue, and tried implementing the solutions mentioned there, but was unsuccessful.
At first, I retried this command with --force -
npm i #mui/icons-material #mui/material --force
This allowed me to install the MUI Icons package without any error, however, I faced numerous errors when I tried to use the icons in my project.
Next, I changed the react and react-dom versions to 16.8.0 in the package.json file, and hit npm install. However, this time also I got the following error -
PS D:\REACT Projects\netflix> npm install
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: netflix#0.1.0
npm ERR! Found: react#16.14.0
npm ERR! node_modules/react
npm ERR! react#"^16.8.0" from the root project
npm ERR! peer react#">=16.8.0" from #emotion/react#11.8.2
npm ERR! node_modules/#emotion/react
npm ERR! peerOptional #emotion/react#"^11.5.0" from #mui/material#5.5.3
npm ERR! node_modules/#mui/material
npm ERR! #mui/material#"^5.5.3" from the root project
npm ERR! 1 more (#mui/icons-material)
npm ERR! peer #emotion/react#"^11.0.0-rc.0" from #emotion/styled#11.8.1
npm ERR! node_modules/#emotion/styled
npm ERR! peerOptional #emotion/styled#"^11.3.0" from #mui/material#5.5.3
npm ERR! node_modules/#mui/material
npm ERR! #mui/material#"^5.5.3" from the root project
npm ERR! 1 more (#mui/icons-material)
npm ERR! 1 more (#emotion/styled)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react#"^17.0.0" from #mui/material#5.5.3
npm ERR! node_modules/#mui/material
npm ERR! #mui/material#"^5.5.3" from the root project
npm ERR! peer #mui/material#"^5.0.0" from #mui/icons-material#5.5.1
npm ERR! node_modules/#mui/icons-material
npm ERR! #mui/icons-material#"^5.5.1" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
I honestly don't know what to do now. I thought there would be a better solution available on the internet, but everywhere I see the same answers, either to use --force/--legacy-peer-deps or to downgrade my react/react-dom version. As explained above, none of these options are working.
Is there any better solution to this? I'm honestly surprised that such a well-known package would have this many problems while installing.
EDIT - Issue Resolved
Thanks to #ckesplin's help, it finally worked. I followed the below steps -
Executed npx create-react-app netflix.
Changed react and react-dom version to 17.0.0 from 18.0.0.
Deleted package-lock.json file and node_modules folder.
Then hit npm install.
Executed npm i #mui/icons-material #mui/material... it installed successfully.
However, while using an icon, I again got a bunch of errors for Module not found: Can't resolve #emotion/styled. So I had to npm i #emotion/react #emotion/styled
It appears by the log that #mui/material#5.5.3 requires react#"^17.0.0". (You attempted both react 18.0.0 and 16.14.0, but not ^17.0.0)
Replace the following inside of your package.json and give it the ol' npm install
"dependencies": {
...
"react": "^17.0.0",
"react-dom": "^17.0.0",
...
},
This has happened with me too you can install it using --force at the last of the command.
npm i material-ui --force
try the command with --force.
npm i #mui/icons-material #mui/material --force. this worked for me.
I am trying to install the library #material-ui/pickers by running:
npm i #material-ui/pickers
But this error shows up:
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: five#0.1.0
npm ERR! Found: react#17.0.1
npm ERR! node_modules/react
npm ERR! react#"^17.0.1" from the root project
npm ERR! peer react#"^16.8.0 || ^17.0.0" from #material-ui/core#4.11.3
npm ERR! node_modules/#material-ui/core
npm ERR! #material-ui/core#"^4.11.3" from the root project
npm ERR! peer #material-ui/core#"^4.0.0" from #material-ui/pickers#3.2.10
npm ERR! node_modules/#material-ui/pickers
npm ERR! #material-ui/pickers#"*" from the root project
npm ERR! 1 more (react-dom)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react#"^16.8.4" from #material-ui/pickers#3.2.10
npm ERR! node_modules/#material-ui/pickers
npm ERR! #material-ui/pickers#"*" 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.
Here are my package.json dependencies:
"dependencies": {
"#material-ui/core": "^4.11.3",
"#testing-library/jest-dom": "^5.11.9",
"#testing-library/react": "^11.2.3",
"#testing-library/user-event": "^12.6.2",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.1",
"web-vitals": "^0.2.4"
},
I thought there was maybe some problems in other parts of my file, so I started a create-react-app from scratch and tried again, but the same error is still occuring.
Perhaps you want to check out the new Material UI DatePicker from over here. If I understood correctly#material-ui/pickers isn't used anymore.
#material-ui/pickers required react to be 16.13.1 or higher but not to 17.xx.xx. Right now you are using React version 17.0.1. You can try to downgrade the React to version 16 and see if it works
I even had this error and what I did was simply closed my VScode because the project was open in it and again tried to install the package and guess what it works. You can try this solution hopefully it works.