Could not resolve peer peer dependency for any installation - reactjs

I am trying to run my app in dev client expo but everytime I get errors.
I have deleted node_modules folder and equally my package-lock.json but when I then run npm install I get this error:
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: project#1.0.0
npm ERR! Found: #react-navigation/native#6.1.3
npm ERR! node_modules/#react-navigation/native
npm ERR! #react-navigation/native#"^6.0.7" from the root project
npm ERR!
npm ERR! peer #react-navigation/native#"^5.0.5" from #react-navigation/stack#5.14.9
npm ERR! node_modules/#react-navigation/stack
npm ERR! #react-navigation/stack#"^5.14.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 C:\Users\alexander\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\alexander\AppData\Local\npm-cache\_logs\2023-02-05T23_08_29_526Z-debug-0.log
When I hadn't deleted `package-lock.json`, I would get this error:
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: project#1.0.0
npm WARN Found: #react-native-firebase/app#14.12.0
npm WARN node_modules/#react-native-firebase/app
npm WARN #react-native-firebase/app#"^15.1.1" from the root project
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer #react-native-firebase/app#"14.11.1" from #react-native-firebase/firestore#14.11.1
npm WARN node_modules/#react-native-firebase/firestore
npm WARN #react-native-firebase/firestore#"^14.3.0" from the root project
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: project#1.0.0
npm WARN Found: #react-native-firebase/app#14.12.0
npm WARN node_modules/#react-native-firebase/app
npm WARN #react-native-firebase/app#"^15.1.1" from the root project
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer #react-native-firebase/app#"15.6.0" from #react-native-firebase/messaging#15.6.0
npm WARN node_modules/#react-native-firebase/messaging
npm WARN #react-native-firebase/messaging#"^15.1.1" from the root project
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: #callstack/react-theme-provider#3.0.3
npm WARN Found: react#17.0.1
npm WARN node_modules/react
npm WARN react#"17.0.1" from the root project
npm WARN 128 more (#eliav2/react-native-collapsible-view, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react#"^16.3.0" from #callstack/react-theme-provider#3.0.3
npm WARN node_modules/#callstack/react-theme-provider
npm WARN #callstack/react-theme-provider#"3.0.3" from react-native-country-picker-modal#2.0.0
npm WARN node_modules/react-native-country-picker-modal
npm WARN
npm WARN Conflicting peer dependency: react#16.14.0
npm WARN node_modules/react
npm WARN peer react#"^16.3.0" from #callstack/react-theme-provider#3.0.3
npm WARN node_modules/#callstack/react-theme-provider
npm WARN #callstack/react-theme-provider#"3.0.3" from react-native-country-picker-modal#2.0.0
npm WARN node_modules/react-native-country-picker-modal
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: modal-react-native-web#0.2.0
npm WARN Found: react#17.0.1
npm WARN node_modules/react
npm WARN react#"17.0.1" from the root project
npm WARN 128 more (#eliav2/react-native-collapsible-view, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react#"16.x.x" from modal-react-native-web#0.2.0
npm WARN node_modules/modal-react-native-web
npm WARN modal-react-native-web#"0.2.0" from react-native-country-picker-modal#2.0.0
npm WARN node_modules/react-native-country-picker-modal
npm WARN
npm WARN Conflicting peer dependency: react#16.14.0
npm WARN node_modules/react
npm WARN peer react#"16.x.x" from modal-react-native-web#0.2.0
npm WARN node_modules/modal-react-native-web
npm WARN modal-react-native-web#"0.2.0" from react-native-country-picker-modal#2.0.0
npm WARN node_modules/react-native-country-picker-modal
npm WARN ERESOLVE overriding peer dependency
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: modal-react-native-web#0.2.0
npm WARN Found: react-dom#17.0.1
npm WARN node_modules/react-dom
npm WARN react-dom#"17.0.1" from the root project
npm WARN 10 more (#react-aria/combobox, #react-aria/menu, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react-dom#"16.x.x" from modal-react-native-web#0.2.0
npm WARN node_modules/modal-react-native-web
npm WARN modal-react-native-web#"0.2.0" from react-native-country-picker-modal#2.0.0
npm WARN node_modules/react-native-country-picker-modal
npm WARN
npm WARN Conflicting peer dependency: react-dom#16.14.0
npm WARN node_modules/react-dom
npm WARN peer react-dom#"16.x.x" from modal-react-native-web#0.2.0
npm WARN node_modules/modal-react-native-web
npm WARN modal-react-native-web#"0.2.0" from react-native-country-picker-modal#2.0.0
npm WARN node_modules/react-native-country-picker-modal
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: modal-react-native-web#0.2.0
npm WARN Found: react-native-web#0.17.1
npm WARN node_modules/react-native-web
npm WARN react-native-web#"0.17.1" from the root project
npm WARN 2 more (react-native-country-picker-modal, react-native-maps)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react-native-web#"0.9.x" from modal-react-native-web#0.2.0
npm WARN node_modules/modal-react-native-web
npm WARN modal-react-native-web#"0.2.0" from react-native-country-picker-modal#2.0.0
npm WARN node_modules/react-native-country-picker-modal
npm WARN
npm WARN Conflicting peer dependency: react-native-web#0.9.13
npm WARN node_modules/react-native-web
npm WARN peer react-native-web#"0.9.x" from modal-react-native-web#0.2.0
npm WARN node_modules/modal-react-native-web
npm WARN modal-react-native-web#"0.2.0" from react-native-country-picker-modal#2.0.0
npm WARN node_modules/react-native-country-picker-modal
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: native-base#3.3.7
npm ERR! Found: react-native-safe-area-context#3.3.2
npm ERR! node_modules/react-native-safe-area-context
npm ERR! react-native-safe-area-context#"3.3.2" from the root project
npm ERR! peer react-native-safe-area-context#">= 3.0.0" from #react-navigation/drawer#6.4.2
npm ERR! node_modules/#react-navigation/drawer
npm ERR! #react-navigation/drawer#"^6.4.1" from the root project
npm ERR! 4 more (#react-navigation/elements, react-native-elements, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react-native-safe-area-context#"3.1.9" from native-base#3.3.7
npm ERR! node_modules/native-base
npm ERR! native-base#"^3.3.7" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: react-native-safe-area-context#3.1.9
npm ERR! peer react-native-safe-area-context#"3.1.9" from native-base#3.3.7
npm ERR! node_modules/native-base
npm ERR! native-base#"^3.3.7" 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\alexander\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\alexander\AppData\Local\npm-cache\_logs\2023-02-05T23_04_00_233Z-debug-0.log
Even when I run npm install react, I still get similar error.
Please what do I do? I have equally deleted my android folder but it still doesn't work. I had a similar project that caused some errors like this but It wasn't this much and was quite easy to fix. I tried to copy the same dependency's version of that one to this one but it still failed.
Here is my package.json:
{
"name": "project",
"version": "1.0.0",
"scripts": {
"start": "expo start --dev-client",
"android": "expo run:android",
"ios": "expo run:ios",
"web": "expo start --web",
"eject": "expo eject"
},
"resolutions": {
"react-native-picker-select/#react-native-picker/picker": "^2.1.0"
},
"dependencies": {
"#cometchat-pro/react-native-chat": "^3.0.10",
"#eliav2/react-native-collapsible-view": "^1.4.0",
"#expo-google-fonts/inter": "^0.2.2",
"#gorhom/bottom-sheet": "^4.2.2",
"#notifee/react-native": "^5.3.0",
"#react-native-async-storage/async-storage": "~1.15.0",
"#react-native-community/netinfo": "7.1.3",
"#react-native-firebase/firestore": "^14.3.0",
"#react-native-firebase/messaging": "^15.1.1",
"#react-native-masked-view/masked-view": "^0.2.6",
"#react-native-picker/picker": "2.2.1",
"#react-navigation/bottom-tabs": "^6.3.2",
"#react-navigation/drawer": "^6.3.1",
"#react-navigation/material-top-tabs": "^6.1.0",
"#react-navigation/native": "^6.0.7",
"#react-navigation/stack": "^5.14.9",
"#rodrigogs/mysql-events": "^0.6.0",
"#sentry/browser": "^7.14.2",
"#sentry/react-native": "^4.6.1",
"babel-plugin-inline-dotenv": "^1.7.0",
"bcrypt": "^5.0.1",
"cors": "^2.8.5",
"dotenv": "^16.0.1",
"emoji-mart-native": "^0.6.4-beta",
"expo": "~44.0.0",
"expo-app-loading": "^1.3.0",
"expo-application": "~4.0.1",
"expo-asset": "~8.4.6",
"expo-av": "~10.2.0",
"expo-build-properties": "^0.3.0",
"expo-constants": "~13.0.1",
"expo-dev-client": "~0.8.6",
"expo-device": "~4.1.0",
"expo-document-picker": "~10.1.3",
"expo-file-system": "~13.1.4",
"expo-firebase-recaptcha": "~2.1.0",
"expo-font": "~10.0.4",
"expo-haptics": "~11.1.0",
"expo-image-manipulator": "~10.2.0",
"expo-image-picker": "~12.0.1",
"expo-intent-launcher": "~10.1.3",
"expo-linear-gradient": "^11.0.3",
"expo-location": "~14.0.1",
"expo-media-library": "~14.0.0",
"expo-notifications": "^0.14.1",
"expo-permissions": "^13.1.1",
"expo-server-sdk": "^3.6.0",
"expo-sharing": "~10.1.0",
"expo-splash-screen": "~0.14.1",
"expo-status-bar": "~1.2.0",
"expo-updates": "~0.11.7",
"express": "^4.17.2",
"firebase": "8.5",
"flutterwave-node-v3": "^1.0.9",
"jetifier": "^2.0.0",
"lottie-react-native": "5.0.1",
"messagebird": "^3.7.2",
"mixpanel-react-native": "^1.5.0",
"moment": "^2.29.4",
"mysql": "^2.18.1",
"native-base": "^3.3.7",
"navigation": "^5.5.1",
"nodemon": "^2.0.15",
"onesignal-expo-plugin": "^1.0.2",
"paystack": "^2.0.1",
"react": "17.0.1",
"react-dom": "17.0.1",
"react-native": "0.64.3",
"react-native-animatable": "^1.3.3",
"react-native-animated-loader": "^0.0.9",
"react-native-autolink": "^4.0.0",
"react-native-calendar-picker": "^7.1.2",
"react-native-collapsible": "^1.6.0",
"react-native-country-picker-modal": "^2.0.0",
"react-native-dotenv": "^3.3.1",
"react-native-dropdown-picker": "^5.4.2",
"react-native-easy-content-loader": "^0.3.2",
"react-native-elements": "^3.4.2",
"react-native-fast-image": "^8.6.1",
"react-native-flash-message": "^0.2.1",
"react-native-geolocation-service": "^5.3.0-beta.4",
"react-native-gesture-handler": "~2.1.0",
"react-native-image-slider-box": "^1.1.20",
"react-native-indicators": "^0.17.0",
"react-native-keep-awake": "^4.0.0",
"react-native-keyboard-aware-scroll-view": "^0.9.5",
"react-native-maps": "0.29.4",
"react-native-maps-directions": "^1.8.0",
"react-native-modal": "^13.0.1",
"react-native-multiple-select": "^0.5.7",
"react-native-onboarding-swiper": "^1.1.4",
"react-native-onesignal": "^4.3.11",
"react-native-pager-view": "5.4.9",
"react-native-paystack-webview": "^4.0.3",
"react-native-phone-call": "^1.0.9",
"react-native-phone-input": "^1.3.2",
"react-native-phone-number-input": "^2.1.0",
"react-native-progress": "^5.0.0",
"react-native-reanimated": "~2.3.1",
"react-native-safe-area-context": "3.3.2",
"react-native-screens": "~3.10.1",
"react-native-select-dropdown": "^1.8.0",
"react-native-skeleton-content": "^1.0.24",
"react-native-snap-carousel": "^3.9.1",
"react-native-svg": "12.1.1",
"react-native-swipe-list-view": "^3.2.9",
"react-native-tab-view": "^3.1.1",
"react-native-vector-icons": "^9.2.0",
"react-native-web": "0.17.1",
"react-native-webview": "11.15.0",
"react-navigation-transitions": "^1.0.12",
"react-phone-input-2": "^2.14.0",
"react-phone-number-input": "^3.1.44",
"react-redux": "^7.2.6",
"reanimated-bottom-sheet": "^1.0.0-alpha.22",
"redux": "^4.1.2",
"redux-persist": "^6.0.0",
"redux-thunk": "^2.4.1",
"rn-fetch-blob": "^0.12.0",
"sentry-expo": "^4.0.0",
"socket.io": "^4.4.1",
"socket.io-client": "^4.4.1",
"stream-chat-expo": "^4.10.0",
"twilio": "^3.75.0",
"validate-nin": "^2.0.6"
},
"devDependencies": {
"#babel/core": "^7.12.9",
"#types/react-native": "^0.68.0"
},
"private": true
}

Related

npm install on React project produces ERESOLVE

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?

Having problems with Material UI installations and React v. 18.2

I'm trying to experiment with Material UI but running into problems with React v.18.2. I need to import the following:
import { MuiThemeProvider, createTheme } from '#material-ui/core/styles'
But when I run npm install #material-ui/styles, I get this error:
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: zscratch#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.8.0 || ^17.0.0" from #material-ui/styles#4.11.5
npm ERR! node_modules/#material-ui/styles
npm ERR! #material-ui/styles#"*" 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.
I have tried running the following, per this SO answer, and they did install but that has not helped any:
npm install #mui/material#latest #emotion/react#latest #emotion/styled#latest
npm install #mui/icons-material#latest
Here are my dependencies.
"dependencies": {
"#emotion/react": "^11.10.0",
"#emotion/styled": "^11.10.0",
"#fontsource/roboto": "^4.5.8",
"#mui/icons-material": "^5.8.4",
"#mui/material": "^5.10.1",
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.3.0",
"#testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-geolocated": "^4.0.3",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
Bottom line: What do I need to do to be able to import what I need?
You can try yarn.
yarn add #material-ui/styles
Also you can install it by using --force.
npm i -f #material-ui/styles
It worked for me
Try these React 18 MUI update commands
npm i #material-ui/core --legacy-peer-deps
npm i #mui/icons-material --legacy-peer-deps
npm i #mui/lab --legacy-peer-deps
npm i #mui/x-data-grid --legacy-peer-deps
npm i #mui/x-data-grid-generator --legacy-peer-deps

Npm libraries not working in React Native

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!

react-messenger-customer-chat - errors while installing npm

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

Angular 2+ , material not working

when I install npm install --save #angular/material
It gives me following response :
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents#^1.0.0 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents#1.1.1: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
But this above one are just warnings , but when I try to actually import it in app.module.ts npm start breaks as follows:
npm ERR! Windows_NT 10.0.14393
npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "run" "build"
npm ERR! node v6.10.0
npm ERR! npm v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! angular-quickstart#1.0.0 build: tsc -p src/
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the angular-quickstart#1.0.0 build script 'tsc -p src/'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the angular-quickstart package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! tsc -p src/
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs angular-quickstart
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls angular-quickstart
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! E:\My Projects\angular-quickstart-master\npm-debug.log
npm ERR! Windows_NT 10.0.14393
npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "start"
npm ERR! node v6.10.0
npm ERR! npm v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! angular-quickstart#1.0.0 prestart: npm run build
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the angular-quickstart#1.0.0 prestart script 'npm run build'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the angular-quickstart package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! npm run build
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs angular-quickstart
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls angular-quickstart
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! E:\My Projects\angular-quickstart-master\npm-debug.log
I am not sure what is the exact issue. Can any one please help.
I have created a new angular project using the package.json you have provided and everything is working great. Upgrading the node/npm is the way, I feel.
"dependencies": {
"#angular/common": "~4.0.0",
"#angular/compiler": "~4.0.0",
"#angular/core": "~4.0.0",
"#angular/forms": "~4.0.0",
"#angular/http": "~4.0.0",
"#angular/material": "^2.0.0-beta.6",
"#angular/platform-browser": "~4.0.0",
"#angular/platform-browser-dynamic": "~4.0.0",
"#angular/router": "~4.0.0",
"angular-in-memory-web-api": "~0.3.0",
"core-js": "^2.4.1",
"rxjs": "5.0.1",
"systemjs": "0.19.40",
"zone.js": "^0.8.4"
},
"devDependencies": {
"concurrently": "^3.2.0",
"lite-server": "^2.2.2",
"typescript": "~2.1.0",
"canonical-path": "0.0.2",
"tslint": "^3.15.1",
"lodash": "^4.16.4",
"jasmine-core": "~2.4.1",
"karma": "^1.3.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.0.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~4.0.14",
"rimraf": "^2.5.4",
"#types/node": "^6.0.46",
"#types/jasmine": "2.5.36"
}

Resources