NPM UNMET PEER DEPENDENCY questionmarks - reactjs

Question

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"
}
},
.
.
.

Answer 1

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

Answer 2

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.