15

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)?

Daniel
  • 1,431
  • 2
  • 16
  • 36

2 Answers2

5

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.

Rob W
  • 51
  • 2
0

I see several things.

  1. I think the remotes property goes in the dependent apps as a link back to the host application.
  2. Similarly, I think you'll need a filename inside the host application's configuration for remote access.
  3. It looks odd to me to have your dependent apps directly inside the src directory and not inside src/app.
Tony Brasunas
  • 4,012
  • 3
  • 39
  • 51