core: Error: Shared module react doesn't exist in shared scope default
Getting this error when trying to use the new app router with @module-federation/nextjs-mf
Server Error
Error: Shared module react doesn't exist in shared scope default
This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
ensureExistence
file:///Users/georgiosntounis/Documents/test-projects/next-mfe/.next/server/webpack-runtime.js (881:68)
Here is what I have in my next.config.js file
const NextFederationPlugin = require("@module-federation/nextjs-mf");
const remotes = () => {
return {
"my_components": `my_components@http://localhost:8082/remoteEntry.1.0.0.js`,
};
};
const nextConfig = {
webpack(config, { isServer }) {
config.plugins.push(
new NextFederationPlugin({
name: "host",
filename: "static/chunks/remoteEntry.js",
remotes: remotes(),
shared: {},
})
);
return config;
},
};
module.exports = nextConfig;
About this issue
- Original URL
- State: closed
- Created a year ago
- Reactions: 7
- Comments: 37 (11 by maintainers)
Hi @ScriptedAlchemy You don’t need any complex examples. https://github.com/Muskos/nextjs-mf-app-folder Here is just the Nextjs app with
@module-federation/nextjs-mfplugin and one page in the app folder. You can reproduce it here.yes RSC will get support eventually. With v7 now done, if the community wants to help (i know a few were interested in trying a few things) - im happy for extra hands.
First step i need is a PR of my repo using and breaking with app dir, then ill see what needs to be done to make it not error haha.
AFAIK, App dir isn’t supported yet. But I read it was planed after the release of v7.
Hello, I’m facing the same issue
** Server Error** Error: Shared module react-dom doesn’t exist in shared scope default This error occurred while generating the page. Any console logs will be displayed in the terminal window.
I’m using Next.js 13, is there any solution available?
Does this configuration works with ssr? I mean when option.isServer true or when we need module federation with ssr?
Something very important is that i am using the “pages” directory instead of the new “app” directory! This might be also part of why this setup is working.
This is my entire next.config.js (I am also using experimental imports from Framer)
I hope this helps. @rahimimo
use “canary” tags
Open to PRs for this longstanding issue. Modern.js will support RSC before Next.js due to its open-source priority. It’s easier to implement in Modern.js, which has an unparalleled Developer Experience (DX) for Micro Frontends (MFE). The focus is on releasing the internal version to the open-source community, offering a meta-framework for microfrontends and horizontal scaling—something unmatched in my consulting experience with other companies’ in-house MFE or MFP efforts.
Planning a fork of Module Federation to release an enhanced version with broad support for TypeScript (TS), Hot Module Replacement (HMR), Server-Side Rendering (SSR), dynamic loading, automatic route stitching, middleware, and more. For details, see issue #1170.
Challenges with Next.js are significant; it’s not designed for module federation. Enhancements are often complex or nearly impossible. For an in-depth understanding, refer to the InvertedContainerRuntimeModule on GitHub.
“Container Inversion” involves a complete overhaul of webpack’s JSONP and dependency management systems. Despite its complexity, it has solved other architectural issues, especially with circular or nested remotes. This will be integrated into V1.5 of the forked federation. RSPack.dev plans to implement V1.5 in Rust by Q1, offering native support for Module Federation. Concurrently, I’ll work with the Modern.js team to reorganize their internal fork and decouple it from our internal deployment infrastructure.
There’s overlap between the needs of Modern.js and Next.js. Bytedance has solved many issues at scale, and my recent Next.js workarounds have led to beneficial patterns. These will be integrated into my module-federation ecosystem with web-infra-dev.
I’m currently integrating the node federation specification for Modern.js as we perfect SSR and backend integrations. Plans are underway to use federation in CI, build management, and Infrastructure as Code, necessitating a memory-efficient server solution.
Timeline predictions: RSC support in Next.js is at least 6 months away. If urgently needed, our consulting/pro services branch can fund it. Modern.js will likely have RSC Federation support 2-3 weeks after RSC itself is supported. Unless a breakthrough or business case allows for resource reallocation, the timeline remains uncertain. Expect more insights in 1-2 months.
URLs:
I try to run this project: https://github.com/Muskos/nextjs-mf-app-folder same error shows:
Error: Shared module react doesn't exist in shared scope defaultHave you tested it yourself?
@ScriptedAlchemy I was just working on this… you can use my repo, created a branch which shows the issue clearly : https://github.com/nameofname/next-module-federation/tree/nameofname/app-router-error/mfe2
Inside the dir
mfe2/srcthere are 2 directories,appandpages-bak… both are bare bones examples of app router and pages router. I tested locally and if I runnpm run devfrom withinmfe2then I will encounter the error.If I
mv app app-bak && mv pages-bak pagesthencd.. && npm run devthen the error will go away.I’m also getting same error as that @gdunix is facing. Did anyone found solution? @ScriptedAlchemy @yspychala @gpatatoukas