Module federation error - Cannot read properties of undefined reading call

Question

I have created a boilerplate github project where one project exposed a module federation method, and another project consumes it.

See github example https://github.com/inspiraller/module-federation

---

mf1

mf1 - useNav

export const useNav = () => {
  const someFun = () => {
    console.log('some Fun from mf1');
  };

  return { someFun };
};

mf1 - webpack:

    new MF({
      // exposes data from this repo: mf1
      name: 'mf1',
      filename: 'remoteEntry.js',
      exposes: {
        './useNav': './src/useNav/useNav.ts'
      },
      remotes: {}
    })

---

mf2

mf2 - webpack:

    new MF({
      name: 'mf2',
      // gets data from another location: mf1
      remotes: {
        mf1: 'mf1@http://localhost:3001/remoteEntry.js'
      }
    })

mf2 index.ts

// @ts-ignore
import { useNav } from 'mf1/useNav';

import { render } from 'react-dom';

const App = () => {
  const { someFun } = useNav();
  someFun(); // causes console error
  return <div>Hello App</div>;
};

How to resolve this error ?

console error:

bootstrap:24 Uncaught TypeError: Cannot read properties of undefined (reading 'call') at webpack_require (bootstrap:24:1) at fn (hot module replacement:62:1) at ./src/bootstrap.tsx (index.js:176:1) at webpack_require (bootstrap:24:1) at fn (hot module replacement:62:1) at ./src/index.tsx (bootstrap.tsx:7:10) at webpack_require (bootstrap:24:1) at startup:6:1 at startup:6:1

Answer 1

I fixed that error by updating "next": "^13.1.1" > "next": "13.4.7"