Module Federation support like Angular/React with Nx natively?

[codef0rmerz]

Is there any example/documentation available to enable module federation in the generated vue3 application?

I've tried to do this but getting an error Cannot read property 'includes' of undefined

const { ModuleFederationPlugin } = require('webpack').container;

module.exports = (config) => {
  config.plugins.push(
    new ModuleFederationPlugin({
      name: 'profileSettings',
      filename: 'remoteEntry.js',
      exposes: {
        './HelloWorld': './src/components/HelloWorld',
      },
    })
  );
};

I further debugged the issue and found out that it's because of missing output.enabledLibraryTypes property in config. But when I tried to setup an empty array against enabledLibraryTypes property in output, it yells with invalid schema warning.

Cannot read property 'includes' of undefined
TypeError: Cannot read property 'includes' of undefined
    at ModuleFederationPlugin.apply (/node_modules/webpack/lib/container/ModuleFederationPlugin.js:52:49)

[ZachJW34]

Is there a recommended example of setting up Module Federation with a vue-cli application? I'm not too familiar with module federation but if you share a repo that exhibits your webpack changes not being respected I can help debug

[codef0rmerz]

Thanks @ZachJW34 for helping. You can check https://github.com/module-federation/module-federation-examples/tree/master/vue3-cli-demo example and try to plug in the MF configurations in configure-webpack.js of the generated app via nx-plus.

[ZachJW34]

I see that the demo is using vue-cli v5, which uses Webpack 5. I plan on getting to the upgrade soon which should help https://github.com/ZachJW34/nx-plus/issues/228