reactjs - create-react-app install devDepencies in dependencies section

Question

After creating a new project with create-react-app and running yarn eject.

The dependencies section of my package.json looks like this:

  "dependencies": {
    "autoprefixer": "7.1.1",
    "babel-core": "6.25.0",
    "babel-eslint": "7.2.3",
    "babel-jest": "20.0.3",
    "babel-loader": "7.0.0",
    "babel-preset-react-app": "^3.0.1",
    "babel-runtime": "6.23.0",
    etc.

I would say these are all devDependencies why has create-react-app placed them here?

Answer 1

This is an intentional change in one of the latest versions.

The distinction is pretty arbitrary for front-end apps that produce static bundles. Technically you don't need any of these dependencies on the server, not even the runtime ones. So by that logic even react might be seen as a development dependency.

We used to try to separate them but as explained above, it isn't really consistent in the first place. There's no technical reason why this distinction is useful for apps that have no Node runtime. In addition, it used to cause problems for some Heroku deployments that didn't install development dependencies (and thus weren't able to build the project on the server or test it right before deployment).

In the end we went with just putting everything into dependencies. If you disagree you can always rearrange package.json as you deem reasonable.