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

Question

I am trying to create the most basic webpack module federation proof of concept example.

Webpack config in the host app:

...
  plugins: [
    new ModuleFederationPlugin({
      name: "hostApp",
      remotes: {
        libApp: `libApp@http://localhost:3000/libApp`,
      },
    }),
  ],
...

Webpack config in the dependency app:

...
  plugins: [
    new ModuleFederationPlugin({
      name: "libApp",
      filename: "libApp.js",
      exposes: {
        "./moduleA": "./src/moduleA",
        "./moduleB": "./src/moduleB",
      }
    })
  ],
...

Here is the reproduction repo

What is wrong with this configuration?

Also, is it possible to set up dependency app to export a single js file with all exposed modules included (as a single webpack module)?

Answer 1

You can fix this creating a new file "bootstrap.js" in hostApp.

// src/bootstrap.js
console.log('host app test')

import moduleA from 'libApp/moduleA'
import moduleB from 'libApp/moduleB'

const el = document.getElementById('hostAppContainer')

el.innerHTML = 'changedContent: ' + moduleA + moduleB

and then change your index.js to

// src/index.js

import("./bootstrap");

This was caused by trying to do module federation in the initial entry point, which webpack doesn't like you doing.

Answer 2

I fix this issue by adding bootstrap.js

So in both projects create bootstrap.js file and add code of index.js in it. Then in index.js add import("./bootstrap");

Example =>

bootstrap.js

import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';

const root = document.getElementById('app');
const rootElement = (
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

const rootContainer = createRoot(root);
rootContainer.render(rootElement);

index.js

import("./bootstrap");