Can't resolve 'react-router-dom'

[hugeliveux]

Module not found: Can't resolve 'react-router-dom' in '/node_modules/react-router-hash-link/lib'

'react-router-dom' is imported but not listed as a dependency. Running npm i react-router-hash-link won't install 'react-router-dom' thus lead to compile error with the above error message.

[rafgraph]

It's listed as a peer dependency. You need to have react-router-dom listed as a dependency in your package.json (same with react).

[hugeliveux]

It's listed as a peer dependency. You need to have react-router-dom listed as a dependency in your package.json (same with react).

Thanks for pointing it out. Just curious, why would you list it as a peer dependency and let the user manually install it? I'm new to npm.

[rafgraph]

Because it adds functionality to react-router-dom (it doesn't encapsulate the router) and can't be used without react-router-dom.

[hugeliveux]

So if it does “encapsulate” react-router-dom, you would list react-router-dom as a dependency instead, right? The react-router-dom is required either way, that’s why I think it should be listed as a dependency in the first place.

[rafgraph]

The convention is that if the user needs to directly access the dependency's api (react-router-dom's api) in order to use the package (react-router-hash-link), then the dependency is listed as a peer dependency (the user needs to understand how the peer dependency works, read its docs, etc).

For example, react-router-dom lists react as a peer dependency. In order to use react-router-dom you need to understand react and use its api.

Encapsulate in this case means that the dependency is completely hidden from the user and no knowledge of the dependency is required (the dependency could be removed or swapped out for something else by the package author and the user wouldn't need to change their code).

[hugeliveux]

The convention is that if the user needs to directly access the dependency's api (react-router-dom's api) in order to use the package (react-router-hash-link), then the dependency is listed as a peer dependency (the user needs to understand how the peer dependency works, read its docs, etc).

For example, react-router-dom lists react as a peer dependency. In order to use react-router-dom you need to understand react and use its api.

Encapsulate in this case means that the dependency is completely hidden from the user and no knowledge of the dependency is required (the dependency could be removed or swapped out for something else by the package author and the user wouldn't need to change their code).

Thank you so much for this insightful explanation!