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",
}
})
],
...
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)?
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.
I see several things.
remotes property goes in the dependent apps as a link back to the host application.filename inside the host application's configuration for remote access.src directory and not inside src/app.