How could (and should) we share modules between builds on a page?

[sndrs]

We had a problem with the CMP on DCR, because the current commercial bundle that put adverts on their pages is built in frontend (that's changing, it's a hack). This means that packages present in that bundle know nothing about packages in other bundles running on DCR. The CMP was therefore being initialised twice, and consent change callbacks were being invoked by two different instances.

To get round this, we add the CMP exports to an object on window if they don't already exist, and use them instead if they do.

A similar technique is used in DCR and maybe frontend. Finding a way to share modules with dynamically loaded es modules also feels like it would be a big win.

Would it be useful to formalise this in a structured way, so that any project had a way to:

• share modules you are bundling outside your bundle
• consume shared modules
• acquire modules that you have not bundled and have not been shared
• ensure versions match

is this helpful? if it is, does that mean we're actually doing something else wrong – i.e. is this an anti-pattern?

Webpack's federated modules seem like they could be useful, but not all projects use webpack...

[JamieB-gu]

To make sure I understand the problem correctly, are you saying that there were two different JavaScript files, let's call them a.js and b.js. Each were being included via separate <script> tags on dotcom, and both contained the same module, let's call it c.js. This module, c.js, ran some sort of side-effect on import, which meant that the same piece of code was running twice?

share modules you are bundling outside your bundle

This is interesting. Am I right in thinking it sounds kind of like a vendor chunk, but it's not quite the same. With a vendor bundle you want to cache an asset for use on Page A and Page B. But in this case we actually want two pieces of code running in parallel, both of which access a de-duped single module?

[mxdvl]

More precisely, the c.js module’s init() function had side-effects—getting user consent. Calling it from b.js meant the one in a.js one was never initialised, and was not aware of the user consent.

[JamieB-gu]

What stopped the init function in a.js running?