Upgrading React native from 0.57 to 0.58.5 - reactjs

After upgrading to React Native 0.58.5 from 0.57, there is an error whenever installing a npm module:
npm WARN react-native#0.58.5 requires a peer of react#16.6.3 but none is installed. You must install peer dependencies yourself.
npm ERR! path C:\d\code\js\emps\node_modules\colors
npm ERR! code ENOENT
npm ERR! errno -4058
npm ERR! syscall rename
npm ERR! enoent ENOENT: no such file or directory, rename 'C:\d\code\js\emps\node_modules\colors' -> 'C:\d\code\js\emps\node_modules\.colors.DELETE'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\JunC\AppData\Roaming\npm-cache\_logs\2019-02-25T23_49_59_940Z-debug.log
Here is the part of package.json:
"dependencies": {
"react": "^16.8.2",
"react-native": "^0.58.5",
"react-native-code-push": "^5.5.2",
"react-native-device-info": "^0.26.4",
"react-native-gifted-chat": "^0.7.2",
"react-navigation": "^3.3.0"
},
The react version is alreay 16.8.2 which is newer than what the message suggests. What causes the error message? Is the react-native too new?

pertaining to the npm ERR!, you are required to run npm install color -S as the color package is missing from your json file.
hope this helps!

I end up reinstalling the whole system and notice that the react version is locked at 16.6.2 which is not the latest one (16.8.2). The problem may be incompatibility issues caused by newer react. Here is part of package.json after re-installation:
"dependencies": {
"react": "16.6.3",
"react-native": "0.58.5",
"react-native-code-push": "^5.5.2",
"react-native-device-info": "^0.26.4",
"react-native-gifted-chat": "^0.7.2",
"react-native-navigation": "^2.12.0",
"react-navigation": "^3.3.2"
},
"devDependencies": {
"babel-core": "7.0.0-bridge.0",
"babel-jest": "24.1.0",
"jest": "24.1.0",
"metro-react-native-babel-preset": "0.52.0",
"react-test-renderer": "16.6.3"
},
"jest": {
"preset": "react-native"
}

Related

Error when trying to install react-router-dom dependency npm on Visual Studio

I am getting an error trying to install the npm onto my create-react - app application. I have tried deleting and reinstalling my node_modules folder as well as installing it with admin permissions and I am still receiving the same error
**Here is the output from the console
**
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: #nt/xps-base-app#1.5.5
npm ERR! Found: react-router-dom#5.2.0
npm ERR! node_modules/react-router-dom
npm ERR! react-router-dom#"^5.2.0" from the root project
npm ERR! peer react-router-dom#"\>=5.1.0" from #okta/okta-react#4.1.0
npm ERR! node_modules/#okta/okta-react
npm ERR! #okta/okta-react#"^4.1.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react-router-dom#"5.1.2" from #nt/xps-base-app#1.5.5
npm ERR! node_modules/#nt/xps-base-app
npm ERR! #nt/xps-base-app#"^1.5.4" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: react-router-dom#5.1.2
npm ERR! node_modules/react-router-dom
npm ERR! peer react-router-dom#"5.1.2" from #nt/xps-base-app#1.5.5
npm ERR! node_modules/#nt/xps-base-app
npm ERR! #nt/xps-base-app#"^1.5.4" from the root project
**list of dependencies from package.json
**
"dependencies": {
"#nt/eslint-config-xps-base": "^1.6.4",
"#nt/xps-base-app": "^1.5.4",
"#okta/okta-auth-js": "4.6.1",
"#okta/okta-react": "^4.1.0",
"#reduxjs/toolkit": "^1.6.1",
"#types/text-encoding": "^0.0.35",
"axios": "^0.21.1",
"eslint": "5.15.1",
"jest-junit": "6.4.0",
"moment": "2.24.0",
"prop-types": "15.7.2",
"react": "^17.0.1",
"react-axe": "3.3.0",
"react-cookie": "^4.0.3",
"react-dom": "^17.0.1",
"react-media": "2.0.0-rc.1",
"react-redux": "^7.2.4",
"react-router-dom": "^5.2.0",
"react-with-direction": "1.3.1",
"retry-axios": "^2.4.0",
"semantic-ui-react": "^2.0.3",
"uuid": "^3.4.0",
"react-scripts": "^4.0.1",
"semantic-ui-css": "^2.4.1",
"xps-react": "1.7.0",
"xps-style": "1.7.0"
},
"devDependencies": {
"#nt/xps-dev-utils": "^1.6.2",
"cross-env": "^7.0.3",
"react-hot-loader": "^4.13.0",
"text-encoding": "^0.7.0"
},
I don't know why we have this error a lot but a while ago someone else points out this error to me. That time we use a couple of commands. first this: npm install --legacy-peer-deps #youpackagename then we had to use this: npm install --force #yourpackagename you may not need the second command check your project before you use the second. You can go to this question for more information.

