Share styled-components

[calinortan]

Versions

• vite-plugin-federation: 1.2.2
• vite: 4.2.1

Hey guys, I was playing with microfrontends lately and was trying to share styled-components between host and any remote microfrontend. I am fairly confident it would happen with other libraries as well.

It turns out that if the package you want to share contains both named exports and a default export, only the default one would be accesible for the consumer. And that happens because of this line right here.

Seems to be by design. Is this a known limitation?

Reproduction

I have prepared a sandbox for reproducing this:

https://codesandbox.io/p/sandbox/microfrontends-styledcomponents-issue-forked-m69gs4?file=%2Fvite.config.ts&selection=%5B%7B%22endColumn%22%3A3%2C%22endLineNumber%22%3A8%2C%22startColumn%22%3A1%2C%22startLineNumber%22%3A6%7D%5D

Steps to reproduce

• try to share styled-components between microfrontends

What is Expected?

• we should be able to consume both default and named exports from the shared libraries

  What is actually happening?

• if the package exports both named and default exports, only the export default works.

[D9RS]

I faced the same issue. On production build I get an error when trying to use createGlobalStyle from styled components.

[AsuraKev]

I would like to know how this can be achieved as well. Right now there are multiple instances of Styled components running on the page ~

[Pale91]

I was able to share styled-components with no issues after upgrading to 1.3.3 version