Is it possible to overwrite the library type to var with the withModuleFederation plugin

[Pandalovespink]

Hello, Is there a way to overwrite the library type to "variable" instead of "Module" in the withModuleFederation plugin?

[Coly010]

It's not possible within the withModuleFederation helper, but you could extend the webpack config to override it, or set up a manual webpack configuration to do it.

We would not recommend doing this with Angular 13+ apps however.

What is your use case for needing this?

[Pandalovespink]

Hello, Sorry, this is actually for my React project with the dynamic module federation. It attaches the remoteEntry.js file at run time and then load the container/Module. I originally had the module federation configuration's library type as 'var'. new ModuleFederationPlugin({ name: 'mf1', filename: 'remoteEntry.js', library: { type: 'var', name: 'mf1' }, exposes: { './mf1RemoteEntry': './src/bootstrap', }, shared: { ...deps, }, }),``

and when I upgraded the nx workspace to v14, I tried to utilize the "withModuleFederation" plugin and config it similar to the following: module.exports = withModuleFederation({ name: 'mf1', library: { type: 'var', name: 'mf1' }, exposes: { './mf1RemoteEntry': './src/bootstrap', }, });.

It seems like the withModuleFederation sets the library type as Module. I wonder if there is a way for me to override the library type as var. Thanks!

[Coly010]

@jaysoo It looks like we use Modules for React withModuleFederation. Is this intentional? I wonder if we should in fact allow this to be overridden.

It doesn't make sense in Angular to allow it to be overridden. It's probably arguably ok In React. But I'm not certain.

[anogr]

I have the same question, but maybe for a different reason. If I generate a host and a few remotes and build them without any changes, then if any of the remotes doesn't respond for some reason, the entire host will go down. I have tested by, for example, changing the filename of a remoteEntry.js file for one of the remotes. It appears to be caused by using library type = Module.

It's important that the host and all functional remotes stay up even if one of the remotes goes down.

[mcmunder]

Any news regarding this issue?

[bryantcj52]

After #10485, I was able to override the webpack plugin config to work around this issue:

const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
const { withModuleFederation } = require('@nrwl/react/module-federation');
const baseConfig = require('./module-federation.config');

module.exports = async (config) => {
  const fromModuleFederation = await withModuleFederation({
    ...baseConfig,
  });

  config = fromModuleFederation(config);

  for (let plugin of config.plugins) {
    if (plugin instanceof ModuleFederationPlugin) {
      plugin._options.library = { 
        type: 'var',
        name: plugin._options.name
      };
    }
  }

  return config;
};

[quicksilverr]

Can we add our customer web pack config also in the withModuleFederation wrapper?

const confg = getCustomWebpackConfig();
module.exports = withModuleFederation({
  ...confg,
  ...moduleFederationConfig,
});

I just checked the moduleFederationConfig, which contains -

    name: string;
    remotes?: Remotes;
    library?: ModuleFederationLibrary;
    exposes?: Record<string, string>;
    shared?: SharedFunction;
    additionalShared?: AdditionalSharedConfig;

any idea, where shall I add my custom webpack config?

[JakubPawlak]

After #10485, I was able to override the webpack plugin config to work around this issue:

const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
const { withModuleFederation } = require('@nrwl/react/module-federation');
const baseConfig = require('./module-federation.config');

module.exports = async (config) => {
  const fromModuleFederation = await withModuleFederation({
    ...baseConfig,
  });

  config = fromModuleFederation(config);

  for (let plugin of config.plugins) {
    if (plugin instanceof ModuleFederationPlugin) {
      plugin._options.library = { 
        type: 'var',
        name: plugin._options.name
      };
    }
  }

  return config;
};

I confirm, this works, thank you very much! I was struggling with it for a while but in a different scenario.

The use case for providing extra plugins is for example defining environment variables, which withModuleFederation makes really hard to use (like it is described here) https://nx.dev/recipes/environment-variables/use-environment-variables-in-angular#using-environment-variables-in-angular-applications

[github-actions[bot]]

This issue has been automatically marked as stale because it hasn't had any recent activity. It will be closed in 14 days if no further activity occurs. If we missed this issue please reply to keep it active. Thanks for being a part of the Nx community! 🙏

[github-actions[bot]]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.