NPM UNMET PEER DEPENDENCY questionmarks

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

@deecris27 Have a good response, but if you not find solution for your question you can read this https://stackoverflow.com/questions/35738346/how-do-i-fix-the-npm-unmet-peer-dependency-warning — Fiodorov Andrei, Nov 15 '21 at 08:13
1. Try installing the latest version of npm globally `npm install npm@latest -g`. 2. If didn't work, try installing all of the dependencies `npm install --save` 3. If didn't work, there is also `yarn`. — Amini, Nov 15 '21 at 08:19
@FiodorovAndrei don't you see he has already tried installing the suggested unmet dependency already and it didn't help. I wouldn't prefer downgrading any module though. — dee, Nov 15 '21 at 13:29

dee · Accepted Answer · 2021-11-17T07:22:38.450

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

That whole process seemed to have helped. Bit odd that it gets in a state like that. Would be amazing to fully understand it one day. Thanks for the help, Much appreciated. — morne, Nov 17 '21 at 13:58

score 0 · Answer 2 · answered Nov 15 '21 at 08:24

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.

NPM UNMET PEER DEPENDENCY questionmarks

2 Answers2