60

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?

2 Answers 2

112

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.

10
  • 10
    But does this not mean that all the devDependencies end up in the production build and get deployed with the app code? Increasing package size
    – dagda1
    Jul 4, 2017 at 22:15
  • 7
    > There's no technical reason why this distinction is useful for apps that have no Node runtime. devDeps and deps run in two totally separate environments, and keeping the two isolated can communicate/document which deps are running in the wild and which are running in CI/trusted environments. This is extremely helpful for assessing security vulns when they come up.
    – Bret
    Jan 8, 2018 at 18:18
  • 3
    Sorry for being a noob - but in this case how does the build step know not to ship Jest (etc) in the final distributable?
    – Matthew
    May 10, 2020 at 6:35
  • 18
    The build systems when generating a prod bundle will construct a graph of dependencies used with your main file. It should not incorporate jest or other build tools as long as there is no direct import of it somewhere in the graph.
    – soumitra
    May 31, 2020 at 23:51
  • hey @soumitra, but in the case of @ types, imports exist in our code for typing. So, are they still removed from the production bundle? Is this served for the client (browser)? Feb 28, 2021 at 12:30
0

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.!

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.