6

enter image description here

Please check the picture.

I guess it's related to package.json but am not very sure.

Replying to the comment for more information

Initially I was installing material-ui.

The detailed messages are here:

I:\react-boilerplate>npm install material-ui

react-boilerplate@3.4.0 I:\react-boilerplate

+-- material-ui@0.17.1

| +-- keycode@2.1.8

| +-- lodash.throttle@4.1.1

| +-- UNMET PEER DEPENDENCY react@^15.4.2

| +-- react-addons-create-fragment@15.4.2

| +-- react-addons-transition-group@15.4.2

| +-- react-event-listener@0.4.3

| | +-- UNMET PEER DEPENDENCY react@^15.4.2

| | `-- react-addons-shallow-compare@15.4.2

| +-- recompose@0.22.0

| | `-- change-emitter@0.1.3

| `-- simple-assign@0.1.0

+-- UNMET PEER DEPENDENCY react-tap-event-plugin@^2.0.1

`-- UNMET PEER DEPENDENCY webpack@2.2.0-rc.3

Then I was trying to fix the UNMET PEER DEPENDENCY by npm install them.

The first attempt gives this:

react-boilerplate@3.4.0 I:\react-boilerplate

+-- react@15.4.2 invalid

+-- react-tap-event-plugin@2.0.1

`-- UNMET PEER DEPENDENCY webpack@2.2.0-rc.3

`-- webpack-sources@0.1.5

As you can see this is the first invalid I met.

So I'm just trying to figure out why this invalid pops out and how to fix it.

Replying to the comment for more information

Here is the package.json, dependencies section

"dependencies": { "babel-polyfill": "6.20.0", "chalk": "1.1.3", "compression": "1.6.2", "cross-env": "3.1.3", "express": "4.14.0", "fontfaceobserver": "2.0.7", "immutable": "3.8.1", "intl": "1.2.5", "invariant": "2.2.2", "ip": "1.1.4", "lodash": "4.17.2", "minimist": "1.2.0", "react": "15.4.1", "react-dom": "15.4.1", "react-helmet": "3.2.2", "react-intl": "2.1.5", "react-redux": "4.4.6", "react-router": "3.0.0", "react-router-redux": "4.0.6", "react-router-scroll": "0.4.1", "redux": "3.6.0", "redux-immutable": "3.0.8", "redux-saga": "0.14.0", "reselect": "2.5.4", "sanitize.css": "4.1.0", "styled-components": "1.1.2", "warning": "3.0.0", "whatwg-fetch": "2.0.1" },

and the devDependencies section

"devDependencies": { "babel-cli": "6.18.0", "babel-core": "6.21.0", "babel-eslint": "7.1.1", "babel-loader": "6.2.10", "babel-plugin-dynamic-import-node": "1.0.0", "babel-plugin-react-intl": "2.2.0", "babel-plugin-react-transform": "2.0.2", "babel-plugin-transform-es2015-modules-commonjs": "6.18.0", "babel-plugin-transform-react-constant-elements": "6.9.1", "babel-plugin-transform-react-inline-elements": "6.8.0", "babel-plugin-transform-react-remove-prop-types": "0.2.11", "babel-preset-latest": "6.16.0", "babel-preset-react": "6.16.0", "babel-preset-react-hmre": "1.1.1", "babel-preset-stage-0": "6.16.0", "cheerio": "0.22.0", "circular-dependency-plugin": "2.0.0", "coveralls": "2.11.15", "css-loader": "0.26.1", "enzyme": "2.6.0", "eslint": "3.11.1", "eslint-config-airbnb": "13.0.0", "eslint-config-airbnb-base": "10.0.1", "eslint-import-resolver-webpack": "0.8.0", "eslint-plugin-import": "2.2.0", "eslint-plugin-jsx-a11y": "2.2.3", "eslint-plugin-react": "6.7.1", "eslint-plugin-redux-saga": "0.1.5", "eventsource-polyfill": "0.9.6", "exports-loader": "0.6.3", "file-loader": "0.9.0", "html-loader": "0.4.4", "html-webpack-plugin": "2.24.1", "image-webpack-loader": "2.0.0", "imports-loader": "0.6.5", "jest-cli": "18.0.0", "lint-staged": "3.2.1", "ngrok": "2.2.4", "node-plop": "0.5.4", "null-loader": "0.1.1", "offline-plugin": "4.5.2", "plop": "1.7.3", "pre-commit": "1.1.3", "react-addons-test-utils": "15.4.1", "rimraf": "2.5.4", "shelljs": "0.7.5", "sinon": "2.0.0-pre", "style-loader": "0.13.1", "url-loader": "0.5.7", "webpack": "2.2.0-rc.3", "webpack-dev-middleware": "1.9.0", "webpack-hot-middleware": "2.15.0" }

Marson Mao
  • 2,935
  • 6
  • 30
  • 45

2 Answers2

5

An invalid dependency here suggests that an inappropriate version of a dependency package was installed. In this case, your project is requesting webpack@2.2.0-rc3, but version 2.2.1 was installed instead. Note that there is no caret (^) or tilde (~) in the version range, which means that 2.2.1 is not a valid match.

Another conflict happens with React, which is fixed at version 15.4.1 and should be upgraded to the version range ^15.4.2, as required by other dependencies (such as material-ui).

In order to set a new version of a dependency (to upgrade/downgrade it), don't forget the respective save flag (--save/-S or --save-dev/-D).

npm install -S react@^15.4.2

Unfortunately, react-tap-event-plugin depends on version 2.2.0-rc3 webpack, so you should not upgrade webpack. Instead, you can call npm update --dev to make sure that all registered dependencies are installed with the right versions. If all else fails, a naive but effective trick is to remove the node_modules folder and install all packages from scratch.

E_net4
  • 27,810
  • 13
  • 101
  • 139
  • Okay sounds great. Just want to confirm all details: the `invalid` message is suggesting a version conflict, however the conflicted dependency has still been successfully installed, is it? Like, the `devDepdencies` wants `2.2.0-rc3`, and I installed `2.2.1`, so it tells me `invalid`, but it still allows me to do so, right? – Marson Mao Apr 07 '17 at 10:28
  • Oh and, how did you find out that `react-tap-event-plugin` depends on `2.2.0-rc3`? – Marson Mao Apr 07 '17 at 10:30
  • Oops I think I was providing the wrong package.json content in my post, I've correct it with the correct github content, but the `devDependencies` for `webpack` is still `2.2.0-rc3`, so I think your answer is still valid. – Marson Mao Apr 07 '17 at 10:35
  • 1. npm does not forbid you to install invalid versions of a package, if that is what you are wondering. The best thing to do once you have a package is to use `npm update` and meticulously upgrade dependencies. [This](http://stackoverflow.com/a/33344550/1233251) other answer of mine provides some tips. 2. `react-tap-event-plugin` seems to depend on webpack@2.2.0-rc3 because it's right there in your logs. ;) 3. I will update my answer accordingly. – E_net4 Apr 07 '17 at 10:51
0

I've seen this error occur when doing an npm install Path\Filename.tgz where the filename is different on subsequent npm install calls than the original installation.

Specifically, on Windows OS where path\filename case doesn't matter.

For example, I installed with a folder name that had an upper case beginning character and then on subsequent calls, I was using the lower case name. This caused the package to not be installed and generated the red, invalid warning next to the package name.

Inspect the package.json and use the exact path and filename and see if that fixes it for you.

Curt Keisler
  • 138
  • 3
  • 9