"npm install" gives error message "invalid", what is it?

Question

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

Answer 1

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.

Answer 2

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.