I'm trying to build a Module Federation app using Angular 19 and Webpack 5. My setup consists of:
Remote-App: It successfully builds and generates remoteEntry.js, accessible at:
http://localhost:4201/remoteEntry.js
Host-App: Fails to load mfe-app remoteEntry.js from
http://localhost:4201/remoteEntry.js
in the host application, I get this error in the browser console:Uncaught SyntaxError: Cannot use 'import.meta' outside a module (at remoteEntry.js:3629:29)
What I've Tried
To resolve this, I attempted the following:
1. Configured Remote-App to use CommonJS instead of ES Modules
Here’s my remote-app webpack.config.js
:
const { shareAll, withModuleFederationPlugin } = require('@angular-architects/module-federation/webpack');
const mfConfig = withModuleFederationPlugin({
name: 'remote-mfe-app',
exposes: {
'./RemoteEntryComponent': './src/app/remote-entry/remote-entryponent.ts'
},
shared: {
...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }),
}
});
module.exports = {
...mfConfig,
output: {
library: {
type: "commonjs" // Also tried "module" and "umd"
}
},
experiments: {
outputModule: false
}
};
2. Configured Host-App to treat remoteEntry.js as CommonJS instead of an ES Module
Here’s my host-app webpack.config.js
:
const { withModuleFederationPlugin } = require('@angular-architects/module-federation/webpack');
module.exports = withModuleFederationPlugin({
name: 'mfe-host-app',
remoteType: 'commonjs',
remotes: {
'remote-mfe-app': 'alpha-new-business-mfe@http://localhost:4201/remoteEntry.js'
},
shared: {
singleton: true,
strictVersion: true,
requiredVersion: 'auto'
}
});
Despite all this. The remoteEntry.js file is still generated as ES Module and contain the import.meta
I'm trying to avoid. Below is a snippet of remoteEntry.js
that is causing this syntax error:
Below is the error I get host-app resulting in remote-app failing to load:
Any suggestion on how to fix this?