Issues with code splitting in webpack config in an nx monorepo

[CodeMonkVJ]

In my monorepo there are a bunch of apps and a host app which is lazy loading the rest of the apps as remotes.

One of the icons ui library is repeatedly getting built with every app even when module federation is set up.

This is causing an unnecessary increase in size. This is what I am trying in my webpack config to try and split the ui library code but the code is still getting added in other chunks also.

const { composePlugins, withNx } = require('@nx/webpack');
const { withReact } = require('@nx/react');
const { withModuleFederation } = require('@nx/react/module-federation');

const baseConfig = require('./module-federation.config');

const config = {
  ...baseConfig,
};

// Nx plugins for webpack to build config object from Nx options and context.
module.exports = composePlugins(
  withNx(),
  withReact(),
  withModuleFederation(config),
  (config) => {
    return {
      ...config,
      // entry: {
      //   ...config.entry,
      //   icons: ['@module/icons'],
      //   main: {
      //     import: config.entry.main,
      //     dependOn: 'icons',
      //   },
      // },
      output: {
        ...config.output,
        filename: () => {
          return '[name].js';
        },
        chunkFilename: (chunkInfo) => {
          if (chunkInfo.chunk.name === 'iconsChunk') {
            return `module-icons.bundle.[id].js`;
          } else {
            return `${baseConfig.name}.bundle.[id].js`;
          }
        },
      },
      optimization: {
        runtimeChunk: false,
        mergeDuplicateChunks: true,
        splitChunks: {
          cacheGroups: {
            iconsVendor: {
              test: /[\\/]node_modules[\\/](?:@module[\\/])?icons[\\/]/,
              name: 'iconsChunk',
              chunks: 'all',
              // layer: 'iconsChunk',
              enforce: true,
              reuseExistingChunk: true,
            },
          },
        },
      },
      // externals: ['@module/icons'],
    };
  }
);

EDIT: I am using an nx monorepo which has a bunch of plugins which sort of help in creating a webpack config which works well with the structures predefined by nx. More info here

[alexander-akait]

Sorry, I don't know what is withModuleFederation and which options there

[CodeMonkVJ]

Hey have updated. My bad if I wasn't very clear with the monorepo structure. The main issue is coming with the bundling of libs for each app and how they are getting bundled multiple times with all the apps. Since some icon libraries are large in size, the total build size is increasing.

[alexander-akait]

Can you create a minimum reproducible test repo? I will look. Do you use pnpm?