unable to resolve dependency tree Chakra UI

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: aid-frontend#0.1.0
npm ERR! Found: react#16.14.0
npm ERR! node_modules/react
npm ERR! react#"^16.8.6" from the root project
npm ERR! peer react#">=16.8.6" from #chakra-ui/checkbox#1.7.1
npm ERR! node_modules/#chakra-ui/checkbox
npm ERR! #chakra-ui/checkbox#"^1.0.0" from the root project
npm ERR! 2 more (#emotion/react, #emotion/styled)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react#">=18" from #chakra-ui/system#2.3.0
npm ERR! node_modules/#chakra-ui/system
npm ERR! peer #chakra-ui/system#">=1.0.0" from #chakra-ui/checkbox#1.7.1
npm ERR! node_modules/#chakra-ui/checkbox
npm ERR! #chakra-ui/checkbox#"^1.0.0" 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/timjini/.npm/eresolve-report.txt for a full report.
I have tried so many diffent ways to solve this issue but it still persists
My dependencies
"dependencies": {
"#chakra-ui/checkbox": "^1.0.0",
"#chakra-ui/icons": "^1.0.0",
"#chakra-ui/react": "^1.8.7",
"#emotion/react": "^11.0.0",
"#emotion/styled": "^11.0.0",
"#testing-library/jest-dom": "^5.16.3",
"#testing-library/react": "^12.1.4",
"#testing-library/user-event": "^13.5.0",
"actioncable-js": "^5.0.0-rc2",
"axios": "^0.26.1",
"bootstrap": "^5.1.3",
"chakra-ui": "^0.3.9",
"emoji-picker-react": "^3.5.1",
"formik": "^2.2.9",
"framer-motion": "^6.2.8",
"google-map-react": "^2.1.10",
"js-logger": "^1.6.1",
"leaflet": "^1.8.0",
"ramda": "^0.28.0",
"react": "^16.8.6",
"react-bootstrap": "^2.2.2",
"react-bootstrap-validation": "^0.1.11",
"react-dom": "^16.8.6",
"react-leaflet": "^4.0.0",
"react-router-dom": "^5.2.0",
"react-scripts": "5.0.0",
"react-search-box": "^2.3.0",
"web-vitals": "^2.1.4",
"yup": "^0.32.11"
},
Solve Chakra UI dependency issues
Chakra UI 2 only compatible with react 18. Your react seems outdated.
Chakra UI has simple installation. You do not need such trash dependencies. Just delete all the project and try this line which is on the official website:
npm i #chakra-ui/react #emotion/react #emotion/styled framer-motion

problem when i npm install react-leaflet-draw react-leaflet --save

i have a problem when i try to install react-leaflet-draw react-leaflet --save i had this error
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: siis-new#0.1.0
npm ERR! Found: react-leaflet#3.2.5
npm ERR! node_modules/react-leaflet
npm ERR! react-leaflet#"^3.2.5" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react-leaflet#"^2.0.0" from react-leaflet-draw#0.19.8
npm ERR! node_modules/react-leaflet-draw
npm ERR! react-leaflet-draw#"*" 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/hafizewp/.npm/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/PC/.npm/_logs/2022-04-12T10_02_53_677Z-debug.log
and i dont want to change my react version !
We faced similar issue, it is due to conflict in versions !
Tried the --legacy-peer-deps option and we needed to add leafelet and leaflet-draw JS libs in addition to the react ones. Here is how our current dependencies looks like, we are using node v16.14.2
Hopefully this helps in your scenario
"dependencies": {
"#emotion/react": "^11.9.0",
"#emotion/styled": "^11.8.1",
"#id-sdk/util": "^3.0.0-pre.10",
"#material-ui/icons": "^4.11.3",
"#mui/icons-material": "^5.6.1",
"#mui/lab": "^5.0.0-alpha.77",
"#mui/material": "^5.6.1",
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^12.1.4",
"#testing-library/user-event": "^13.5.0",
"axios": "^0.26.1",
"leaflet": "^1.7.1",
"leaflet-draw": "^1.0.4",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-dotenv": "^0.1.3",
"react-leaflet": "3.2.1",
"react-leaflet-draw": "0.19.8",
"react-query": "^3.34.19",
"react-scripts": "5.0.0",
"uninstall": "^0.0.0",
"web-vitals": "^2.1.4"
}

Module not found: Can't resolve '#date-io/date-fns' in React

I'm using React Material UI and I get this error : Module not found: Can't resolve '#date-io/date-fns'.
Here are the dependencies that I have in my package.json file :
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/core": "^4.12.1",
"#material-ui/icons": "^4.11.2",
"#material-ui/pickers": "^3.3.10",
"#testing-library/jest-dom": "^5.11.8",
"#testing-library/react": "^11.2.2",
"#testing-library/user-event": "^12.6.0",
"antd": "^4.16.6",
"axios": "^0.21.1",
"bootstrap": "^4.5.3",
"query-string": "^4.3.4",
"react": "^17.0.1",
"react-bootstrap": "^1.4.0",
"react-dom": "^17.0.1",
"react-owl-carousel": "^2.3.3",
"react-router-dom": "^5.2.0",
"react-script-tag": "^1.1.2",
"react-scripts": "4.0.1",
"react-seat-picker": "^1.5.3",
"react-tooltip": "^4.2.21",
"web-vitals": "^0.2.4"
},
I tried installing these libraries but it keeps showing errors in command prompt
D:\WebSites\site>npm i --save date-fns#next #date-io/date-fns
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: site#0.1.0
npm ERR! Found: date-fns#2.0.0-beta.5
npm ERR! node_modules/date-fns
npm ERR! date-fns#"2.0.0-beta.5" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peerOptional date-fns#"^2.0.0" from #date-io/date-fns#2.11.0
npm ERR! node_modules/#date-io/date-fns
npm ERR! #date-io/date-fns#"*" 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\Ryan\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\Ryan\AppData\Local\npm-cache\_logs\2021-08-11T12_31_59_156Z-debug.log
Install this package works for me.
date-fns
npm i date-fns

