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.
Related
I'm trying to run a react app but following errors come.
ERROR in ./node_modules/#mui/styled-engine/GlobalStyles/GlobalStyles.js 3:0-40
ERROR in ./node_modules/#mui/styled-engine/StyledEngineProvider/StyledEngineProvider.js 3:0-47
ERROR in ./node_modules/#mui/styled-engine/index.js 6:0-39
ERROR in ./node_modules/#mui/styled-engine/index.js 30:0-62
ERROR in ./node_modules/#mui/system/esm/ThemeProvider/ThemeProvider.js 11:27-60
ERROR in ./node_modules/#mui/system/esm/index.js 1:0-88
I already tried,
npm i #mui/styled-engine
npm i #mui/system
These are the dependencies in package.json file
"#mui/icons-material": "^5.5.1",
"#mui/material": "^5.5.2",
"#mui/styled-engine": "^5.5.2",
"#mui/system": "^5.5.2",
"#testing-library/jest-dom": "^5.16.2",
"#testing-library/react": "^12.1.4",
"#testing-library/user-event": "^13.5.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-icons": "^4.3.1",
"react-scripts": "5.0.0",
"styled-components": "^5.3.3",
"web-vitals": "^2.1.4"
You need to install these two:
#emotion/react
#emotion/styled
npm i #emotion/react #emotion/styled
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 am trying to install node_modules for my project, but instead of loading the libraries in package.json, npm install the latest ones. Before I used the command npm to install -g npm#latest, did it have any effect?
I tried npm install --force, npm install --legacy-peer-deps, and remove node but it has same error
My package.
{
"name": "",
"version": "0.1.0",
"private": true,
"homepage": ".",
"dependencies": {
"#ant-design/icons": "^4.0.0",
"#ant-design/pro-descriptions": "^1.2.0",
"#ant-design/pro-form": "^1.15.1",
"#ant-design/pro-layout": "^6.9.4",
"#ant-design/pro-table": "^2.17.3",
"#ant-design/pro-utils": "^1.8.0",
"#react-hook/resize-observer": "^1.2.0",
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"#types/jest": "^26.0.15",
"#types/lodash": "^4.14.168",
"#types/node": "^12.0.0",
"#types/react": "^16.9.53",
"#types/react-dom": "^16.9.8",
"#types/react-router-dom": "^5.1.7",
"antd": "^4.11.1",
"antd-img-crop": "^3.14.1",
"axios": "^0.21.1",
"cookies": "^0.8.0",
"env-cmd": "^10.1.0",
"exceljs": "^4.2.0",
"file-saver": "^2.0.5",
"immer": "^8.0.1",
"js-cookie": "^2.2.1",
"less": "^4.1.0",
"less-loader": "^7.3.0",
"loadable": "^1.0.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-intl": "^5.10.18",
"react-redux": "^7.2.2",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.1",
"read-excel-file": "^5.0.0",
"redux-injectors": "^1.3.0",
"redux-saga": "^1.1.3",
"typed-redux-saga": "1.2.0",
"typescript": "^4.0.3",
"web-vitals": "^0.2.4",
"xlsx": "^0.16.9"
}
Error Screenshot
Thanks so much
The caret ^ means it can install the most recent compatible version. If you want it to install a specific version, you can remove the ^ in front of the versions.
See package.json docs
and semver
The caret will let it install a later version that doesn't change the first number. For instance your package.json specifies ^4.0.0 for #ant-design/icons, but it installed 4.6.2. Since the 4 didn't change, that is acceptable.
I'm using React Material UI and I get this error : Module not found: Can't resolve '#date-io/date-fns'.
Here are the dependencies that I have in my package.json file :
"dependencies": {
"#date-io/date-fns": "^2.0.0",
"#material-ui/core": "^4.9.5",
"#material-ui/pickers": "^3.2.10",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"axios": "^0.19.2",
"date-fns": "^2.0.0",
"react": "^16.13.0",
"react-dom": "^16.13.0",
"react-facebook-login": "^4.1.1",
"react-google-login": "^5.1.14",
"react-google-maps": "^9.4.5",
"react-hook-form": "^5.2.0",
"react-router": "^5.1.2",
"react-router-dom": "^5.1.2",
"react-scripts": "3.4.0"
},
I tried installing the last version of date-io/date-fns, then tried the version 2.0.0 and version 1.0.0 and I still get the same error.
$ npm i date-fns#next #date-io/date-fns#1.x
reference:
https://github.com/mui-org/material-ui-pickers/issues/240
https://github.com/dmtrKovalenko/date-io/issues/33
Reference: https://material-ui-pickers.dev/getting-started/installation#peer-library
Important: For material-ui-pickers v3 use v1.x version of #date-io
adapters.
npm i #date-io/date-fns#1.x date-fns
// or
npm i #date-io/moment#1.x moment
// or
npm i -s #date-io/luxon#1.x luxon
// or
npm i -s #date-io/dayjs#1.x dayjs
You can check this Commands...
yarn add date-fns
or
npm i date-fns
In my code, I have used "import DateFnsUtils from "#date-io/date-fns/build/date-fns-utils", which caused "Module not found: Error: Can't resolve '#date-io/date-fns/build/date-fns-utils' ..." exception.
I have fixed this by importing from #date-io/date-fns'.
import DateFnsUtils from '#date-io/date-fns';
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"
}