"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

[email protected] I:\react-boilerplate

+-- [email protected]

| +-- [email protected]

| +-- [email protected]

| +-- UNMET PEER DEPENDENCY react@^15.4.2

| +-- [email protected]

| +-- [email protected]

| +-- [email protected]

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

| | `-- [email protected]

| +-- [email protected]

| | `-- [email protected]

| `-- [email protected]

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

`-- UNMET PEER DEPENDENCY [email protected]

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

The first attempt gives this:

[email protected] I:\react-boilerplate

+-- [email protected] invalid

+-- [email protected]

`-- UNMET PEER DEPENDENCY [email protected]

`-- [email protected]

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

Solution

An invalid dependency here suggests that an inappropriate version of a dependency package was installed. In this case, your project is requesting [email protected], 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.