npm installs different version than specified in package.json, how is this possible ? how to fix this?

Question

If I use the package.json given below to execute npm install then that will install react-15.4.2 (see npm ls below) even though I specified version 15.3.2.

How is this possible ?

Why is this happening?

How can I avoid this ?

content of package.json:

{
  "name": "sbt-demo",
  "version": "0.1.0",
  "description": "Webpack configuration for sbt-demo",
  "license": "GPL-3.0",
  "scripts": {
    "build": "webpack --config webpack.config.prod.js",
    "dist": "webpack --config webpack.config.prod.js"
  },
  "devDependencies": {
    "compression-webpack-plugin": "^0.2.0",
    "css-loader": "^0.23.0",
    "file-loader": "^0.8.4",
    "ghooks": "^1.3.2",
    "gulp-decompress": "^1.1.0",
    "image-webpack-loader": "^1.6.1",
    "imagemin": "^4.0.0",
    "lodash": "^4.14.1",
    "node-libs-browser": "^0.5.2",
    "react-hot-loader": "^1.2.7",
    "style-loader": "^0.13.0",
    "url-loader": "^0.5.6",
    "webpack": "^1.9.10",
    "webpack-dev-server": "^1.9.0"
  },
  "dependencies": {
    "highlight.js": "8.9.1",
    "material-ui": "^0.15.2",
    "react": "^15.3.2",
    "react-addons-create-fragment": "15.3.2",
    "react-addons-css-transition-group": "15.3.2",
    "react-addons-pure-render-mixin": "15.3.2",
    "react-addons-transition-group": "15.3.2",
    "react-addons-update": "15.3.2",
    "react-dom": "^15.3.2",
    "react-geomicons": "^2.0.4",
    "react-grid-layout": "^0.13.9",
    "react-infinite": "^0.7.1",
    "react-select": "^1.0.0-beta",
    "react-sortable-hoc": "^0.2.0",
    "react-spinner": "^0.2.3",
    "react-tagsinput": "^3.0.3",
    "react-tap-event-plugin": "^1.0.0",
    "svg-loader": "0.0.2"
  }
}

npm ls gives:

├─┬ [email protected]
│ ├─┬ [email protected]
│ │ ├── [email protected]
│ │ ├─┬ [email protected]
│ │ │ ├─┬ [email protected]
│ │ │ │ └─┬ [email protected]
│ │ │ │   └── [email protected]
│ │ │ └── [email protected]
│ │ ├─┬ [email protected]
│ │ │ └── [email protected]
│ │ ├── [email protected]
│ │ └── [email protected]
│ └─┬ [email protected]
│   └── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├─┬ [email protected]
│ └── [email protected]
├─┬ [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ └── [email protected]
├─┬ [email protected]
│ ├── [email protected]
│ └─┬ [email protected]
│   └── [email protected]
├─┬ [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├─┬ [email protected]
│ │ ├─┬ [email protected]
│ │ │ ├─┬ [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├─┬ [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ └─┬ [email protected]
│ │ │ │ │   ├── [email protected]
│ │ │ │ │   ├── [email protected]
│ │ │ │ │   └── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ └── [email protected]

Answer 1

Since you gave "react" a caret sign "react": "^15.3.2" it will always fetch the latest version which is less than 16.0.0.

To get the exact version of react remove the caret before the version "react": "15.3.2".

But by doing so you have to manually check/change the version dependencies for other dependencies which use react. Since they might be incompatible with the version of react you specify.

For official docs refer https://docs.npmjs.com/misc/semver#caret-ranges-123-025-004.