CODEWITHSUNDEEP
javascriptnode.jsreactjsnpmnpm-install
Benison
Benison

Reputation: 167

Consuming different versions of same dependency in react application

Suppose A is a react application that renders a component B (Consider B is installed as a npm dependency to use in A). A and B uses an npm dependency with version 1.0. Now A need arises where I need to upgrade the version of the dependency used in B as 1.1. Since the upgraded version has different implementation/usage, Is there a way to make the change in the version used in B without affecting the functionality in A? adding the upgraded version in peerDependencies of A's package.json will work? I don't have a clear understanding of it. Please guide.

Upvotes: 3

Views: 4165

Answers (2)

mukuljainx
mukuljainx

Reputation: 716

As far I able to understand this is, let's call the dependency as X

A -> X v1

B -> X v2

Before proceeding ahead:

Peer-dependency are added in a package that needs to be installed by at least one package or the app consuming it. It is done to avoid the larger bundle size at the end. Here versions should be compatible or things will break.

I am assuming B is bundled or else it will cause a problem as B will use the X from the current node_modules which has some other version of X which might lead to errors.

Now if we have bundled B and it has X as a dependency, I don't think there will be any issue, as B will refer to its own code for that work and A will refer X from node_modules, few libraries cause a problem here as they do stuff on windows or DOM like styled-component, but most of them provide a solution to get away with it.

And some libraries features will not work at all like React hooks if multiple versions are loaded, but most of them work like charm such as lodash works.

I am not saying anyone is bad, they are just limited by the kind of functionality they provide.

In the end, if your dependency X has minor version mismatching (checkout https://semver.org/ for more) like 1.2.0 and 1.1.2, then you can add X as a peer in B, like most libraries, minor version are backwards-compatible (it's the rule) and you should install 1.2.0 in A respecting B higher version demand. In this case, you don't even need to bundle B but you can and you should.

But if the difference is with the major version, then bundle B with its own X.

Upvotes: 3

devAgam
devAgam

Reputation: 198

I believe npm and yarn (Package Managers) have package aliasing available which allows you to install a package under a different name, in your case different versions of the same package.

npm i abc1@npm:abc@1
npm i abc2@npm:abc@2

This should work.

Upvotes: 0

Related Questions