ReferenceError: document is not defined, while loading dynamic component of microfrontend

Question

I'm triying create microfrontend application with next js. I have two next js applications app1 and app2. I'm exposing one component from app1 and trying to consume it in app2.

next.config.js for app1-

const { ModuleFederationPlugin } = require('webpack').container;


const nextConfig = {

  distDir: 'build',
  webpack: (config, options) => { // webpack configurations
    const { isServer } = options;
    config.plugins.push(
      new ModuleFederationPlugin({
        name:"app1",
        filename: "static/chunks/remoteEntry.js", 
        remoteType: "script",
        exposes: { 
          "/nav": "./app/components/nav"
        },
      })
    );

    if (!isServer) {
      config.output.publicPath = 'http://localhost:3000/build/';
    }
    console.log("isServer", isServer,"output" ,config.output)
    return config;
  }
};

module.exports = nextConfig;

next.config.js for app2

const { ModuleFederationPlugin } = require('webpack').container;


const path = require('path');


const nextConfig = {

  webpack: (config, options) => { // webpack configurations
    const { isServer } = options;
    config.plugins.push(
      new ModuleFederationPlugin({
        name:"app2",
        filename: "static/chunks/remoteEntry.js", 
        remoteType: "script",
        remotes: {
            app1: 'app1@http://localhost:3000/_next/static/chunks/remoteEntry.js' ,
        },
      })
    );

    if (!isServer) {
      config.output.publicPath = 'http://localhost:3000/.next/';
    }
    return config;
  }
};

module.exports = nextConfig;

My folder structure

page.js of app2 where i'm consuming the component:

import dynamic from 'next/dynamic'


const Nav1 = dynamic(async () => {
  try {
    const module = await import('app1/nav');
    console.log("module",module);
    return module.default;
  } catch (error) {
    console.error("Error loading component:", error);
  }
}, { ssr: false });

export default function Home() {

  return (
    <div>
      <Nav1></Nav1>
    </div>
  )
}

It's giving error -

Error loading component: ReferenceError: document is not defined
while loading "./nav" from webpack/container/reference/app1
    at __webpack_require__.l (C:\Users\user\Desktop\next-js-demo\app2\.next\server\webpack-runtime.js:145:28)    
    at C:\Users\user\Desktop\next-js-demo\app2\.next\server\app\page.js:124:22
    at new Promise (<anonymous>)
    at webpack/container/reference/app1 (C:\Users\user\Desktop\next-js-demo\app2\.next\server\app\page.js:122:18)    at __webpack_require__ (C:\Users\user\Desktop\next-js-demo\app2\.next\server\webpack-runtime.js:33:42)       
    at handleFunction (C:\Users\user\Desktop\next-js-demo\app2\.next\server\webpack-runtime.js:236:31)
    at C:\Users\user\Desktop\next-js-demo\app2\.next\server\webpack-runtime.js:255:15
    at Array.forEach (<anonymous>)
    at __webpack_require__.f.remotes (C:\Users\user\Desktop\next-js-demo\app2\.next\server\webpack-runtime.js:218:36)
    at C:\Users\user\Desktop\next-js-demo\app2\.next\server\webpack-runtime.js:111:40
    at Array.reduce (<anonymous>)
    at __webpack_require__.e (C:\Users\user\Desktop\next-js-demo\app2\.next\server\webpack-runtime.js:110:67)    
    at Nav1.loadableGenerated.modules [as loader] (webpack-internal:///(rsc)/./app/page.js:12:50)
    at eval (webpack-internal:///(rsc)/./node_modules/next/dist/shared/lib/lazy-dynamic/loadable.js:33:58)        
    at ev (C:\Users\user\Desktop\next-js-demo\app2\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:351818)
    at ej (C:\Users\user\Desktop\next-js-demo\app2\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:264782)
    at C:\Users\user\Desktop\next-js-demo\app2\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:276953
    at Object.toJSON (C:\Users\user\Desktop\next-js-demo\app2\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:281723)
    at stringify (<anonymous>)
    at C:\Users\user\Desktop\next-js-demo\app2\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:268079
    at ez (C:\Users\user\Desktop\next-js-demo\app2\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:268158)
    at eH (C:\Users\user\Desktop\next-js-demo\app2\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:268559)
    at Timeout._onTimeout (C:\Users\user\Desktop\next-js-demo\app2\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:265057)
    at listOnTimeout (node:internal/timers:573:17)
    at process.processTimers (node:internal/timers:514:7)
 ⨯ Internal error: Error: Unsupported Server Component type: undefined
    at ej (C:\Users\user\Desktop\next-js-demo\app2\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:264886)
    at ej (C:\Users\user\Desktop\next-js-demo\app2\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:264766)
    at ez (C:\Users\user\Desktop\next-js-demo\app2\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:267802)
    at eH (C:\Users\user\Desktop\next-js-demo\app2\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:268559)
    at Timeout._onTimeout (C:\Users\user\Desktop\next-js-demo\app2\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:265057)
    at listOnTimeout (node:internal/timers:573:17)
    at process.processTimers (node:internal/timers:514:7)

Dependecies details

"next": "14.1.0", "react": "^18", "react-dom": "^18" "webpack": "^5.90.1"

please help with this.