Module Federation | sx transformed by @jsxImportSource cannot access theme context

[daenash]

I want to create an application with webpack module federation using theme-ui. For this I created a host app (which will be the shell) and a remote app (which will provide me some components)

The remote app defines a button and a host app defines a container.

The button looks like this

/** @jsxImportSource theme-ui */
const Button = ({ children }) => (
  <button sx={{ background: ["red", "blue", "yellow", "green"] }}>
    {children}
  </button>
);
export default Button;

---

The container looks like this

/** @jsxImportSource theme-ui */
const Container = ({ children }) => (
  <div sx={{ width: ["500px", "600px", "700px", "900px"], margin: "auto" }}>
    {children}
  </div>
);
export default Container;

---

In the shell I created a ThemeWrapper with the following ThemeProvider

import { ThemeProvider } from "theme-ui";
const ThemeWrapper = ({children}) => (
  <ThemeProvider
    theme={{
      breakpoints: ["900px", "1000px", "1100px"],
    }}
  >
    {children}
  </ThemeProvider>
);
export default ThemeWrapper;

---

After running both apps, the host has these media queries

Button	Container

So the breakpoints defined in the theme are propagating down to the remote application and the button gets them but the container in the host (where the provider is) uses the default theme-ui breakpoints.

The app is created by CRA without typescript.

[hasparus]

Do you render the Container below or above the ThemeWrapper in the React tree?

(I deleted the issue, because it was basically a duplicate. If we find that this is truly a bug, we can create an issue describing actionable steps forward.)

[daenash]

Yep I do it below.

<ThemeWrapper>
  <Container>
    <React.Suspense fallback="Loading...">
      <RemoteButton>Hello</RemoteButton>
    </React.Suspense>
  </Container>
</ThemeWrapper>

[daenash]

Additionally these are the only dependencies I have installed

"@emotion/react": "^11.9.3",
"@mdx-js/react": "1",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-scripts": "5.0.1",
"theme-ui": "^0.14.6"

[hasparus]

So both the ThemeWrapper and Container are used in the host app. The Button works, so the issue should not be connected to Module Federation. Weird.

Would you be able to provide a reproduction on CodeSandbox or a GitHub repo?

[daenash]

Sure! Thank you for the support! 🙇‍♂️

https://github.com/daenash/module-federation-theme-ui

[daenash]

@hasparus

Did you have any time to check out the repo and reproduce the issue? 🙏

[hasparus]

Hey @daenash, I've spent some time fiddling with this issue, and unfortunately I can only offer you a workaround and my reasoning about the cause of the problem.

So, Theme UI uses React Context, and depends on Emotion that uses React Context. React Contexts are effectively singletons, they won't work as expected if you have a consumer at one version and a provider from another.

I added some more properties to the theme

theme={{
  colors: { "almost-white": "#f0f0f0" },
  space: { large: "100px" },
  breakpoints: ["900px", "1000px", "1100px"],
}}

Then, I changed the contents of Container.js into this

/** @jsxImportSource @emotion/react */

import { css, useThemeUI } from "theme-ui";

const Container = ({ children }) => {
  const theme = useThemeUI();

  const styles = css({
    background: "almost-white",
    p: "large",
    width: ["500px", "600px", "700px", "900px"],
    margin: "auto",
  })(theme);

  console.log({ theme, styles });

  return <div css={styles}>{children}</div>;
};

And I noticed that if imported manually, we access the theme we want, and the styles are transformed successfuly.

Using Box component without @jsxImportSource comment (so the sx is passed down instead of transformed to className in the Container), also styled the div correctly.

import { Box } from "theme-ui";

const Container = ({ children }) => {
  return (
    <Box
      sx={{
        background: "almost-white",
        p: "large",
        width: ["500px", "600px", "700px", "900px"],
        margin: "auto",
      }}
    >
      {children}
    </Box>
  );
};

export default Container;

Both Theme UI's sx prop and Emotion's css prop can take a function from theme into styles

/** @jsxImportSource theme-ui */

const Container = ({ children }) => {
  return (
    <div
      css={(theme) => {
        console.log(theme, "in css");
        return {};
      }}
      sx={(theme) => {
        console.log(theme, "in sx");
        return {
          background: "almost-white",
          p: "large",
          width: ["500px", "600px", "700px", "900px"],
          margin: "auto",
        };
      }}
    >
      {children}
    </div>
  );
};

After logging both themes to console, we can see that the theme from perspective of css prop is just empty, and from perspective of sx prop we can see the default Theme UI theme.

Compare this to results of similar code using Box without @jsxImportSource

import { Box } from "theme-ui";

const Container = ({ children }) => {
  return (
    <Box
      css={(theme) => {
        console.log(theme, "in css");
        return {};
      }}
      sx={(theme) => {
        console.log(theme, "in sx");
        return {
          background: "almost-white",
          p: "large",
          width: ["500px", "600px", "700px", "900px"],
          margin: "auto",
        };
      }}
    >
      {children}
    </Box>
  );
};

⬆️ That's our theme object, right?

I tried to enforce using single version of some of the libraries involved in modulefederation.config.js, but it didn't help 😢

// modulefederation.config.js
const { dependencies } = require("./package.json");

module.exports = {
  name: "host",
  remotes: {
    remote: "remote@http://localhost:3001/remoteEntry.js",
  },
  shared: {
    ...dependencies,
    react: {
      singleton: true,
      requiredVersion: dependencies["react"],
    },
    "react-dom": {
      singleton: true,
      requiredVersion: dependencies["react-dom"],
    },
    "@emotion/react": {
      singleton: true,
      requiredVersion: dependencies["@emotion/react"],
    },
    "theme-ui": {
      singleton: true,
      requiredVersion: dependencies["theme-ui"],
    },
    "@theme-ui/css": {
      singleton: true,
    },
    "@theme-ui/core": {
      singleton: true,
    },
    "@theme-ui/parse-props": {
      singleton: true,
    },
    "@emotion/react/jsx-dev-runtime": {
      singleton: true,
    },
  },
};

I'm sorry I couldn't help you more, but I'm far from a module federation expert, and why the reasons why css called from Theme UI's JSX Runtime sees a different theme context is beyond me. All the libraries involved kind of expect you to have just one copy of them, and as far as I understand, this needs a careful configuration in Module Federation scenarios.

---

TLDR: Avoid @jsxImportSource with module federation, use Theme UI's Box instead or write a useStyles hook using css and useThemeUI imported from theme-ui.

[daenash]

Thank you for the suggestions! I went with the css solution! 🙌