Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Using module federation with emotion/context

See original GitHub issue

Setup

I’ve used the Next.js sidecar example and expanded to add a ThemeProvider from an internal component library that uses Emotion for styling.

Container Application

// _app.tsx
import Head from "next/head";
import { theme, Global, ThemeProvider } from '@internal/component-library';

export default function MyApp({ Component, pageProps }) {
  return (
    <ThemeProvider theme={theme}>
      <Head>
        <Global />
        <script src="http://localhost:8081/remoteEntry.js" />
      </Head>
      <Component {...pageProps} />
    </ThemeProvider>
  );
}

// index.tsx
import { lazy, Suspense } from "react";
import { dependencies } from "../../package.json";

const RemoteComponent = ({ scope, module, ...props }) => {
  if (!global[scope]) {
    return null;
  }

  global[scope].init({
    react: {
      [dependencies.react]: {
        get: () => Promise.resolve().then(() => () => require("react")),
      },
    },
  });

  const Component = lazy(() =>
    global[scope].get(module).then((factory) => factory())
  );

  return (
    <Suspense fallback={null}>
      <Component {...props} />
    </Suspense>
  );
};

export default function Home() {
  return (
    <div>
      <RemoteComponent scope="searchTeam" module="./ProductDetailsCard" propertyBedrooms="3" propertyId="12324" />
    </div>
  );
}

Remote module

// ProductDetailsCard.tsx

import React, { Component } from "react";
import { CardComponent } from '@internal/component-library';

const ProductDetailsCard = () => (
  <CardComponent
    isPremium={true}
  />
)

export default ProductDetailsCard;

Error

The above error occurred in the <Context.Consumer> component:
in Styled(div) (created by CardComponent)
in CardComponent (created by Context.Consumer)
in Styled(CardComponent) (created by ProductDetailsCard)
in ProductDetailsCard (at pages/index.tsx:23)
in Suspense (at pages/index.tsx:22)
in RemoteComponent (at pages/index.tsx:31)
in div (at pages/index.tsx:30)
in Home (at _app.tsx:12)
in ThemeProvider (at _app.tsx:6)
in MyApp
in ErrorBoundary (created by ReactDevOverlay)
in ReactDevOverlay (created by Container)
in Container (created by AppContainer)
in AppContainer
in Root
React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.

Things tried

Setting remote @internal/component-library to eager and to singleton (it would be good to find documentation on what these are doing)
Removing remote dependencies (made no difference)

Any help would be very appreciated !

Issue Analytics

State:
Created 3 years ago
Comments:7 (2 by maintainers)

Top GitHub Comments

1reaction

ScriptedAlchemycommented, Oct 11, 2020

side car was recently fixed, im going through all demo repos today to check they work after the final release of v5

1reaction

ScriptedAlchemycommented, Oct 1, 2020

You need to share more then react. Like emotion and those providers. Otherwise two context providers are loaded, not one. You also will want to share react dom too