Not able to install reactstrap - node.js

In case of installing react-icons, reactstrap and react-toastify
C:\Users\Anupam K Krishnan\Desktop\React20\four-tictactoe>npm install react-icons reactstrap react-toastify
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! Found: react#17.0.1
npm ERR! node_modules/react
npm ERR! peer react#"*" from #testing-library/react#11.2.2
npm ERR! node_modules/#testing-library/react
npm ERR! #testing-library/react#"^11.2.2" from the root project
npm ERR! peer react#"17.0.1" from react-dom#17.0.1
npm ERR! node_modules/react-dom
npm ERR! peer react-dom#"*" from #testing-library/react#11.2.2
npm ERR! node_modules/#testing-library/react
npm ERR! #testing-library/react#"^11.2.2" from the root project
npm ERR! react-dom#"^17.0.1" from the root project
npm ERR! 2 more (reactstrap, react-transition-group)
npm ERR! 5 more (the root project, react-icons, react-toastify, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react#"0.14.x || ^15.0.0 || ^16.0.0" from react-popper#1.3.7
npm ERR! node_modules/reactstrap/node_modules/react-popper
npm ERR! react-popper#"^1.3.6" from reactstrap#8.8.0
npm ERR! node_modules/reactstrap
npm ERR! reactstrap#"*" 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\Anupam K Krishnan\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\Anupam K Krishnan\AppData\Local\npm-cache\_logs\2020-12-25T16_47_42_992Z-debug.log
In case of using --force
npm WARN using --force Recommended protections disabled.
npm WARN ERESOLVE overriding peer dependency
npm WARN Found: react#17.0.1
npm WARN node_modules/react
npm WARN peer react#"*" from #testing-library/react#11.2.2
npm WARN node_modules/#testing-library/react
npm WARN #testing-library/react#"^11.2.2" from the root project
npm WARN 6 more (react-dom, the root project, react-icons, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react#"0.14.x || ^15.0.0 || ^16.0.0" from react-popper#1.3.7
npm WARN node_modules/reactstrap/node_modules/react-popper
npm WARN react-popper#"^1.3.6" from reactstrap#8.8.0
npm WARN node_modules/reactstrap
npm WARN ERESOLVE overriding peer dependency
npm WARN Found: react#17.0.1
npm WARN node_modules/react
npm WARN peer react#"*" from #testing-library/react#11.2.2
npm WARN node_modules/#testing-library/react
npm WARN #testing-library/react#"^11.2.2" from the root project
npm WARN 6 more (react-dom, the root project, react-icons, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react#"0.14.x || ^15.0.0 || ^16.0.0" from react-popper#1.3.7
npm WARN node_modules/reactstrap/node_modules/react-popper
npm WARN react-popper#"^1.3.6" from reactstrap#8.8.0
npm WARN node_modules/reactstrap
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! Found: react#17.0.1
npm ERR! node_modules/react
npm ERR! peer react#"*" from #testing-library/react#11.2.2
npm ERR! node_modules/#testing-library/react
npm ERR! #testing-library/react#"^11.2.2" from the root project
npm ERR! peer react#"17.0.1" from react-dom#17.0.1
npm ERR! node_modules/react-dom
npm ERR! peer react-dom#"*" from #testing-library/react#11.2.2
npm ERR! node_modules/#testing-library/react
npm ERR! #testing-library/react#"^11.2.2" from the root project
npm ERR! react-dom#"^17.0.1" from the root project
npm ERR! 2 more (reactstrap, react-transition-group)
npm ERR! 5 more (the root project, react-icons, react-toastify, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react#"^0.14.0 || ^15.0.0 || ^16.0.0" from create-react-context#0.3.0
npm ERR! node_modules/reactstrap/node_modules/create-react-context
npm ERR! create-react-context#"^0.3.0" from react-popper#1.3.7
npm ERR! node_modules/reactstrap/node_modules/react-popper
npm ERR! react-popper#"^1.3.6" from reactstrap#8.8.0
npm ERR! node_modules/reactstrap
npm ERR! reactstrap#"*" 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\Anupam K Krishnan\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\Anupam K Krishnan\AppData\Local\npm-cache\_logs\2020-12-25T17_16_41_640Z-debug.log
Also tried adding an .env file with SKIP_PREFLIGHT_CHECK=true
even this doesn't work
All this error is coming while installing reactstrap
What I've tried
1)Deleted node modules and package-lock.json
2)updated npm
3)reinstalled npm
Even I tried --force but nothing happend
Still error is there

To fix the dependency tree, try following the steps below in the exact order:
Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
Delete node_modules in your project folder.
Remove "babel-eslint" from dependencies and/or devDependencies in the package.json file in your project folder.
Run npm install or yarn, depending on the package manager you use.
In most cases, this should be enough to fix the problem.
If this has not helped, there are a few other things you can try:
If you used npm, install yarn (http://yarnpkg.com/) and repeat the above steps with it instead.
This may help because npm has known issues with package hoisting which may get resolved in future versions.
Check if C:\Users\asus\Desktop\react20\node_modules\babel-eslint is outside your project directory.
For example, you might have accidentally installed something in your home folder.
Try running npm ls babel-eslint in your project folder.
This will tell you which other package (apart from the expected react-scripts) installed babel-eslint.
If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That would permanently disable this preflight check in case you want to proceed anyway.
P.S. We know this message is long but please read the steps above :-) We hope you find them helpful!
If nothing works then run Command :
npm install reactstrap --legacy-peer-deps
To overcome this problem run the above command that overcome that problem

Related

How can I install the social sharing package in Ionic angular?

Im getting the following error when using the ionic-native/social-sharing package:
Failed to initialize Angular compilation - The target entry-point "#ionic#6421-native/social-sharing" has missing dependencies:
- rxjs/Observable
- rxjs/observable/fromEvent
- rxjs/observable/throw
I have rxjs installed.
Also, when I installed the ionic-native/social-sharing I had to use --force, else it wouldnt install. Not using --force gave the following error:
could not resolve dependency npm err peer rxjs 5.5 11 from ionic-native core 4.20 0
What can I do to solve this? All I want to do is use the #ionic-native/social-sharing package
EDIT:
After deleting node_modules and doing npm i, I get this error when I npm i:
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: #ionic-native/core#4.20.0
npm ERR! Found: rxjs#7.5.7
npm ERR! node_modules/rxjs
npm ERR! rxjs#"~7.5.0" from the root project
npm ERR! peer rxjs#"^6.5.3 || ^7.4.0" from #angular/common#15.1.4
npm ERR! node_modules/#angular/common
npm ERR! #angular/common#"^15.0.0" from the root project
npm ERR! peer #angular/common#"15.1.4" from #angular/forms#15.1.4
npm ERR! node_modules/#angular/forms
npm ERR! #angular/forms#"^15.0.0" from the root project
npm ERR! 1 more (#ionic/angular)
npm ERR! 3 more (#angular/platform-browser, ...)
npm ERR! 5 more (#angular/core, #angular/forms, #angular/router, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer rxjs#"^5.5.11" from #ionic-native/core#4.20.0
npm ERR! node_modules/#ionic-native/core
npm ERR! peer #ionic-native/core#"^4.11.0" from #ionic-native/social-sharing#4.20.0
npm ERR! node_modules/#ionic-native/social-sharing
npm ERR! #ionic-native/social-sharing#"^4.20.0" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: rxjs#5.5.12
npm ERR! node_modules/rxjs
npm ERR! peer rxjs#"^5.5.11" from #ionic-native/core#4.20.0
npm ERR! node_modules/#ionic-native/core
npm ERR! peer #ionic-native/core#"^4.11.0" from #ionic-native/social-sharing#4.20.0
npm ERR! node_modules/#ionic-native/social-sharing
npm ERR! #ionic-native/social-sharing#"^4.20.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.
Delete the node_modules folder and redo
npm i
then install the component with:
npm i #ionic-native/social-sharing

npm run dev not working with webpack/babel conflict

I am trying to run npm run dev for a Vue project but I keep getting the following output:
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: babel-loader#7.1.5
npm ERR! Found: webpack#5.75.0
npm ERR! node_modules/webpack
npm ERR! peer webpack#"^5.0.0" from css-loader#6.7.2
npm ERR! node_modules/css-loader
npm ERR! dev css-loader#"^6.7.2" from the root project
npm ERR! peer webpack#"^5.20.0" from html-webpack-plugin#5.5.0
npm ERR! node_modules/html-webpack-plugin
npm ERR! dev html-webpack-plugin#"^5.5.0" from the root project
npm ERR! 8 more (postcss-loader, terser-webpack-plugin, url-loader, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer webpack#"2 || 3 || 4" from babel-loader#7.1.5
npm ERR! node_modules/babel-loader
npm ERR! dev babel-loader#"^7.1.1" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: webpack#4.46.0
npm ERR! node_modules/webpack
npm ERR! peer webpack#"2 || 3 || 4" from babel-loader#7.1.5
npm ERR! node_modules/babel-loader
npm ERR! dev babel-loader#"^7.1.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.
I have no idea what to do, I have tried uninstalling vue-cli and tried re-installing it (I'm not sure if this messed up my packages). Is there a way to cleanly delete everything and start fresh? If anyone can help that would be much appreciated!
Update:
I tried starting a new project with vue init webpack frontend in a new folder and tried installing axios and am getting the following error
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: vuex#4.1.0
npm ERR! Found: vue#2.7.14
npm ERR! node_modules/vue
npm ERR! vue#"^2.5.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer vue#"^3.2.0" from vuex#4.1.0
npm ERR! node_modules/vuex
npm ERR! vuex#"^4.1.0" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: vue#3.2.45
npm ERR! node_modules/vue
npm ERR! peer vue#"^3.2.0" from vuex#4.1.0
npm ERR! node_modules/vuex
npm ERR! vuex#"^4.1.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.
I recently updated my version of node (v19.1.0) and npm (v8.19.3), could that be an issue? It generally seems like I am getting a bunch of conflicts every time I try to install new packages. Is there a way to just start clean?
Probably one of your packages is outdated, according to the error. I guess it's the babel loader.
Method 1 Upgrading or Updating your packages might solve the dependency error.
Method 2 Try running npm install --force or npm install --legacy-peer-deps. It should work.

How to solve the errors with NPM Install?

I am getting the below errors while doing the npm install but if i do npm install --force? everything works fine in the local environment but not during the repository build as my .yaml file script has the "npm install" Can someone help me on how to fix these issues?
I have tried the below two options but not helped to resolve issue
npm audit fix --force
npm install --legacy-peer-deps
screenshot of the error log
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: #angular/localize#10.0.14
npm ERR! Found: #angular/compiler#10.2.3
npm ERR! node_modules/#angular/compiler
npm ERR! #angular/compiler#"^10.2.3" from the root project
npm ERR! peer #angular/compiler#"10.2.3" from #angular/compiler-cli#10.2.3
npm ERR! node_modules/#angular/compiler-cli
npm ERR! dev #angular/compiler-cli#"^10.2.3" from the root project
npm ERR! peer #angular/compiler-cli#"^10.0.0" from #angular-devkit/build-angular#0.1002.3
npm ERR! node_modules/#angular-devkit/build-angular
npm ERR! dev #angular-devkit/build-angular#"^0.1002.3" from the root project
npm ERR! 1 more (#ngtools/webpack)
npm ERR! 1 more (#angular/platform-browser-dynamic)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer #angular/compiler#"10.0.14" from #angular/localize#10.0.14
npm ERR! node_modules/#angular/localize
npm ERR! #angular/localize#"^10.0.14" from the root project
npm ERR! peerOptional #angular/localize#"^10.0.0" from #angular-devkit/build-angular#0.1002.3
npm ERR! node_modules/#angular-devkit/build-angular
npm ERR! dev #angular-devkit/build-angular#"^0.1002.3" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: #angular/compiler#10.0.14
npm ERR! node_modules/#angular/compiler
npm ERR! peer #angular/compiler#"10.0.14" from #angular/localize#10.0.14
npm ERR! node_modules/#angular/localize
npm ERR! #angular/localize#"^10.0.14" from the root project
npm ERR! peerOptional #angular/localize#"^10.0.0" from #angular-devkit/build-angular#0.1002.3
npm ERR! node_modules/#angular-devkit/build-angular
npm ERR! dev #angular-devkit/build-angular#"^0.1002.3" 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.
Try to remove the package-lock file & your node_modules folder
and re-run the command npm install --legacy-peer-deps
it should be fine

Could not resolve dependency: npm ERR! peer webpack#"^4.0.0" from uglifyjs-webpack-plugin#2.2.0

Here is details of my error:
My node version is 16.13.0 and npm is 8.12.1.
PS D:\ShowCase> npm install
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: uglifyjs-webpack-plugin#2.2.0
npm ERR! Found: webpack#5.51.1
npm ERR! node_modules/webpack
npm ERR! dev webpack#"^5.47.1" from the root project
npm ERR! peer webpack#"4.x.x || 5.x.x" from #webpack-cli/configtest#1.0.4
npm ERR! node_modules/#webpack-cli/configtest
npm ERR! #webpack-cli/configtest#"^1.0.4" from webpack-cli#4.8.0
npm ERR! node_modules/webpack-cli
npm ERR! dev webpack-cli#"^4.7.2" from the root project
npm ERR! 3 more (#webpack-cli/configtest, #webpack-cli/info, #webpack-cli/serve)
npm ERR! 8 more (babel-loader, css-loader, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer webpack#"^4.0.0" from uglifyjs-webpack-plugin#2.2.0
npm ERR! node_modules/uglifyjs-webpack-plugin
npm ERR! dev uglifyjs-webpack-plugin#"^2.2.0" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: webpack#4.46.0
npm ERR! node_modules/webpack
npm ERR! peer webpack#"^4.0.0" from uglifyjs-webpack-plugin#2.2.0
npm ERR! node_modules/uglifyjs-webpack-plugin
npm ERR! dev uglifyjs-webpack-plugin#"^2.2.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.
Please let me know if anyone has faced the same problem.
Thanks in advance.
The uglifyjs-webpack-plugin will work fine with Webpack 4 but will not work with Webpack 5. Since this plugin is not scheduled for Webpack 5, You better downgrade Webpack from 5 to 4. Or Try other plugins like babel-minify-webpack-plugin or terser-webpack-plugin to minify javascript if you want to use uglifyjs-webpack-plugin specifically to minimize javascript code.
You can check the last stable release of uglifyjs-webpack-plugin was 3 years ago, and no documented development support for Webpack 5.

How to update my gatsby and its dependences

I'm new on React and I'm trying to update my gatsby and its dependences but is not working.
On the terminal I have put npm outdated and I got this below.
Package Current Wanted Latest Location Depended by
gatsby 2.32.4 2.32.9 3.0.0 node_modules/gatsby form-gatsby
gatsby-plugin-sass 3.2.0 3.2.0 4.0.0 node_modules/gatsby-plugin-sass form-gatsby
gatsby-source-filesystem 2.11.1 2.11.1 3.0.0 node_modules/gatsby-source-filesystem form-gatsby
gatsby-transformer-remark 2.16.1 2.16.1 3.0.0 node_modules/gatsby-transformer-remark form-gatsby
react 16.13.1 16.14.0 17.0.1 node_modules/react form-gatsby
react-dom 16.13.1 16.14.0 17.0.1 node_modules/react-dom form-gatsby
When I tryind to run this: npm update I got this error below.
npm WARN using --force Recommended protections disabled.
npm WARN ERESOLVE overriding peer dependency
npm WARN Found: graphql#15.5.0
npm WARN node_modules/graphql
npm WARN graphql#"^15.4.0" from gatsby#3.0.0
npm WARN node_modules/gatsby
npm WARN gatsby#"3.0.0" from the root project
npm WARN 6 more (gatsby-plugin-image, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer graphql#"^14.4.1" from express-graphql#0.9.0
npm WARN node_modules/express-graphql
npm WARN express-graphql#"^0.9.0" from gatsby#3.0.0
npm WARN node_modules/gatsby
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! Found: gatsby#3.0.0
npm ERR! node_modules/gatsby
npm ERR! gatsby#"3.0.0" from the root project
npm ERR! peer gatsby#"^3.0.0-next.0" from gatsby-plugin-image#1.0.0
npm ERR! node_modules/gatsby-plugin-image
npm ERR! gatsby-plugin-image#"^1.0.0" from gatsby-source-contentful#5.0.0
npm ERR! node_modules/gatsby-source-contentful
npm ERR! gatsby-source-contentful#"^5.0.0" from the root project
npm ERR! 5 more (babel-plugin-remove-graphql-queries, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer gatsby#"^2.0.0" from gatsby-plugin-sass#3.2.0
npm ERR! node_modules/gatsby-plugin-sass
user#Users-MacBook-Pro form-gatsby % npm update
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: gatsby#2.32.9
npm ERR! node_modules/gatsby
npm ERR! gatsby#"^2.26.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer gatsby#"^3.0.0-next.0" from gatsby-plugin-sharp#3.0.0
npm ERR! node_modules/gatsby-plugin-sharp
npm ERR! gatsby-plugin-sharp#"^3.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 /Users/user/.npm/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/user/.npm/_logs/2021-03-02T23_15_17_390Z-debug.log
I have tried to run npm install --force gatsby#3.0.0, but the same didn't work.
Do you guys any way I can update this?
Thanks so much.
Try to run npm install gatsby#latest
And only after that run npm outdated
It means the version you are trying to update to has been found
npm ERR! gatsby#"3.0.0" from the root project
Run gatsby -v to see if version is up to date
For me simply yarn upgrade worked.

Resources