react-router-dom#4.0.0 requires a peer of react#^15 but none is installed. You must install peer dependencies yourself

I have installed all required libraries using npm install and I also done npm install --save react-router-dom#4.0.0 but I am still getting this error.
My Package.json
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.2.1",
"babel-loader": "^6.2.0",
"babel-preset-es2015": "^6.1.18",
"babel-preset-react": "^6.1.18",
"chai": "^3.5.0",
"chai-jquery": "^2.0.0",
"jquery": "^2.2.1",
"jsdom": "^8.1.0",
"mocha": "^2.4.5",
"react-addons-test-utils": "^0.14.7",
"webpack": "^1.12.9",
"webpack-dev-server": "^1.14.0"
},
"dependencies": {
"babel-preset-stage-1": "^6.1.18",
"lodash": "^3.10.1",
"react": "^15.6.2",
"react-dom": "^0.14.3",
"react-redux": "4.3.0",
"react-router": "^2.0.1",
"react-router-dom": "^4.0.0",
"redux": "^3.0.4"
}
After updating react, redux, react-redux,and all I got no warnings but got following error after I ran npm start
> node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js
events.js:160
throw er; // Unhandled 'error' event
^
Error: listen EADDRINUSE 127.0.0.1:8080
at Object.exports._errnoException (util.js:1020:11)
at exports._exceptionWithHostPort (util.js:1043:20)
at Server._listen2 (net.js:1258:14)
at listen (net.js:1294:10)
at net.js:1404:9
at GetAddrInfoReqWrap.asyncCallback [as callback] (dns.js:62:16)
at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:81:10)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! redux-simple-starter#1.0.0 start: `node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the redux-simple-starter#1.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/myhome/.npm/_logs/2017-12-23T00_38_08_579Z-debug.log
You need React in your package.json
Try the following in the folder where your package.json is placed:
npm install react --save
If react is already present in your package.json verify that the version is higher then 15.0.
If that's not fixing your error, please provide us your package.json
With the help of #rieckpil, I have followed following steps and it fixed my problem.
1: On this page I collected latest version for all following libraries react, react-dom, react-redux, react-router, react-router-dom, redux and replaced it in my package.json file.
2: Run npm install
3: Run npm start. If getting errors like above, simply restart you computer and run npm start again.

Resources