I'm not able to install react-intl.It keeps throwing error
├── UNMET PEER DEPENDENCY react#0.13.3 └── react-intl#2.1.3
npm WARN react-dom#15.3.0 requires a peer of react#^15.3.0 but none
was installed.
npm WARN react-intl#2.1.3 requires a peer of
react#^0.14.0 || ^15.0.0-0 but none was installed.
npm WARN
react-native#0.30.0 requires a peer of react#~15.2.0 but none was
installed.
This is my package.json
"dependencies": {
"baobab": "^1.1.2",
"baobab-react": "^0.1.1",
"d3": "^3.5.6",
"fixed-data-table": "^0.4.6",
"json2csv": "^2.12.0",
"lodash": "^3.10.1",
"moment": "^2.10.6",
"numeral": "^1.5.3",
"react": "^0.13.3",
"react-hot-loader": "^1.3.0",
"react-motion": "^0.2.7",
"react-router": "^0.13.3",
"react-style": "^0.5.5",
"react-style-webpack-plugin": "^0.4.0",
"scroller": "0.0.3",
"superagent": "^1.3.0" },
"devDependencies": {
"babel": "^5.8.23",
"babel-core": "^5.8.23",
"babel-jest": "^5.3.0",
"babel-loader": "^5.3.2",
"esdoc": "^0.2.5",
"file-loader": "^0.8.4",
"jest-cli": "^0.5.8",
"webpack": "^1.12.2",
"webpack-dev-server": "^1.10.1"
}
Your react version is just ^0.13.3. It means you will get only 0.13.x where x is the largest minor version react is publishing. Looking at the package.json of react-intl, you need 0.14.x or 15.
"peerDependencies": {
"react": "^0.14.0 || ^15.0.0-0"
},
https://github.com/yahoo/react-intl/blob/master/package.json
It means you have to update your package.json to (note that react becomes 0.14.0:
"dependencies":{
"baobab":"^1.1.2",
"baobab-react":"^0.1.1",
"d3":"^3.5.6",
"fixed-data-table":"^0.4.6",
"json2csv":"^2.12.0",
"lodash":"^3.10.1",
"moment":"^2.10.6",
"numeral":"^1.5.3",
"react":"^0.14.0",
"react-hot-loader":"^1.3.0",
"react-motion":"^0.2.7",
"react-router":"^0.13.3",
"react-style":"^0.5.5",
"react-style-webpack-plugin":"^0.4.0",
"scroller":"0.0.3",
"superagent":"^1.3.0"
},
"devDependencies":{
"babel":"^5.8.23",
"babel-core":"^5.8.23",
"babel-jest":"^5.3.0",
"babel-loader":"^5.3.2",
"esdoc":"^0.2.5",
"file-loader":"^0.8.4",
"jest-cli":"^0.5.8",
"webpack":"^1.12.2",
"webpack-dev-server":"^1.10.1"
}
Related
Warning in console:
warning "react-scripts > eslint-config-react-app > eslint-plugin-flowtype#8.0.3" has unmet peer dependency "#babel/plugin-syntax-flow#^7.14.5".
warning "react-scripts > eslint-config-react-app > eslint-plugin-flowtype#8.0.3" has unmet peer dependency "#babel/plugin-transform-react-jsx#^7.14.9".
warning " > #testing-library/user-event#13.5.0" has unmet peer dependency "#testing-library/dom#>=7.21.4".
This warning appears when I install or remove packages. I don't know what I need to do with this.
Yarn version:
$ yarn -v
1.22.17
Dependencies in package.json:
"dependencies": {
"axios": "^0.24.0",
"dotenv": "^10.0.0",
"mobx": "^6.5.0",
"mobx-react-lite": "^3.3.0",
"node-sass": "^7.0.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-dropzone": "^12.0.4",
"react-hook-form": "^7.29.0",
"react-id-swiper": "^4.0.0",
"react-router-dom": "^6.2.1",
"react-scripts": "5.0.0",
"react-transition-group": "^4.4.2",
"swiper": "^7.4.1",
"web-vitals": "^2.1.2"
},
"devDependencies": {
"#testing-library/jest-dom": "^5.16.1",
"#testing-library/react": "^12.1.2",
"#testing-library/user-event": "^13.5.0",
"#types/dotenv": "^8.2.0",
"#types/jest": "^27.4.0",
"#types/node": "^16.11.17",
"#types/react": "^17.0.38",
"#types/react-dom": "^17.0.11",
"prettier": "^2.5.1",
"typescript": "^4.5.4"
}
Actually i even removed node_modules and did yarn install, but it didn't help me as you can see.
Also I tried to install this dependencies but it caused new errors which broke my app.
A peer dependency should be installed by yourself. Usually, the purpose is to prevent version conflicts.
So, when you read a message such as:
warning "react-scripts > eslint-config-react-app > eslint-plugin-flowtype#8.0.3" has unmet peer dependency "#babel/plugin-syntax-flow#^7.14.5".
It simply means that the dependency eslint-plugin-flowtype that you are (indirectly) using (through react-scripts) requires that you add #babel/plugin-syntax-flow also as dependency in your package.json.
Im using npm version 6.17.1
I have React 15.4.0 installed
I try and install npm install pretty-checkbox which gives me
+-- UNMET PEER DEPENDENCY popper.js#^1.16.0
+-- pretty-checkbox#3.0.3
`-- UNMET PEER DEPENDENCY react#15.4.0
I then try and install popper.js and get
+-- popper.js#1.16.0
`-- UNMET PEER DEPENDENCY react#15.4.0
So then I try and install react again. npm i react#15.4.0 and is then met with
`-- UNMET PEER DEPENDENCY react#15.4.0
So Im at a loss why and how this is suppose to work
Package.js
{
"private": true,
"scripts": {
"transport": "watchify js/app.js -v -t babelify -p livereactload -o public/js/bundle.js",
"ES6-to-ES5": "npx babel es6 --watch --presets babel-preset-env --out-dir js",
"watch": "gulp medicus-watch"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-plugin-react-transform": "^2.0.2",
"babel-plugin-transform-object-rest-spread": "^6.23.0",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"bootstrap-sass": "^3.3.7",
"browserify": "^14.3.0",
"cross-env": "^3.2.3",
"del": "^2.2.2",
"fakerator": "^0.3.0",
"gulp": "^3.9.1",
"gulp-concat": "^2.6.1",
"gulp-less": "^3.3.0",
"gulp-livereload": "^3.8.1",
"gulp-uglify": "^3.0.0",
"gulp-zip": "^4.0.0",
"laravel-elixir": "^5.0.0",
"laravel-mix": "0.*",
"livereactload": "^3.3.0",
"lodash": "^4.17.4",
"react-proxy": "^1.1.8",
"vinyl-buffer": "^1.0.0",
"vinyl-source-stream": "^1.1.0",
"vue": "^2.1.10",
"watchify": "^3.9.0"
},
"dependencies": {
"axios": "^0.15.3",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babelify": "^7.3.0",
"create-react-class": "^15.6.0",
"draft-js": "^0.11.4",
"draftjs-to-html": "0.9.1",
"fixed-data-table-2": "^0.7.17",
"jquery": "^3.2.1",
"moment": "^2.18.1",
"node-sass": "^4.5.3",
"pretty-checkbox": "^3.0.3",
"prop-types": "^15.5.10",
"ramda": "^0.23.0",
"react": "^15.4.0",
"react-bootstrap": "^0.31.0",
"react-bootstrap-datetimepicker": "0.0.22",
"react-dom": "^15.4.0",
"react-draft-wysiwyg": "^1.14.4",
"react-google-charts": "^1.5.5",
"react-native-html-to-pdf": "^0.8.0",
"react-radio-buttons": "^1.2.2",
"react-redux": "^4.3.0",
"react-router": "^4.1.1",
"react-router-dom": "^4.2.2",
"react-sortable-hoc": "^0.6.8",
"react-widgets": "^3.4.8",
"redux": "^3.7.2",
"redux-form": "^6.8.0",
"redux-promise": "^0.5.3",
"redux-thunk": "^2.2.0"
},
"browserify": {
"transform": [
[
"babelify"
]
]
}
}
Package-lock.json
.
.
.
"react": {
"version": "15.4.0",
"resolved": "https://registry.npmjs.org/react/-/react-15.4.0.tgz",
"integrity": "sha1-c2wcfFQugIgScQbh9FCwEPhtFys=",
"requires": {
"fbjs": "^0.8.4",
"loose-envify": "^1.1.0",
"object-assign": "^4.1.0"
}
},
.
.
.
I could see pretty-checkbox's developer last published 4 years ago.
Let's say the new module used popper-js#2.0 and someone who already had popper-js#4.0 as direct or sub-dependency in their project is more likely to face unmet peer dependency on using the new module.
Downgrading the version is not recommended due to possible conflict with other modules. A workaround would be to add resolutions.
Before doing anything, ensure there is no other version of react installed globally, delete your node-modules folder and package-lock.json file. Ensure your package.json dependency has react#15.4.0 and only add popperjs#^1.16.0 if you're sure that other modules in your project are not relying on later versions of popperjs.
Take a look at this article for a good explanation on peer dependencies
If there are other modules that needs other versions of popperjs then in your package.json you could add an additional property at the end like below,
{
.....,
"browserify": {
"transform": [
[
"babelify"
]
]
},
"resolutions": {
popperjs: "^1.16.0"
}
}
Note:- You're not removing the previous version, resolutions will just pin your sub-dependency to the specified version.
Good Read:- https://medium.com/learnwithrahul/understanding-npm-dependency-resolution-84a24180901b
I often try this when nothing makes sense:
Removing the node modules folder and Package-lock.json file.
Reset the package.json file to the last stable commit using git.
Then clear npm cache and run npm install.
And at the end try to install the package pretty-checkbox.
I had to make some changes on react-big-calendar module so I forked the project on github, made modifications and pushed. Then I used this command to install the new package:
npm install https://github.com/wafa-yahyaoui/react-big-calendar/tarball/master --save
The package figures out in the dependencies on package.json:
"dependencies": {
"#babel/runtime": "7.0.0-beta.55",
"#fortawesome/fontawesome-svg-core": "^1.2.10",
"#fortawesome/free-solid-svg-icons": "^5.6.1",
"#fortawesome/react-fontawesome": "^0.1.3",
"#material-ui/core": "^3.6.2",
"#material-ui/icons": "^2.0.3",
"#types/googlemaps": "3.30.11",
"#types/markerclustererplus": "2.1.33",
"ajv": "6.5.2",
"axios": "^0.18.0",
"bootstrap": "^4.1.3",
"chartist": "^0.11.0",
"classnames": "2.2.6",
"emotion": "^10.0.5",
"enhanced-resolve": "^3.4.1",
"globalize": "^1.4.0",
"history": "^4.7.2",
"iban": "0.0.11",
"jwt-decode": "^2.2.0",
"moment": "2.22.2",
"perfect-scrollbar": "1.4.0",
"react": "^16.6.3",
"react-big-calendar": "https://github.com/wafa-yahyaoui/react-big-calendar/tarball/master",
"react-bootstrap-sweetalert": "^4.4.1",
"react-chartist": "^0.13.1",
"react-datetime": "^2.16.3",
"react-dom": "^16.6.3",
"react-facebook-pixel": "^0.1.2",
"react-ga": "^2.5.6",
"react-google-maps": "^9.4.5",
"react-jvectormap": "0.0.3",
"react-nouislider": "2.0.1",
"react-redux": "^5.1.1",
"react-router": "4.3.1",
"react-router-dom": "^4.3.1",
"react-router-redux": "^5.0.0-alpha.9",
"react-scripts": "1.1.4",
"react-spinners": "^0.4.7",
"react-swipeable-views": "0.12.15",
"react-table": "6.8.6",
"react-tagsinput": "3.19.0",
"react-transition-group": "^1.2.1",
"reactstrap": "^6.5.0",
"redux": "^4.0.1",
"redux-api-middleware": "^2.3.0",
"redux-persist": "^5.10.0",
"redux-persist-transform-filter": "0.0.18",
"redux-thunk": "^2.3.0",
"universal-cookie": "^3.0.7"}
I removed the node_modules folder, ran npm install but when running npm start I got this error:
./src/containers/apartments/calendar.js
Module not found: Can't resolve 'react-big-calendar' in
'/Users/wafayahyaoui/homereact/src/containers/apartments'
The imports on calendar.js file looks like this:
import React from "react";
import BigCalendar from "react-big-calendar";
What can be the source if the import error ? thank you
I was facing same issue. It took 3-4 hours to figure out what is problem. Here is a solution.
Run Command - npm run build - which build dist and lib folder.
remove dist and lib from .gitignore file.
Push your code.
If you see package-lock.json carefully, there is a line "main": "lib/index.js" which point to lib folder. But when you forked react-big-calendar repo, there was no lib folder in this repo, there was only src folder.
So it was cleared that fisrt you have to build code and push it on your repo.
I had a similar problem, so maybe it would be helpful to someone. main property from package.json was pointing to the built file which wasn't accessible, so I added a prepare script to run build before publishing the package.
"main": "dist/index.js",
"scripts": {
"prepare": "npm run build"
}
Use command :
npm i react-big-calendar
I was using react#15.6.2 but was trying to update to 16.2.0
I've deleted the node_modules folder, then execute npm cache clean and npm install
However, the console keeps showing this message
UNMET PEER DEPENDENCY react#15.6.2 invalid
And after I run my webpack server, the browser just throws an error message:
Cannot read property 'ReactCurrentOwner' of undefined
Why is the happening?
Here is what my package.json looks like:
"devDependencies": {
"autoprefixer": "^6.3.6",
"babel-core": "^6.8.0",
"babel-loader": "^6.2.4",
"babel-plugin-transform-class-properties": "^6.8.0",
"babel-plugin-transform-runtime": "^6.8.0",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-0": "^6.5.0",
"css-loader": "^0.23.1",
"eslint": "^2.9.0",
"eslint-config-airbnb": "^9.0.1",
"eslint-plugin-import": "^1.8.0",
"eslint-plugin-jsx-a11y": "^1.2.0",
"eslint-plugin-react": "^5.1.1",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.8.5",
"firebase": "^4.13.0",
"history": "^4.7.2",
"html-webpack-plugin": "^2.16.1",
"install": "^0.11.0",
"less": "^2.7.1",
"less-loader": "^2.2.3",
"open-browser-webpack-plugin": "0.0.2",
"postcss-loader": "^2.1.4",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-icons": "^2.2.7",
"react-route": "^1.0.3",
"react-router-dom": "^4.2.2",
"rimraf": "^2.5.2",
"style-loader": "^0.13.1",
"styled-components": "^3.2.3",
"url-loader": "^0.5.7",
"webpack": "^1.13.0",
"webpack-dev-server": "^1.14.1"
}
I just solved the problem.
What bothers me is that even if you delete the node_modules folder, the package version just stays the same(the old one). And I still don't know why
So I uninstall both react and react-dom due to the error message of npm ls react indicates that :
npm ERR! peer dep missing: react#^16.0.0, required by react-dom#16.2.0
After re-installing them by executing npm install react#16.2.0 and npm install react-dom#16.2.0, the error message of browser disappear ! :)
I'm getting following warnings while running npm commands, how to update these dependencies ?
npm WARN deprecated graceful-fs#3.0.8: graceful-fs version 3 and before will fail on newer node releases. Please update to graceful-fs#^4.0.0 as soon as possible.
npm WARN deprecated lodash#1.0.2: lodash#<3.0.0 is no longer maintained. Upgrade to lodash#^4.0.0.
npm WARN deprecated npmconf#2.1.1: this package has been reintegrated into npm and is now out of date with respect to npm
My package.json -
{
"name": "lib",
"version": "0.0.0",
"author": {
"name": "user",
"email": "user#gmail.com"
},
"dependencies": {
"gulp-install": "^0.6.0",
"lodash": "^4.5.1"
},
"devDependencies": {
"chai": "^1.9.1",
"chai-jquery": "^1.2.3",
"karma-mocha-reporter": "^0.3.1",
"gulp": "^3.8.7",
"gulp-concat": "^2.3.4",
"gulp-rename": "^1.2.0",
"gulp-uglify": "^0.3.1",
"karma": "^0.12.22",
"karma-chai": "^0.1.0",
"karma-chai-jquery": "^1.0.0",
"karma-chrome-launcher": "^0.1.4",
"gulp-ng-annotate": "^0.3.3",
"karma-jasmine": "^0.1.5",
"karma-jquery": "^0.1.0",
"karma-mocha": "^0.1.8",
"karma-phantomjs-launcher": "^0.1.4",
"karma-sinon-chai": "^0.2.0",
"mocha": "^1.21.4",
"sinon": "^1.10.3",
"sinon-chai": "^2.5.0"
},
"engines": {
"node": ">=0.8.0"
}
}
You have packages, which are using old versions of these plugins.
You won't get rid of these warnings, till the developers of the packages upgrading their plugins (with the dependencies).
You can print all versions with all dependencies to find the targets:
bower list --depth=2
npm list --depth=2
Increase the depth if you don't find them.