Error when running react native uber clone - reactjs

I am a complete beginner trying to open a react native uber clone application on visual studio (windows). https://github.com/coderkhalide/uber-clone
Here are the steps and errors that occurred, any help would be greatly appreciated. I am sure I'm making some noob mistake.
NPM version 8.19.2
copied the github repository into VS
deleted yarn.lock file
in terminal - npm install and I immediately receive errors:
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: undefined#undefined
npm ERR! Found: react-native-safe-area-context#4.2.4
npm ERR! node_modules/react-native-safe-area-context
npm ERR! react-native-safe-area-context#"4.2.4" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react-native-safe-area-context#"^3.1.9" from react-native-elements#3.4.2
npm ERR! node_modules/react-native-elements
npm ERR! react-native-elements#"^3.4.2" 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\anon\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\anon\AppData\Local\npm-cache\_logs\2022-11-09T23_44_43_850Z-debug-0.log
So then, I type in npm install --uber-clone --legacy-peer-deps
and it loads for a while, then I receive the following errors:
npm WARN deprecated #npmcli/move-file#1.1.2: This functionality has been moved to #npmcli/fs
npm WARN deprecated source-map-url#0.4.1: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated source-map-resolve#0.6.0: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated urix#0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated source-map-resolve#0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated resolve-url#0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated tailwind-react-native-classnames#1.5.1: library changed name to 'twrnc', please use that package for the latest features
npm WARN deprecated uuid#3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
npm WARN deprecated uglify-es#3.3.9: support for ECMAScript is superseded by `uglify-js` as of v3.13.0
added 1285 packages, and audited 1286 packages in 32s
9 vulnerabilities (1 moderate, 6 high, 2 critical)
To address issues that do not require attention, run:
npm audit fix
To address all issues, run:
npm audit fix --force
Run `npm audit` for details.
I also downloaded Git Bash. I'm open to using any program. Honestly a complete noob and need step by step instructions =D. My main goal is to just open the app and be able to navigate the application.

Install npm i twrnc instead of npm i tailwind-react-native-classnames

Related

React Native - Importing #rneui (or react-native-vector-icons) always creates error and breaks projects with safe-area

I am quite new to react native, but I have a lot of experience with other languages. I am having tons of issues with projects breaking due to excessive errors. The errors usually pop up when installing new packages. Often I can bypass the errors by using '--force' or '--legacy-peer-deps' but mostly this just breaks the project more.
(BTW I create apps for mobile)
For instance I started a project with 'react-native init Name' and created a basic native navigation stack with a Home Screen. I wanted to add icons so I followed this website https://reactnativeelements.com/docs/installation which seems to be the newest docs for react elements, but right from the very first command 'npm install #rneui/themed #rneui/base' I get this error:
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: Sessler2022#0.0.1
npm ERR! Found: react-native-safe-area-context#4.3.1
npm ERR! node_modules/react-native-safe-area-context
npm ERR! react-native-safe-area-context#"^4.3.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react-native-safe-area-context#"^3.1.9" from #rneui/base#4.0.0-rc.4
npm ERR! node_modules/#rneui/base
npm ERR! #rneui/base#"^4.0.0-rc.4" 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/reidtaylor/.npm/eresolve-report.txt for a full report.
Any help for this error would be helpful as well, but the bigger question is what am I doing wrong to get so many errors with packages and how can I fix them.
Thank you.
I had the same issue and solved it by installing older versions react-native-safe-area-context and react-native-elements.
Firstly, you need to uninstall your current versions of these packages, and run:
npm install react-native-elements#3.4.2
npm install react-native-safe-area-context#3.1.9
I'm using an ios simulator, so in my case, it was required to mate pods install again to update packages versions

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

How to fix NPM vulnerabilities

