*“process is not defined” error when loading remote module in Angular 14 with Module Federation

Question:
I’m encountering a process is not defined error when I try to load a remote Angular module via Module Federation in my Angular 14 app. I'm using Module Federation with the @angular-architects/module-federation package and Webpack to dynamically load remote modules, but when I try to load the remoteEntry.js, I get the following error:

ReferenceError: process is not defined
at 94655 (util.js:109:1)
at __webpack_require__ (bootstrap:19:1)
at 50372 (checks.js:6:12)
at __webpack_require__ (bootstrap:19:1)
at 14430 (index.js:6:1)
at __webpack_require__ (bootstrap:19:1)
at 89236 (backoff.js:5:15)
at __webpack_require__ (bootstrap:19:1)
at 42215 (index.js:4:15)
at __webpack_require__ (bootstrap:19:1)

Details:

• 
  Angular Version: 14
  
  
• 
  Remote App Version: 14
  
  
• 
  Webpack Version: (specific version you're using)
  
  
• 
  Module Federation Package: @angular-architects/module-federation
  
  
• 
  Polyfills Configuration: I have polyfills.ts correctly set up to include process polyfill (import 'process/browser', but I’m still seeing the error.
  
  
• 
  Configuration Files:
  
  Webpack configuration in the remote app (webpack.config.js):
  
  const { ModuleFederationPlugin } = require('webpack').container;
  
  module.exports = {
  output: {
  publicPath: "auto",
  },
  plugins: [
  new ModuleFederationPlugin({
  name: 'remoteApp',
  filename: 'remoteEntry.js',
  exposes: {
  './AppModule': './src/app/app.module.ts',
  },
  shared: {
  "@angular/core": { singleton: true, eager: true, requiredVersion: 'auto' },
  "@angular/common": { singleton: true, eager: true, requiredVersion: 'auto' },
  "@angular/router": { singleton: true, eager: true, requiredVersion: 'auto' },
  },
  }),
  ],
  };
  
  
  Routing configuration in the host app (app-routing.module.ts):
  
  import { NgModule } from '@angular/core';
  import { RouterModule, Routes } from '@angular/router';
  import { loadRemoteModule } from '@angular-architects/module-federation';
  
  const routes: Routes = [
  {
  path: 'mfe1',
  loadChildren: () =>
  loadRemoteModule({
  type: 'module',
  remoteEntry: 'http://localhost:8081/remoteEntry.js',
  exposedModule: './AppModule',
  }).then(m => m.AppModule),
  },
  ];
  
  @NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  })
  export class AppRoutingModule {}

What I’ve Tried:

• Added import 'process/browser'; to polyfills.ts.
• Ensured remoteEntry.js is being served correctly (verified by accessing http://localhost:8081/remoteEntry.js).
• Used webpack.ProvidePlugin in the Webpack configuration to polyfill process but the error still persists.

Error Details:

• The error occurs when attempting to load the remote module in the host application at http://localhost:4200/mfe1.
• I verified that remoteEntry.js is accessible, but still getting the process is not defined error.

What am I missing?

• What am I doing wrong? Why am I still encountering the process is not defined error even after adding polyfills and ensuring the correct configuration for the remote module?

Continue reading...