Multiple versions of dependencies

[KameronKales]

Is there currently a way to have each micro front end own it's own dependencies? My teams import different versions of component libraries. I'd like each team to be able to load its own dependencies (not rely on the global import map).

frontEnd1 might have componentLibrary v1.0.1 and frontEnd2 might have componentLibrary v1.0.2.

I'm aware the best practice would be to standardize and use same version, just a bit unrealistic at the scale I need. Any help is appreciated.

[frehner]

Yes; just make sure that those deps are not in the webpack/rollup externals array.

[KameronKales]

Hmmm. Interesting. I can try that. I was under the impression the only way to import dependencies (and have them resolved correctly) was through the import map in the root config.

Is the import map solely for dependencies shared across micro front ends then? And then each individual micro front end can include any other dependencies it needs

(Im aware there's a few gotchas here, just simplifying to make sure I understand core concept)

[frehner]

Yup pretty much

[KameronKales]

Thank you. I'll give that a try and see if I run into any issues. Thanks for the help!

[joeldenning]

Another approach (besides not making deps webpack externals) is to keep them as externals but use import map scopes to change which version is used for which microfrontend. This is more complex to manage, but allows you to share multiple versions of dependencies - for example maybe two microfrontends use React 16 and two use React 17, but you only want one instance of React 16 and one of React 17.

https://github.com/WICG/import-maps#scoping-examples

This approach is not inherently better than @frehner's approach above, but I shared just in case it's useful for those reading through this.

[prasaddola]

@joeldenning can you point to a working example of MFE instead of node_modules. TIA