Trying to install react-transition-group but get the following error
npm install react-transition-group#1.x --save
npm ERR! peerinvalid The package react#15.6.1 does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer react-bootstrap#0.31.0 wants react#^0.14.9 || >=15.3.0
npm ERR! peerinvalid Peer react-dom#15.6.1 wants react#^15.6.1
npm ERR! peerinvalid Peer react-fontawesome#1.6.1 wants react#>=0.12.0
npm ERR! peerinvalid Peer react-redux#5.0.5 wants react#^0.14.0 || ^15.0.0-0 || ^16.0.0-0
npm ERR! peerinvalid Peer react-router#4.1.1 wants react#^15
npm ERR! peerinvalid Peer react-router-dom#4.1.1 wants react#^15
npm ERR! peerinvalid Peer react-simple-currency#1.0.15 wants react#^0.14.0
npm ERR! peerinvalid Peer react-transition-group#1.2.0 wants react#^15.0.0
The current dependencies in packages.json are
"dependencies": {
"accounting": "0.4.1",
"babel-runtime": "^6.20.0",
"css-loader": "0.28.2",
"history": "4.6.1",
"immutable": "3.8.1",
"jsonapi-serializer": "3.5.3",
"numeral": "2.0.6",
"prop-types": "15.5.10",
"react": "^15.3.0",
"react-bootstrap": "0.31.0",
"react-dom": "^15.4.1",
"react-fontawesome": "1.6.1",
"react-redux": "5.0.5",
"react-router": "4.1.1",
"react-router-dom": "4.1.1",
"redux": "3.6.0",
"sprintf-js": "1.1.1",
"style-loader": "0.18.1",
"superagent": "3.5.2",
"superagent-no-cache": "0.1.1",
"zpad": "0.5.0"
},
Updated npm npm install npm -g
Cleared cache: npm cache clear
Removed node_modules rm -rf node_modules
Reinstalled node_modules, npm install.
just execute the command:
npm install react-transition-group
and it will work.
Related
**The proble is in react navigation/stack and /native I guess**
I am getting an error trying to install the redux thunk package in my expo app. 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
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: fyp#1.0.0
npm ERR! Found: react-native-screens#1.0.0-alpha.22
npm ERR! node_modules/react-native-screens
npm ERR! peer react-native-screens#"^1.0.0 || ^1.0.0-alpha" from react-navigation-drawer#1.4.0
npm ERR! node_modules/react-navigation-drawer
npm ERR! react-navigation-drawer#"^1.0.1" from react-navigation#3.0.0
npm ERR! node_modules/react-navigation
npm ERR! react-navigation#"^3.0.0" from the root project
npm ERR! peer react-native-screens#"^1.0.0 || ^1.0.0-alpha" from react-navigation-tabs#1.2.0
npm ERR! node_modules/react-navigation-tabs
npm ERR! react-navigation-tabs#"^1.0.0" from react-navigation#3.0.0
npm ERR! node_modules/react-navigation
npm ERR! react-navigation#"^3.0.0" from the root project
npm ERR! 1 more (react-navigation-stack)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! #react-navigation/stack#"^6.2.1" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: react-native-screens#3.13.1
npm ERR! node_modules/react-native-screens
npm ERR! peer react-native-screens#">= 3.0.0" from #react-navigation/stack#6.2.1
npm ERR! node_modules/#react-navigation/stack
npm ERR! #react-navigation/stack#"^6.2.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.
npm ERR!
I am quite new to react - native, so I am not sure if the problem is regarding react - navigation /native and /stack or if it is something else
This is the list of my dependencies:
{
"name": "fyp",
"version": "1.0.0",
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"#expo/vector-icons": "^12.0.5",
"#react-navigation/core": "^6.2.1",
"#react-navigation/native": "^6.0.10",
"#react-navigation/stack": "^6.2.1",
"expo": "~44.0.0",
"expo-app-loading": "^1.3.0",
"expo-font": "^10.0.5",
"expo-status-bar": "~1.2.0",
"react": "17.0.1",
"react-dom": "17.0.1",
"react-native": "0.64.3",
"react-native-reanimated": "~2.3.1",
"react-native-web": "0.17.1",
"react-navigation": "^3.0.0",
"react-navigation-header-buttons": "^8.0.0",
"react-redux": "^7.2.8",
"redux": "^4.1.2",
"redux-devtools-extension": "^2.13.9"
},
"devDependencies": {
"#babel/core": "^7.12.9"
},
"private": true
}
QUESTION:
Running into the following issue essentially (but with different files) : https://github.com/vercel/next.js/discussions/17977
Tried everything suggested there already.
Here is what a page load looks like in dev mode:
Would anyone have any suggestions on how to optimise this?
CODE:
next.config.js:
const withPlugins = require('next-compose-plugins');
const webpack = require("webpack")
const withBundleAnalyzer = require('#next/bundle-analyzer')({
enabled: process.env.ANALYZE === 'true',
})
const withTM = require('next-transpile-modules')(['swr']);
nextConfig = {
images: {
domains: ['storage.googleapis.com'],
},
webpack: config => {
config.resolve.extensions = [ '.mjs', '.js', '.jsx', '.json' ];
config.plugins.push(
new webpack.ProgressPlugin((percentage, message, ...args) => {
// e.g. Output each progress message directly to the console:
console.info(percentage, message, ...args);
})
);
return config
}
}
module.exports = withPlugins([
withBundleAnalyzer,
withTM
], nextConfig);
Tried commenting out everything in next.config.js before doing npm run dev but did not change anything.
js.config.json
{
"compilerOptions": {
"baseUrl": "."
},
"exclude": [
"/node_modules"
]
}
package.json
{
"name": "...",
"version": "0.0.1",
"private": true,
"scripts": {
"dev": "next dev -p 3222",
"build": "next build",
"start": "next start",
"analyze": "cross-env ANALYZE=true next build",
"analyze:server": "cross-env BUNDLE_ANALYZE=server next build",
"analyze:browser": "cross-env BUNDLE_ANALYZE=browser next build"
},
"dependencies": {
"#emotion/cache": "^11.4.0",
"#emotion/react": "^11.4.0",
"#emotion/styled": "^11.3.0",
"#iconify/icons-ant-design": "^1.1.0",
"#iconify/icons-eva": "^1.1.0",
"#iconify/icons-ic": "^1.1.3",
"#iconify/react": "^1.1.4",
"#material-ui/core": "^5.0.0-alpha.34",
"#material-ui/icons": "^5.0.0-alpha.34",
"#material-ui/lab": "^5.0.0-alpha.34",
"#material-ui/styles": "^5.0.0-alpha.33",
"#next/bundle-analyzer": "^11.0.1",
"#sendgrid/mail": "^7.4.5",
"apexcharts": "^3.27.1",
"axios": "^0.21.1",
"change-case": "^4.1.2",
"cross-env": "^7.0.3",
"date-fns": "^2.21.1",
"emoji-mart": "^3.0.1",
"firebase-admin": "^9.9.0",
"framer-motion": "^4.1.17",
"lodash": "^4.17.21",
"millify": "^4.0.0",
"next": "^11.0.1",
"next-compose-plugins": "^2.2.1",
"next-transpile-modules": "^8.0.0",
"nprogress": "^0.2.0",
"numeral": "^2.0.6",
"prop-types": "^15.7.2",
"react": "17.0.2",
"react-apexcharts": "^1.3.9",
"react-dom": "17.0.2",
"react-icons": "^4.2.0",
"react-load-script": "^0.0.6",
"react-scroll": "^1.8.2",
"react-tradingview-widget": "^1.3.2",
"sanitize-html": "^2.4.0",
"sass": "^1.35.2",
"simplebar": "^5.3.0",
"simplebar-react": "^2.3.0",
"swr": "^0.5.6"
}
}
BUNDLE ANALYSIS:
Client
Server
WEBPACK PROGRESS PLUGIN OUTPUT AND OTHER TERMINAL OUTPUT:
https://pastebin.com/PAfudkdg
ERROR WHEN DOING NPM INSTALL:
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: fintex#0.0.1
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#"^16.0.0" from react-tradingview-widget#1.3.2
npm ERR! node_modules/react-tradingview-widget
npm ERR! react-tradingview-widget#"^1.3.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.
TERMINAL OUTPUT WHEN DOING NPM INSTALL --FORCE:
npm WARN using --force Recommended protections disabled.
npm WARN ERESOLVE overriding peer dependency
npm WARN Found: react#17.0.2
npm WARN node_modules/react
npm WARN react#"17.0.2" from the root project
npm WARN 14 more (#emotion/react, #emotion/styled, #material-ui/core, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react#"^16.0.0" from react-tradingview-widget#1.3.2
npm WARN node_modules/react-tradingview-widget
npm WARN react-tradingview-widget#"^1.3.2" from the root project
npm WARN ERESOLVE overriding peer dependency
npm WARN Found: react-dom#17.0.2
npm WARN node_modules/react-dom
npm WARN react-dom#"17.0.2" from the root project
npm WARN 5 more (#material-ui/core, #material-ui/lab, framer-motion, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react-dom#"^16.0.0" from react-tradingview-widget#1.3.2
npm WARN node_modules/react-tradingview-widget
npm WARN react-tradingview-widget#"^1.3.2" from the root project
npm WARN ERESOLVE overriding peer dependency
npm WARN Found: react#17.0.2
npm WARN node_modules/react
npm WARN react#"17.0.2" from the root project
npm WARN 14 more (#emotion/react, #emotion/styled, #material-ui/core, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react#"^0.14.9 || ^15.3.0 || ^16.0.0-rc || ^16.0" from simplebar-react#2.3.5
npm WARN node_modules/simplebar-react
npm WARN simplebar-react#"^2.3.0" from the root project
npm WARN ERESOLVE overriding peer dependency
npm WARN Found: react-dom#17.0.2
npm WARN node_modules/react-dom
npm WARN react-dom#"17.0.2" from the root project
npm WARN 5 more (#material-ui/core, #material-ui/lab, framer-motion, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react-dom#"^0.14.9 || ^15.3.0 || ^16.0.0-rc || ^16.0" from simplebar-react#2.3.5
npm WARN node_modules/simplebar-react
npm WARN simplebar-react#"^2.3.0" from the root project
npm WARN deprecated querystring#0.2.1: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm WARN deprecated querystring#0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm WARN deprecated react-load-script#0.0.6: abandoned and unmaintained
added 621 packages, and audited 622 packages in 55s
73 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
I would recommend to separate the dependencies with devDependencies
like these packages are should be inside devDependencies
prop-types #next/bundle-analyzer cross-env next-compose-plugins next-transpile-modules
and I think you can remove
const withTM = require('next-transpile-modules')(['swr']);
from the next.config.js -- but not sure it will give you errors or not, I have never put swr into transpile modules before.
and for loading 3rd parties script, try using the new next11 component, rather than using other libraries (https://nextjs.org/docs/basic-features/script)
other that that, I would recommend that you can remove react-icons and use the iconify/eva for the replacement - It is just to reduce same usage library..
Cheers man 😊. It is a hard to optimize loading time and speed for dev or production nevertheless.. can't never be too cautious for any opportunities to improve it.
I'm trying to add npm install react-material-ui-carousel --save to my react project. However when I try to install I get this dependency tree issue.
I have alredy deleted the lock and npm modules files, followed by npm install the whole project. Still getting this same error below however.
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: buckets#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.8.0 || ^17.0.0" from #material-ui/core#4.11.3
npm ERR! node_modules/#material-ui/core
npm ERR! #material-ui/core#"^4.11.2" from the root project
npm ERR! peer #material-ui/core#"^4.9.11" from react-material-ui-carousel#2.2.1
npm ERR! node_modules/react-material-ui-carousel
npm ERR! react-material-ui-carousel#"*" from the root project
npm ERR! 1 more (#material-ui/icons)
npm ERR! 2 more (react-dom, #material-ui/icons)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react#"^16.13.1" from react-material-ui-carousel#2.2.1
npm ERR! node_modules/react-material-ui-carousel
npm ERR! react-material-ui-carousel#"*" 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/user/.npm/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/user/.npm/_logs/2021-03-02T19_57_57_671Z-debug.log
My other dependencies:
{
"name": "app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/core": "^4.11.2",
"#material-ui/icons": "^4.11.2",
"#material-ui/lab": "^4.0.0-alpha.57",
"#reduxjs/toolkit": "^1.5.0",
"#testing-library/jest-dom": "^5.11.6",
"#testing-library/react": "^11.2.2",
"#testing-library/user-event": "^12.6.0",
"axios": "^0.21.1",
"chartist": "^0.10.1",
"react": "^17.0.1",
"react-chartist": "^0.14.4",
"react-dom": "^17.0.1",
"react-hook-form": "^6.14.2",
"react-redux": "^7.2.2",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.1",
"react-window": "^1.8.6",
"redux": "^4.0.5",
"redux-persist": "^6.0.0",
"web-vitals": "^0.2.4"
},
The other option I could try is --legacy-peer-deps, but I would only do that as a last result option if nothing else works.
How can I properly fix the dependency tree error to get react-material-ui-carousel to install in my project?
Add --force or --legacy-peer-deps at the end of your command.
Like such: npm install react-material-ui-carousel --save --legacy-peer-deps
"peerDependencies":{ "react": "^17.0.1"} add this in your package.json
I am using npm version 3.8.6.
I installed the latest Nodejs version, and did this
MacBook-Pro-de-MarceloRS:promo-mobile-ccsearchlp7a Marcelo$ rm -rf node_modules/; npm install
npm WARN deprecated gulp-foreach#0.1.0: Either use gulp-tap or gulp-flatmap, depending on your needs
npm ERR! Darwin 15.0.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "install"
npm ERR! node v6.0.0
npm ERR! npm v3.8.6
npm ERR! Invalid Version: 1.0.5beta
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR! <https://github.com/npm/npm/issues>
npm ERR! Please include the following file with any support request:
npm ERR! /Users/Marcelo/Documents/Projects/BankOfAmericaApps/promo-mobile-ccsearchlp7a/npm-debug.log
MacBook-Pro-de-MarceloRS:promo-mobile-ccsearchlp7a Marcelo$ npm -v
3.8.6
Why do you think it is ?
I am using OSX El Capitan.
EDIT
Here is my package.json
{
"name": "promo-mobile-ccsearchlp7a",
"app": "app",
"dist": "dist",
"version": "2.0.0",
"private": true,
"dependencies": {
"assemble": "~0.9.1",
"browser-sync": "~2.11.1",
"del": "~2.2.0",
"engine-handlebars": "^0.8.0",
"get-value": "~2.0.3",
"gulp": "~3.9.1",
"gulp-autoprefixer": "~3.1.0",
"gulp-cssnano": "~2.1.1",
"gulp-eslint": "~2.0.0",
"gulp-extname": "~0.2.2",
"gulp-filter": "~3.0.1",
"gulp-flatten": "~0.2.0",
"gulp-foreach": "~0.1.0",
"gulp-imagemin": "~2.4.0",
"gulp-load-plugins": "~1.2.0",
"gulp-notify": "~2.2.0",
"gulp-plumber": "~1.1.0",
"gulp-sass": "~2.2.0",
"gulp-sourcemaps": "~1.6.0",
"gulp-uglify": "~1.5.2",
"gulp-usemin": "~0.3.20",
"gulp-util": "~3.0.7",
"handlebars-helpers": "github:assemble/handlebars-helpers#dev",
"main-bower-files": "~2.9.0",
"multimatch": "~2.1.0",
"run-sequence": "~1.1.5"
},
"engines": {
"node": ">=0.12.2"
},
"devDependencies": {
"git-guppy": "~1.1.0",
"gulp-watch": "~4.3.5"
},
"scripts": {
"postinstall": "bower install"
}
}
Mine installed fine. But I note the following:
I installed under Node V5.
You are using Node V6.
I got the following notices:
npm WARN deprecated lodash#1.0.2: lodash#<3.0.0 is no longer maintained. Upgrade to lodash#^4.0.0.
npm WARN deprecated graceful-fs#1.2.3: graceful-fs v3.0.0 and before will fail on node releases >= v6.0. Please update to graceful-fs#^4.0.0 as soon as possible. Use 'npm ls graceful-fs' to find it in the tree.
You need to update you package.json to fetch lodash v4 and graceful-fs v4
(easiest method for me is to remove these two lines from package.json and npm --save install package install the two again
I am trying to create my grunt build but stuck in following error
npm WARN package.json Dependency 'grunt' exists in both dependencies and devDependencies, using 'grunt#~0.4.2' from dependencies
npm ERR! Darwin 13.4.0
npm ERR! argv "node" "/usr/local/bin/npm" "install"
npm ERR! node v0.12.0
npm ERR! npm v2.5.1
npm ERR! code EPEERINVALID
npm ERR! peerinvalid The package grunt does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer grunt-contrib-requirejs#0.4.4 wants grunt#~0.4.0
npm ERR! peerinvalid Peer grunt-config#0.1.8 wants grunt#~0.4.0
npm ERR! peerinvalid Peer grunt-string-replace#0.2.8 wants grunt#~0.4.1
npm ERR! peerinvalid Peer grunt-contrib-clean#0.5.0 wants grunt#~0.4.0
npm ERR! peerinvalid Peer grunt-contrib-cssmin#0.10.0 wants grunt#~0.4.1
npm ERR! peerinvalid Peer grunt-contrib-jshint#0.11.0 wants grunt#~0.4.5
npm ERR! peerinvalid Peer grunt-contrib-uglify#0.8.0 wants grunt#>=0.4.0
npm ERR! peerinvalid Peer grunt-exec#0.4.6 wants grunt#~0.4
As here mentioned, I uninstalled my node,npm and grunt and reinstalled them but still facing same issue ?
Any idea ?
My JSON dependencies are :
"dependencies": {
"grunt": "~0.4.2",
"grunt-contrib-requirejs": "~0.4.1",
"grunt-config": "~0.1.4",
"grunt-string-replace": "~0.2.7",
"grunt-contrib-clean": "~0.5.0",
"grunt-contrib-cssmin": "~0.10.0"
},
"devDependencies": {
"grunt": "0.4.2",
"grunt-cli": "0.1.13",
"grunt-contrib-jshint": ">0.8.0",
"grunt-contrib-uglify": ">0.3.2",
"load-grunt-tasks": ">=0.3.0",
"requirejs": ">=2.1.10",
"grunt-exec": "~0.4.5"
}
Same thing is working fine for my colleague.
I had a similar error like this today, and fixed it by upgrading npm:
npm install -g npm
I had version 2.14 and after upgrading it became 3.8
You declared grunt dependency twice. One for development and one that is not. You also have a different version rule for both. This is what causes the conflict.
You should remove one of these. (usually grunt is part of devdependencies)
dependencies
"grunt": "~0.4.2",
devDependencies
"grunt": "0.4.2",
Edit:
I tested it, this solves the problem:
"dependencies": {
"grunt-contrib-requirejs": "~0.4.1",
"grunt-config": "~0.1.4",
"grunt-string-replace": "~0.2.7",
"grunt-contrib-clean": "~0.5.0",
"grunt-contrib-cssmin": "~0.10.0"
},
"devDependencies": {
"grunt": "~0.4.2",
"grunt-cli": "0.1.13",
"grunt-contrib-jshint": ">0.8.0",
"grunt-contrib-uglify": ">0.3.2",
"load-grunt-tasks": ">=0.3.0",
"requirejs": ">=2.1.10",
"grunt-exec": "~0.4.5"
}
Updating all my global npm packages fixed the issue for me:
npm update -g