Webpack >5.101.0 not working on microfrontend-angular solution ( Fails only on deployed version - production ) ( NEED HELP )

[kindy91]

Introduction and Setup

I use angular and ngx-build-plus for a microfrontend - host application. Lately, after migrating to the latest angular version, i receive the following run time error IN PRODUCTION, NOT LOCALLY when loading the microfrontend in the host application.

__webpack_exports__ is not defined

After some debugging, the migration to that angular version, uses webpack: 5.101.2 which is causing the current behavior for me for some reason i can't understand.

The following is my package setup

{
  ...
    "@angular-devkit/build-angular": "20.3.2",
  ...
  "ngx-build-plus": "20.0.0",
  ...
}

PS: When i override webpack to version 5.101.0, i don't see the bug no more. So i know definetly it happens after that

Moreover, my microfrontend webpack config looks like follows: ( CommonJs ES5 config )

module.exports = {
  output: {
    uniqueName: 'mf1',
    publicPath: 'auto',
  },
  optimization: {
    runtimeChunk: false,
  },
  experiments: {
    outputModule: true,
  },
  plugins: [
    new ModuleFederationPlugin({
      library: { type: 'module' },

      name: 'mf',
      filename: 'remoteEntry.js',
      exposes: {
        './SomeRoutes':
          './src/app/some-routes.routes.ts',
        './SomeComponent':
          './src/app/some-component.component.ts',
      },

      shared: share({
            ...some shared libs
      }),
    }),
  ],
};

Debugging

• As mentioned before, moving to webpack to version 5.101.0 removes the issue.
• Since it only happens on production and not locally, when i compared what happens when loading the mf remoteEntry.js, i found that only the mf chunks are loaded, as for the host they are not.

Check the following 2 screenshots from the network calls where i run the host one time on production and one time locally as production using ng serve --configuration production

Localhost ( run as production )

Production

• Furthermore, it seems that for some reason the chunks of the host are not being loaded.

Possible Causes

- After checking what was released in `5.101.1`, saw the following points that i think can be the cause for the bug.

https://github.com/webpack/webpack/releases/tag/v5.101.1

Change log from webpack v5.101.1
Fixed the failure export of internal function for ES module chunk format
Fixed GetChunkFilename failure caused by dependOn entry
Fixed the import of missing dependency chunks
Fixed when entry chunk depends on the runtime chunk hash

While i assume this is the reason it is happenning, i am not sure where the bug actually is happenning, and therefore where the fix can be applied, whether:

1. Is it because im using ES5 instead of ES6
2. Is thefix GetChunkFilename in v5.101.1 buggy?
3. Do i need to update something in my config?
4. Is the problem with ngx-build-plus library?

I would love to get some suggestions from the community, as i am out of solutions.

FYI: these are the support tickets i openned around a month ago in angular and ngx-build-plus.
angular/angular#63413
manfredsteyer/ngx-build-plus#419

[xiaoxiaojx]

@kindy91 Thanks for your detailed issue report. I’ll look into the cause of the changes in 5.101.1.

[xiaoxiaojx]

I tried creating a demo using the provided webpack.config.js, but I wasn’t able to reproduce the issue.
@kindy91 Do you happen to have a minimal reproduction repo? Thanks!

[kindy91]

Thanks for the quick response! :)

I tried to reproduce it but couldn't. This is an example i created a while back and it was working fine.

https://github.com/kindy91/shell
https://github.com/kindy91/mf1

I even have another microfrontend with the same deps and config that works just fine in my business case, but for the specific buggy repo it is failing.

That's why i'm trying to understand what can be a possible reason for this buggy behavior. Like what in v5.101.1 or v5.101.2 that changed that could cause such a bug.

[xiaoxiaojx]

@kindy91 Could you provide more details about the error stack trace, as well as the relevant section of the bundled code where the error occurs? That would help us better understand what’s happening.
It looks related to the changes in this PR. https://github.com/webpack/webpack/pull/19768/files

[xiaoxiaojx]

Sorry for the delay. Without a reproducible repo, it's still quite difficult to confirm the cause of the issue.

[alexander-akait]

Can you try 5.102.0?

[alexander-akait]

@kindy91 Also can you try to revert a018901 locally (i.e. return all red lines)

[alexander-akait]

Also if you want to publicly share your code, you can invite me or @xiaoxiaojx in your private repo, we will look how we can fix it and why it happens

[hai-x]

And if you’re unable to share the code due to privacy restrictions, it would still be helpful to provide the entire bundled output (similar to the screenshot above, but with all lines).