Angular 19 Module Federation: "Uncaught SyntaxError: Cannot use 'import.meta' outside a...

I'm trying to build a Module Federation app using Angular 19 and Webpack 5. My setup consists of:

1. 
   Remote-App: It successfully builds and generates remoteEntry.js, accessible at: http://localhost:4201/remoteEntry.js
   
   
2. 
   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-entry.component.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?

Continue reading...