The loadShareSync function was unable to load react-dom. The react-dom could not be found in host

[OmarBERRABEH]

Hello,

I'm using module federation in nextjs and sometimes when I access a page I get the below exception:

The loadShareSync function failed to load React-Dom. The react-dom could not be found in the host.

Does anyone have this error? and how can I solve it?

Thanks for helping me.

[ScriptedAlchemy]

What are you using. What's the stack?

[OmarBERRABEH]

Shell based on Nextjs with below dependencies:

"@module-federation/nextjs-mf": "8.1.4",
    "@rc-d2c/context-manager": "workspace:^",
    "@rc-d2c/shared-ui": "workspace:^",
    "next": "13.5.6",
    "next-auth": "^4.24.5",
    "react": "18.2.0",
    "react-dom": "18.2.0"

and 2 MFEs based on react:

    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-i18next": "^13.5.0",
    "zustand": "^4.4.4"

[dosenk]

@ScriptedAlchemy I have the same problem.
Next - host, Next - remote.

I've tried using different versions of Next and @module-federation/nextjs-mf, as well as combinations of them. If I use [email protected] and @module-federation/[email protected] in the host application, remoteEntry.js is not created at all.

Right now I have this configuration and it works. But a notification like @OmarBERRABEH appears. I don't see that there are any problems associated with this error, but I can't fix it either.

[fokerone]

Hi everyone!, i am experiment the same error , my project uses the following stack

"dependencies": {
    "@module-federation/nextjs-mf": "^8.2.3",
    "axios": "^1.6.7",
    "dotenv": "^16.4.5",
    "next": "14.0.2",
    "react": "^18",
    "react-dom": "^18",
    "zustand": "^4.5.2"
  },

when I run the project with npm run dev everything works without problems, when I run npm run build, and then npm run start in a productive environment, the error appears. React does not load, therefore the app displays only static content but it does not work.

I hope to have contributed to the project and I am willing to perform the necessary tests to help fix the error.
txs!

[ScriptedAlchemy]

Eager consumption error. Do you have dynamic import in entry to bootstrap application

[fokerone]

Thanks for answering!

I don't have dynamic imports, just an pages/index that displays two microfronts

each MF is a separate repository, it is not a monorepo. this is a problem?

thanks in advance for your help.

[ScriptedAlchemy]

Put a get initial props or something in _app otherwise it's just ssg and probably won't work well

[fokerone]

confirmed!, I must have an initial action in _app that way the error disappears and react loads without problems.

Thank you very much for the help.
I hope I have contributed and can contribute in the future.

[FixDev]

can you show the code @fokerone ?

[fokerone]

Hi sure! that simple like put an import in the bootstrap or _app :

import Header from '../components/header'; import App from 'next/app'; import React, { useState, useEffect, Suspense, lazy } from 'react';
... others imports... and

import dynamic from 'next/dynamic'; // <--- This import does the "magic", even though we are not using it in the component

It can be that or another, the purpose is to make an initial call

[zackarychapple]

Wait @FixDev does that mean there is a path to making Next/App working with Module Federation?

[sileny]

Hello, this demo may help you.

You can solve this problem by copying the contents of the original entry file to a file named bootstrap.tsx, and then using import in the entry file to import the bootstrap file. The following is the pseudo code implementation.

bootstrap.tsx This code is copied from the entry file.

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './app';

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
);

index.tsx The code of the entry file is as follows.

import("./bootstrap");

[rafa-souza-dev]

Hello! I'm facing the same problem with the next/link package. I added getInitialProps to the _app file and also the dynamic import:

import App, { AppContext } from 'next/app';
import 'next/dynamic';

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

MyApp.getInitialProps = async (ctx: AppContext) => {
  const appProps = await App.getInitialProps(ctx);

  return appProps;
};

export default MyApp;

The versions I'm using are these:

  "dependencies": {
    "@emotion/react": "^11.7.0",
    "@emotion/styled": "^11.0.0",
    "@module-federation/nextjs-mf": "8.3.12",
    "@module-federation/typescript": "3.1.1",
    "next": "13.5.6",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "webpack": "^5.91.0",
  },

I keep getting this:

[rafa-souza-dev]

To make it work, I needed to downgrade the mf to version 8.2.3

[ScriptedAlchemy]

You can't use next dynamic with federation

[ScriptedAlchemy]

We are ending support for Next.js #3153