Module Federation and Styled Components

[kewah]

Hej @ScriptedAlchemy @jacob-ebey !

First of all, thanks for the resources that you've already shared—it was straight forward to get started and implement it.

I'm currently exploring Module Federation to see if that could be a fit for an existing project. We started the project several years ago, and each application has its subdomains. The applications share similar dependencies but do not necessarily run on the same versions. To smoothly adopt module federation, I'm evaluating if we can easily run remote applications using different dependency versions. So far, I manage to get different React versions working using the shareKey. (There is also an example in this repo using an adapter, but it doesn't seem necessary in my case.)

For instance, with a host running React v17 and a remote application running v16:

// Host 
shared: {
  react: {
    import: 'react',
    shareKey: 'react-17.0',
    shareScope: 'default',
    singleton: true,
    requiredVersion: deps.react,
  },
  'react-dom': {
    import: 'react-dom',
    shareKey: 'react-dom-17.0',
    shareScope: 'default',
    singleton: true,
    requiredVersion: deps['react-dom'],
  },
},

// Remote
react: {
  import: 'react',
  shareKey: 'react-16.0',
  shareScope: 'default',
  singleton: true,
  requiredVersion: deps.react,
},
'react-dom': {
  import: 'react-dom',
  shareKey: 'react-dom-16.0',
  shareScope: 'default',
  singleton: true,
  requiredVersion: deps['react-dom'],
},

The last blocker I encounter is dealing with Styled Components. It runs as expected using 'styled-components': { singleton: true, }, if the applications share the same version range (^5.0.0). I tried to apply the same approach as for React by running a different instance for each version (if we need to run v4 and v5). But Styled Components complains as soon as there is more than one instance. I understand that it is a limitation from Styled Components and not the Module Federation plugin. I just wanted to check if you've found a solution for that scenario?

[ScriptedAlchemy]

I don't use styled-components because of performance reasons.
Likely, there's a sub-dependency that isn't shared as a singleton which has some context provider that gets forked.

Not treated as a singleton