I am faced with a situation where I have two Next.js 13 projects: Homepage and Admin Panel. My goal is to showcase the entire Admin Panel (specifically _app.tsx) and embed it within Homepage. To achieve this, I have set up both projects utilizing @module-federation/nextjs-mf in their respective next.config.js files. However, upon attempting to import the app page from the Admin Panel into Homepage, an error occurs indicating that the element type is invalid. Below is the exact error message:
Unhandled Runtime Error Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check the render method of `MyApp`.
This snippet displays my configuration for Admin Panel in next.config.js
webpack: (config, options) => {
const { isServer } = options;
config.plugins.push(
new NextFederationPlugin({
name: "admin",
remotes: {
homepage: `homepage@http://localhost:3000/_next/static/${
isServer ? "ssr" : "chunks"
}/remoteEntry.js`,
},
exposes: {
"./submitButton": "./component/UI/Buttons/SubmitButton/SubmitButton.tsx",
"./app": "./pages/_app.tsx",
},
filename: "static/chunks/remoteEntry.js",
extraOptions: {
exposePages: true,
},
})
);
return config;
}
In an attempt to showcase the complete Admin Panel project (_app.tsx) via module federation and integrate it within the Homepage project, I encountered the aforementioned error. I was hoping to seamlessly import the app page from the Admin Panel into the Homepage without facing any glitches. Yet, the error persisted.
Is it feasible to expose _app.tsx utilizing module federation? If yes, what could be triggering this error? If not, what are the potential alternatives?