0

I am now trying to figure out why it is necessary to specify all the dependencies explicitly in the packages.json file.

For example: I want to use the react-router library. The official documentation says:

npm install react-router@6 react-router-dom@6

This means that to work with this library, I need to install (and maintain/update) two packages. Of course, there is no problem updating two packages, but when there are many such packages, it looks strange.

Also, the official documentation says:

you should never import anything directly from the react-router package, but you should have everything you need in either react-router-dom

I'm trying to figure it out further and I look at how the packages.json file works for the react-router-dom library and i see

"dependencies": {
  "react-router": "6.0.0-beta.1"
},

For me, this means that if I install the react-router-dom library, it will automatically pull up the dependencies that are specified in the dependencies section, so react-router should be installed automatically and I should not explicitly install it in my project.

So in general why or what benefits/best practices of install libs like npm install react-router@6 react-router-dom@6 instead of npm install react-router-dom@6?

Anton Komyshan
  • 1,377
  • 10
  • 21
  • This is a duplicate of https://stackoverflow.com/questions/42684809/react-router-vs-react-router-dom-when-to-use-one-or-the-other – sculs Aug 14 '21 at 12:37

2 Answers2

1

react-router-dom is for web, react-router-native is for react-native, react-router, both of them depend on react-router as a dependency and I don't believe you should install react-router directly (or at least you shouldn't want to because react-router-dom gives you a lot more functionality in the browser for example).

I also am not sure what the official documentation says but I always just install react-router-dom without installing anything else and it will automatically install its own dependency. I don't see a reason for why you should install react-router directly.

  • In other words, can I just install 'react-router-dom' without explicitly installing 'react-router'? And does this violate any best practices of package versioning? – Anton Komyshan Aug 14 '21 at 12:34
  • 1
    Yes you can just install it without installing ````react-router```` and I don't know what you mean with package versioning, but the only reason you should ever install a package manually is if you're directly going to use it. Each thing you install should care about the things it needs and you shouldn't care about it. –  Aug 14 '21 at 12:36
  • @Matriarx I partially agree with you. I wanted to point out the case of multiple instances as a consequence of multiple different versions working at the same time. This is not common, but creates a lot of difficult to debug issues. This is the case for some Material-UI packages and React Router for example. But yes, dumb rule is to declare as dependency only what you explicitly consume. – Ernesto Stifano Aug 14 '21 at 12:47
1

Ok, lets shed some light on this.

react-router-dom and react-router-native both are based on react-router. They extend functionality with specific features and components for each environment. They have react-router as a direct dependency and they re-export every object from it.

So, you DON'T need to explicitly add react-router to your own package.json dependencies if you are using react-router-dom or react-router-native packages. Regardless of what the "Migrating React Router v5 to v6" Guide says.

However, there are some special cases and the only thing that you wan't to avoid is to have multiple versions of the same packages (because this will increase bundle size) and to have multiple instances of something where there should be only one (this is important with react-router and this is why the documentation encourages you to add it as a peer dependency in the case that you really have to access it directly. It can be!).

I think this is why the migration guide installs both. It may be assuming those special cases where you are using both packages (instead of using peer dependencies they just fix both versions using @6 syntax. Most likely react-router-dom@6 and react-router-native@6 both have react-router@6 as a direct dependency. If not, above described problems could be encountered.)

In conclusion, if you are not explicitly importing from react-router DO NOT add it to your package.json.

Also remember that there is not a definitive rule and that your package manager is designed to resolve redundancy and optimize dependencies. Explicit dependencies declarations are generally better than implicit dependencies usage. You just have to be sure to be coherent and to not fall in the above described cases.

Ernesto Stifano
  • 3,027
  • 1
  • 10
  • 20