ModifyEntryPlugin issue

[NagornovAlex]

Hi!

I have encountered an issue when calling withModuleFederationPlugin with eager loading set to true:

TypeError: Cannot read properties of undefined (reading 'import')
    at D:\Projects\SomeProject\libs\mf\src\utils\modify-entry-plugin.ts:20:20
    at mergeEntry (D:\Projects\SomeProject\libs\mf\src\utils\modify-entry-plugin.ts:10:11)
    at cfgOrRemove (D:\Projects\SomeProject\libs\mf\src\utils\modify-entry-plugin.ts:13:22)
    at D:\Projects\SomeProject\libs\mf\src\utils\modify-entry-plugin.ts:18:12
    at Array.forEach (<anonymous>)
    at ModifyEntryPlugin.apply (D:\Projects\SomeProject\libs\mf\src\utils\modify-entry-plugin.ts:16:30)
    at createCompiler (D:\Projects\SomeProject\node_modules\webpack\lib\webpack.js:76:12)
    at create (D:\Projects\SomeProject\node_modules\webpack\lib\webpack.js:143:16)
    at webpack (D:\Projects\SomeProject\node_modules\webpack\lib\webpack.js:167:32)
    at Object.f [as webpackFactory] (D:\Projects\SomeProject\node_modules\webpack\lib\index.js:72:16)

I could figure it out that ModifyEntryPlugin cannot find 'style' entry in compiler.options.entry which is set in the createModifyEntryPlugin method in .\libs\mf\src\utils\with-mf-plugin.ts Ln 136 when eager loading is set to true.

export class ModifyEntryPlugin {
  ....
  apply(compiler) {
    ...
   const mergeEntry = (keyFn, key) => [
      ...(keyFn(this.config[key]) || []),
      ...(keyFn(compiler.options.entry[key]) || []),        //<---------- Passes undefined if key is missing in compiler.options.entry
    ];
    const cfgOrRemove = (objFn, valueFn, key) => {
      const values = mergeEntry(valueFn, key);
      return values.length > 0 ? objFn(values) : {};
    };
    Object.keys(this.config).forEach((key) => {
      compiler.options.entry[key] = {        //<---------- No check if there is an entry for the key 
        ...cfgOrRemove(
          (v) => ({ import: v }),
          (c) => c.import,                           //<---------- Error: Cannot read properties of undefined (reading 'import'). c is undefined
          key
        ),
        ...cfgOrRemove(
          (v) => ({ dependOn: v }),
          (c) => c.dependOn,
          key
        ),
      };
    });
    ......
}

Is it my project specifiic issue (some ts, compiler options) or does the ModifyEntryPlugin plugin need to be fixed to add key exists check ?

Thank you!

[NagornovAlex]

Seems the issue is originally caused by using nx builder @nx/angular:webpack-browser which removes or doesn't include 'styles' compiler options entry.

[frazzaglia]

The same for me in v15. As you said in this issue it's related to eager: true.
In my project there isn't @nx/angular:webpack-browser.

[NagornovAlex]

The same for me in v15. As you said in this issue it's related to eager: true. In my project there isn't @nx/angular:webpack-browser.

yes it could be it is valid only for ngx-build-plus builder. Anyway the provided fix handles it.

[frazzaglia]

I removed ngx-build-plus builder and actually I'm using @angular-devkit/build-angular

[frazzaglia]

Hi! Any news about bug fix?

[frazzaglia]

@manfredsteyer any news about this? Thanks

[Ketec]

@angular-builders/custom-webpack:browser have been using this to extend webpack and got the same issue.

It may work with ngx-build-plus - but it's outdated and does not support angular 18.

"hotfix" is to just extract the withmfe and modify entry plugins as js to add the extra styles check, but that's not a good long term solution - just a patch to not get stuck.