How to expose _app.tsx in next.js 13 using module federation

Question

I have two Next.js 13 projects: Homepage and Admin Panel. I want to expose the entire Admin Panel (i.e _app.tsx) and load it inside Homepage. I have configured both projects using @module-federation/nextjs-mf in their respective next.config.js files. However, when I try to import the app page from the Admin Panel into Homepage, I get an error stating that the element type is invalid. Here is the 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 is 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;
  }

I tried to expose the entire Admin Panel project ( _app.tsx) using module federation and load it inside the Homepage project. I expected to be able to import the app page from the Admin Panel into Homepage without any issues. However, when I tried to do so, I got the error.

Is it possible to expose _app.tsx using module federation? If so, what could be causing this error? If not, what is the alternative?

Answer 1

To expose the pages you don't need to specify the filename, just specify the route it self and set exposePages to true. try this, it's work for me in nextjs 14

{
    exposes: {
      "./submitButton": "./component/UI/Buttons/SubmitButton/SubmitButton.tsx",
      "./app": "./pages", //this is home/root page
      "./about": "./pages/about" //this is about page
    },
    extraOptions: {
        "exposePages": true
    }
}