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.

Answer 2

These are all dev dependencies if the app you are building is a library, that you want to publish others to use.

Basically my understanding is this, if you have a module that can be used in two ways:

• Consumed via npm i
• Developed via cloning the project

In that scenario, it makes sense to put them in dev dependencies.

In your case people are going to clone your project to develop. And consume it via hosted one.

Hope this helps.!