npm WARN The package is included as both a dev and production dependency

Question

When running npm install

I got these warning:

npm WARN The package babel-core is included as both a dev and production dependency.
npm WARN The package babel-loader is included as both a dev and production dependency.
npm WARN The package babel-preset-react is included as both a dev and production dependency.
npm WARN The package redux-thunk is included as both a dev and production dependency.
npm WARN The package uglifyjs is included as both a dev and production dependency.

up to date in 7.183s
npm WARN The package babel-core is included as both a dev and production dependency.
npm WARN The package babel-loader is included as both a dev and production dependency.
npm WARN The package babel-preset-react is included as both a dev and production dependency.
npm WARN The package redux-thunk is included as both a dev and production dependency.
npm WARN The package uglifyjs is included as both a dev and production dependency.

package.json file:

{
 ...
  "dependencies": {
    "axios": "^0.15.3",
    "babel-core": "^6.10.4",
    "babel-loader": "^6.2.4",
    "babel-polyfill": "^6.9.1",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-react": "^6.11.1",
    "babel-preset-stage-2": "^6.24.1",
    "babel-register": "^6.9.0",
    "bluebird": "^3.5.0",
    "bootstrap-sass": "^3.3.7",
    "classnames": "^2.2.5",
    "console-polyfill": "^0.2.3",
    "cross-env": "^1.0.8",
    "css-loader": "^0.23.1",
    "deepmerge": "^1.3.2",
    "dom-helpers": "^3.0.0",
    "expect": "^1.20.1",
    "fuzzy": "^0.1.3",
    "moment": "^2.18.1",
    "node-libs-browser": "^1.0.0",
    "node-sass": "^3.8.0",
    "react": "^15.1.0",
    "react-addons-shallow-compare": "15.4.0",
    "react-addons-test-utils": "^15.1.0",
    "react-axios": "0.0.9",
    "react-bootstrap-daterangepicker": "^3.2.2",
    "react-daterange-picker": "^1.1.0",
    "react-dom": "^15.1.0",
    "react-draggable": "^2.2.3",
    "react-redux": "^4.4.8",
    "react-router": "^3.0.2",
    "react-virtualized": "^8.5.2",
    "redux": "^3.6.0",
    "redux-logger": "^2.6.1",
    "redux-promise": "^0.5.3",
    "redux-promise-middleware": "^4.2.0",
    "redux-thunk": "^2.1.0",
    "sass-loader": "^4.0.0",
    "style-loader": "^0.13.1",
    "uglifyjs": "=2.4.10",
    "webpack-dev-middleware": "^1.6.1",
    "webpack-dev-server": "^1.14.1",
    "webpack-hot-middleware": "^2.11.0"
  },
  "devDependencies": {
    "assets-webpack-plugin": "^3.5.1",
    "babel-core": "^6.24.1",
    "babel-loader": "^7.0.0",
    "babel-plugin-add-module-exports": "^0.2.1",
    "babel-plugin-react-transform": "^2.0.2",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-preset-es2016": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-3": "^6.24.1",
    "didyoumean": "^1.2.1",
    "extract-text-webpack-plugin": "^1.0.1",
    "glob": "^7.1.1",
    "postcss-loader": "^1.3.0",
    "purifycss-webpack-plugin": "^2.0.3",
    "react-transform-hmr": "^1.0.4",
    "redux-thunk": "^2.2.0",
    "uglifyjs": "=2.4.10",
    "webpack": "^1.15.0",
    "webpack-cleanup-plugin": "^0.5.1",
    "webpack-split-chunks": "^0.1.1"
  }
}

Noticed that there were different versions installed. What exactly happens when there are two versions of the same package installed for dev and prod? Is this normal behavior? Should I get rid of the dupe references in the package.json file?

Answer 1

My use-case is exactly what @Jim pointed out in the comment of the accepted answer, In development I wanted to use my local module files as I was working on it the same time I worked on my other projects using it. In production I would use the module from VCS, and I don't want to manually change the package.json file every time.

This is how I set up my package.json:

"dependencies": {
  "module-name": "git+ssh://git@bitbucket.org/XXX/XXX.git#master"
},
"devDependencies": {
  "module-name-dev": "file:../XXX"
}

With this setup, npm doesn't give me any errors, because the modules name are different, now what left to do is to require the dev package in development instead the main one.

I found the module-alias package, it allows you to use alias names for paths you want to require.

In your app.js file at the very beginning you need to add this code:

if (process.env.NODE_ENV === 'development') {
  const moduleAlias = require('module-alias');

  moduleAlias.addAlias('module-name', 'module-name-dev');
}

From now on, every time you require the module-name module, you will actually get the module-name-dev in development.

In production you shouldn't install the devDependencies, and the alias will not work, so no extra steps needed to change between the 2.

Working with webpack

If you are using webpack, you do not need the module-alias, you can add alias to the webpack config using webpack-chain like this:

chainWebpack: (config) => {
    if (process.env.NODE_ENV === 'development') {
      config.resolve.alias
      .set('module-name', 'module-name-dev');
    }
  },

Answer 2

You have the package referred to in both sections of your dependencies; you should totally not do this because it means that your production install will have a different version to your development install.

If you do npm install you will get all dependencies & devDependencies installed; however if you do npm install --production you only get dependencies installed.

You should remove things you don't need for your app to run from dependencies and place them in devDependencies. Things in dependencies should be seen as requirements to run the application (after any code transformation has occurred).

There is zero case where a dependency should be in both.