npm install react-native-svg --save fails - reactjs

Im new to react-native. I want to draw a chart , for that I came across this library. But unfortunately while installing the library from npm
npm install react-native-svg --save I'm getting error.
npm WARN peerDependencies The peer dependency react-native#^0.24.0 included from react-native-svg will no
npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency
npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly.
npm ERR! Darwin 15.2.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "install" "react-native-svg" "--save"
npm ERR! node v4.3.1
npm ERR! npm v2.14.12
npm ERR! code EPEERINVALID
npm ERR! peerinvalid The package react-native#0.25.1 does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer react-native-svg#1.2.6 wants react-native#^0.24.0
npm ERR! Please include the following file with any support request:
npm ERR! /Users/subodh/ReactNative/SVGDemo/npm-debug.log
Anybody out there can help regarding this ?
Package.json contents :
{
"name": "SVGDemo",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start"
},
"dependencies": {
"react": "^0.14.8",
"react-native": "^0.25.1"
}
}

Related

Issue with Material UI Icons npm installation : unable to resolve dependency tree

---------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.

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

Trying to install webpack 5 with react 17 for module federation, getting this error on npm install

I have a react app created with cra. I want to install webpack in order to setup module federation.
I am getting this error on running the below command:
$ npm i --D webpack#5.24.0 webpack-cli webpack-server html-webpack-plugin babel-loader webpack-dev-server
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: netlify-foot#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#"~0.9" from webpack-server#0.1.2
npm ERR! node_modules/webpack-server
npm ERR! dev webpack-server#"*" 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:\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:\AppData\Local\npm-cache\_logs\2021-06-05T15_25_05_470Z-debug.log
package.json
{
"dependencies": {
"#testing-library/jest-dom": "^5.12.0",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"web-vitals": "^1.1.2"
}
}
What is the issue? How to get this working?
Your install command is:
npm i --D webpack#5.24.0 webpack-cli webpack-server html-webpack-plugin babel-loader webpack-dev-server
This means, it tries to add the following six packages:
webpack#5.24.0
webpack-cli
webpack-server
html-webpack-plugin
babel-loader
webpack-dev-server
But webpack-server is not a thing. Remove it.
If you look closely at your error message, it kinda tries to tell you the same thing:
npm ERR! Could not resolve dependency:
npm ERR! peer react#"~0.9" from webpack-server#0.1.2
It says that it fails to satisfy dependencies caused by this webpack-server. Make sure to get rid of it. That will at least fix this problem.
Your next problem
NOTE however, that for further customization of CRA's webpack build, given you don't want to eject, you also need a way to override it's default build settings.
For that, you might want to check out CRACO.
CRACO (like Webpack Module Federation) does not have very good documentation, but it has a few webpack-related examples here.

How to solve dependency error in gatsby js?

I was following Gatsbyjs tutorial. (https://www.gatsbyjs.com/docs/tutorial/part-four/) Link here.
I typed the command in window terminal,
gatsby new tutorial-part-four https://github.com/gatsbyjs/gatsby-starter-hello-world
cd tutorial-part-four
npm install gatsby-plugin-typography typography react-typography typography-theme-kirkham gatsby-plugin-emotion #emotion/react
But error has occurred with these messages,
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: gatsby-starter-hello-world#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.9.0 || ^17.0.0" from gatsby-plugin-typography#3.0.0
npm ERR! node_modules/gatsby-plugin-typography
npm ERR! gatsby-plugin-typography#"*" from the root project
npm ERR! 2 more (gatsby, react-dom)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react#"^0.14.0 || ^15.0.0 || ^16.0.0" from react-typography#0.16.19
npm ERR! node_modules/react-typography
npm ERR! peer react-typography#"^0.16.1 || ^1.0.0-alpha.0" from gatsby-plugin-typography#3.0.0
npm ERR! node_modules/gatsby-plugin-typography
npm ERR! gatsby-plugin-typography#"*" 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\pc\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\pc\AppData\Local\npm-cache\_logs\2021-03-13T09_43_09_116Z-debug.log
I want to know how to solve these error?
react-typography isn't ready for react 17, so you'll have to downgrade react into version 16 to use it.
Edit package.json and look for:
"dependencies": {
...
"react": "^17.0.1",
"react-dom": "^17.0.1",
...
},
change the version numbers to 16.14.0
"dependencies": {
...
"react": "^16.14.0",
"react-dom": "^16.14.0",
...
},
Save it and then remove all the files from node_modules/
rm -Rf node_modules
Finally, just reinstall everything using the command:
npm install
Continue with your command...
npm install gatsby-plugin-typography typography react-typography typography-theme-kirkham gatsby-plugin-emotion #emotion/react
I think the error is coming from npm versions
Try with adding --legacy-peer-deps option in npm install command
npm install gatsby-plugin-typography typography react-typography typography-theme-kirkham gatsby-plugin-emotion #emotion/react --legacy-peer-deps
or try after cleaning the npm by using below command
npm cache clean --force

nodejs Couldn't read dependencies when triggering "npm install"

I'm getting the below error.
D:\Ashley\nodejs>npm install
npm ERR! install Couldn't read dependencies
npm ERR! package.json ENOENT, open 'D:\Ashley\nodejs\package.json'
npm ERR! package.json This is most likely not a problem with npm itself.
npm ERR! package.json npm can't find a package.json file in your current directory.
npm ERR! System Windows_NT 6.2.9200
npm ERR! command "D:\\Ashley\\nodejs\\\\node.exe" "D:\\Ashley\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "install"
npm ERR! cwd D:\Ashley\nodejs
npm ERR! node -v v0.10.33
npm ERR! npm -v 1.4.28
npm ERR! path D:\Ashley\nodejs\package.json
npm ERR! code ENOPACKAGEJSON
npm ERR! errno 34
npm ERR!
npm ERR! Additional logging details can be found in:
npm ERR! D:\Ashley\nodejs\npm-debug.log
npm ERR! not ok code 0
npm install command installs node packages wich are written in package.json file for example you have package.json :
{
"name": "application-name"
, "version": "0.0.1",
"main": "app.js"
, "dependencies": {
"express": "*"
, "jade": "*"
,"cookie-parser":"*"
},
"scripts": {
"start": "node app.js"
}
}
when you write npm install it will install dependencies express jade and cookie-parser
you recieve this error because you have no package.json so if you want to install this packages without package.json you have to write:
npm install express
npm install jade
npm install cookie-parser
It is certain from the type of error you get that you do not have a package.json file at the directory in which you type npm install.
You should first use npm init which creates the necessary package.json file and then type npm install.

Resources