Webpack module federation - Nextjs - error: Cannot read properties of undefined (reading 'call')

Question

I am trying to change the nextjs architecture to micro front-end, i am using the @module-federation/nextjs-mf library, but when i try to load a page from my remote project to my main project i get the error TypeError: Cannot read properties of undefined (reading 'call'), only happens when i load pages that request data from an api

this is the next.config from my main app

webpack(config, options) {
    const { isServer } = options;
    config.plugins.push(
      new NextFederationPlugin({
        name: 'app1',
        remotes: {
          app2: `app2@http://localhost:4001/_next/static/${isServer ? 'ssr' : 'chunks'}/remoteEntry.js`,
        },
        filename: 'static/chunks/remoteEntry.js',
        extraOptions: {
          debug: true,
          exposePages: true
        },
        shared: {
          // whatever else
        },
      })
    );

    return config;
  },

this is the next.config from my remote app

webpack(config, options) {
    const { isServer } = options;
    config.plugins.push(
      new NextFederationPlugin({
        name: 'app2',
        remotes: {
          app1: `app1@http://localhost:3000/_next/static/${isServer ? 'ssr' : 'chunks'}/remoteEntry.js`,
        },
        filename: 'static/chunks/remoteEntry.js',
        extraOptions: {
          exposePages: true,
        },
        shared: {
          // whatever else
        },
      })
    );

    return config;
  },

this is how I import the page into my main project

import { lazy, Suspense } from 'react'
import {injectScript} from '@module-federation/nextjs-mf/utils'


const getRemoteModule = async () => {
  const container = await injectScript('app2');
  const factory =  await container.get('./pages/shard2')
  const module = await factory()
  return module
}

function DynamicComponent() {
  const Component = lazy(() => getRemoteModule())
  return (
    <Suspense fallback={null}>
      <Component/>
    </Suspense>
  );
}

const  Home = () => {
  return (
    <Suspense fallback={null}>
      <DynamicComponent/>
    </Suspense>
  )
}

export default Home

can you help me?

I tried to import it this way but it didn't work

import { lazy, Suspense } from 'react'

const ExternalPage = lazy(() => import('app2/pages/shard2'));

const  Home = () => {
  return (
    <Suspense fallback={null}>
      <ExternalPage/>
    </Suspense>
  )
}

export default Home