CODEWITHSUNDEEP
reactjsnpmwebpackduplicatesbundle
watermelon_party
watermelon_party

Reputation: 91

Fixing NPM duplication issues, two packages rely on the same peerDependency but at different version levels with CRA React

I believe I have an issue with duplication but I am struggling to resolve it. In my react project I have two packages(A and B) that both use another package(C) in their peerDependencies.

When I built my project with only A and C installed, everything is fine. When I then npm install package B and do npm run build, suddenly I have duplicate chunks of at least package A and my build size goes from 10MB to 40MB. Yikes.

I've run npm dedupe, nothing.

I made a copy of my project, npm eject it and added resolve.alias in the webpack config. Again, nothing.

Is there something I could change in my package.json so that both of the other packages will be happy?

The shared package is ^4.11.0

And in the peer dependencies for the other packages

Package A is ^4.0.1 Package B is ^4.9.10

From what I understand about npm versioning....this should be fine right?

Independently both packages work fine, but once you try to use them together this is where the duplication occurs. I can't even be sure this is a duplication issue, but I ran source-map-explorer and it was showing duplication issues so I can only assume this is where the issue is but it feels like all my attempts to fix duplication issues don't do anything.

Is this the dependency hell so many developers talk about??

Upvotes: 2

Views: 485

Answers (1)

watermelon_party
watermelon_party

Reputation: 91

So, I found what was causing the duplication but I am afraid it brings up more questions than answers.

My project uses loadable-component. I have been code splitting everything at the route level, so all my components load on a page by page basis.

The two files that were causing duplication errors did not include an import from one of the offending packages. Every other page in my project imports that package in it. When I imported those two pages without using loadable the duplication went away.

I can't really explain why this is happening, but I imagine that somehow loadable creates two different versions of one of my packages when it's not imported into a file? So one chunk has one version of a package while my main chunk has a different one?

Upvotes: 1

Related Questions