When running npm audit, it says I have 87 vulnerabilities. npm audit fix and npm audit fix --force do not fix the issues.
Here is the output for the main problems on npm audit fix.
browserslist 4.0.0 - 4.16.4
Severity: moderate
Regular Expression Denial of Service
dns-packet <5.2.2
Severity: high
Memory Exposure - https://npmjs.com/advisories/1745
fix available via `npm audit fix --force`
Will install react-scripts#1.1.5, which is a breaking change
postcss 7.0.0 - 8.2.9
Severity: moderate
Regular Expression Denial of Service
upon further inspection in package-lock.json here is the dns-packet:
"dns-packet": {
"version": "1.3.1",
"resolved": "https://registry.npmjs.org/dns-packet/-/dns-packet-1.3.1.tgz",
"integrity": "sha512-0UxfQkMhYAUaZI+xrNZOz/as5KgDU0M/fQ9b6SpkyLbk3GEswDi6PADJVaYJradtRVsRIlF1zLyOodbcTCDzUg==",
"requires": {
"ip": "^1.1.0",
"safe-buffer": "^5.0.1"
}
},
It says on npm documentation that the latest version of dns-packet should be 5.2.3. I tried deleting package-lock.json and node modules and running npm install but that did not work. Here is what npm install spits out:
npm WARN deprecated request-promise-native#1.0.9: request-promise-native has been deprecated because it extends the now deprecated request package, see https://github.com/request/request/issues/3142
npm WARN deprecated #hapi/topo#3.1.6: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated #hapi/bourne#1.3.2: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated urix#0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated har-validator#5.1.5: this library is no longer supported
npm WARN deprecated resolve-url#0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated fsevents#1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated chokidar#2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated chokidar#2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated fsevents#1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated babel-eslint#10.1.0: babel-eslint is now #babel/eslint-parser. This package will no longer receive updates.
npm WARN deprecated #hapi/address#2.1.4: Moved to 'npm install #sideway/address'
npm WARN deprecated rollup-plugin-babel#4.4.0: This package has been deprecated and is no longer maintained. Please use #rollup/plugin-babel.
npm WARN deprecated request#2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated #hapi/hoek#8.5.1: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated #hapi/joi#15.1.1: Switch to 'npm install joi'
npm WARN deprecated core-js#2.6.12: core-js#<3.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.
At this point I have no idea what the problem is. I hadn't installed anything for a while. Went to go install redux and react-redux and it started telling me there were vulnerabilities. Not sure where to go from here.
edit: I ran npm i npm#latest and shows this in the console:
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! Found: #babel/core#7.12.3
npm ERR! node_modules/#babel/core
npm ERR! #babel/core#"7.12.3" from react-scripts#4.0.3
npm ERR! node_modules/react-scripts
npm ERR! react-scripts#"4.0.3" from the root project
npm ERR! #babel/core#"^7.12.3" from #svgr/webpack#5.5.0
npm ERR! node_modules/#svgr/webpack
npm ERR! #svgr/webpack#"5.5.0" from react-scripts#4.0.3
npm ERR! node_modules/react-scripts
npm ERR! react-scripts#"4.0.3" from the root project
npm ERR! 9 more (babel-jest, babel-loader, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer #babel/core#"^7.13.0" from #babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining#7.13.12
npm ERR! node_modules/#babel/preset-env/node_modules/#babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining
npm ERR! #babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining#"^7.13.12" from #babel/preset-env#7.14.2
npm ERR! node_modules/#babel/preset-env
npm ERR! #babel/preset-env#"^7.12.1" from #svgr/webpack#5.5.0
npm ERR! node_modules/#svgr/webpack
npm ERR! #svgr/webpack#"5.5.0" from react-scripts#4.0.3
npm ERR! node_modules/react-scripts
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.
run npm audit fix --force with root privilege
if does not work you have to update npm
npm install npm#latest -g
the possible solution is to update all node modules
don't forget to take a backup of your packages.json file
npm i npm#latest

Problem to install react-reveal animation on terminal visual studio code

Hello everybody i have a probem to install the react-reveal animation dependencie , each time when i put this command (npm install react-reveal --save) I have this problem, and i don't how i can resolve this problem, if a person had this problem or know how resolve this problem. can help me please thank you.
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: portfolio-sebastien#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.3.0 || ^16.0.0" from react-reveal#1.2.2
npm ERR! node_modules/react-reveal
npm ERR! react-reveal#"*" 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/sebastienfirouzfar/.npm/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/sebastienfirouzfar/.npm/_logs/2021-06-17T08_40_33_036Z-debug.log
This is because react-reveal has not been updated in about 4 years as you can see here https://github.com/rnosov/react-reveal. Its dependencies are looking for react 15 or 16. You have react v17 so its throwing an error that it might not work with that version.
I can confirm that react-reveal works fine for me with react v17. But you will need to install react-reveal with this command:
npm i react-reveal --legacy-peer-deps.
Or if you already have the packages in your package.json then you can install everything without the errors by using npm i --legacy-peer-deps.
An alternative option is that you can ditch react-reveal and use react-awesome-reveal instead. This package does similar fade and reveals for react but its API is slightly different and does not have all the advanced features of react-reveal. This would only be a replacement if you were using only the basic features of react-reveal.
You are having this problem probably because of cache or npm version so I will try to give you most feasible solution.
1-Delete your node_modules and package-lock.json files from your project.
2-Run npm cache clean --force in termial
3-Run npm install
4-Run npm install react-reveal --save
If it does not work you should try with different node version. You can use nvm (node version manager) which allows you to use and switch multiple node versions in your computer.
just for a quick solution you can use npm i react-reveal --force

When installing Material UI, I am prompted with a series of errors?

When I attempt to install Material UI using npm install #material-ui/core , I am prompted with many errors:
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: portfolio#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!
npm ERR! Could not resolve dependency:
npm ERR! peer react#"^16.8.0" from #material-ui/core#4.11.0
npm ERR! node_modules/#material-ui/core
npm ERR! #material-ui/core#"*" 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/jordanhilado/.npm/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/jordanhilado/.npm/_logs/2020-10-31T17_57_54_724Z-debug.log
How can I fix this?
npm install --save --legacy-peer-deps #material-ui/core
Material UI does not officially support React v17 yet, so use with caution.
npm ERR! peer react#"^16.8.0" from #material-ui/core#4.11.0
This line here is giving you a hint as to what is going wrong.
#material-ui/core#4.11.0 is expecting a peer dependency for react to be within the current major version allowed (in this case it seems like they have not added support for React version 17 yet).
It looks like you are on the most recent major version of React 17.0.1. The most recent version of Material-UI will support react version below 17.0.0 currently.
See this other stack overflow for an explanation on what the '^' means in version numbers.
What's the difference between tilde(~) and caret(^) in package.json?
To get around this try downgrading React to version 16, at least until Material-UI adds support for version 17.
A side note: you may not need everything it comes with but create react app is a great way to get started on React projects and not really have to worry about versioning issues.

Resources