Module Federation - Some chunks are not loaded when navigating from the Remote module to the Host module

[andre-lima]

Bug report

What is the current behavior?

In our application we use Module Federation to break the monolith. Currently, all modules' files (Host and Remote) live in the same repository, divided into different folders with their own dependencies.

Our current setup functions in a bi-directional mode, in which, the "true” host exposes contexts & common components, and the remotes expose their pages.

We’re facing an issue when running the application in production mode only. When we reload the browser while in a route managed by the Remote module then we leave to the Host application, some of the chunks necessary to run the Host are not loaded by the browser, breaking the application.

This does not occur in development mode.

This also does not occur if we manually add the missing functionality/components to the list of exposed components in the Host’s Module Federation configuration. The thing is, these components are not needed in the Remote module, so in our opinion, they shouldn’t need to be exposed in the first place.

If the current behavior is a bug, please provide the steps to reproduce.

• Launch the application in production mode.
• Load the Host application.
  • Verify in the inspector that all the chunks are loaded.
• Navigate to a route of the Remote application.
• Refresh the browser.
  • Verify that not all the chunks were loaded this time.
• Navigate to the Host application.
• If the page you navigated to uses a component/function that was contained in the missing chunk, it will throw an error.

What is the expected behavior?

When navigating to the Host module from the Remote one, all missing chunks should be loaded, and no errors are thrown.

Other relevant information:
webpack version: 5.90.3
Node.js version: 16.20.1
Operating System: MacOS Venture 13.5
Additional tools: Module Federation

[alexander-akait]

Hello, can you provide a reproducible example? I understand that the application can be large, but we need to somehow reproduce your problem to understand why it is happening, unfortunately the current information is not enough to determine it, I can't say why it happens

[andre-lima]

Creating an example repository might not expose the issue. If the example project is small I believe the chunks will likely contain all the components needed, thus the issue would not occur.

I'll see if I can carve some time to create one this or next week, but I was hoping someone would have ideas of why the issue occurs and fixes for it, and then I could try in my real repository.

[knightswatch3]

@andre-lima can you share your webpack configs here.

[andre-lima]

@knightswatch3 Here you go:

HOST

// webpack.prod.js
const common = require('./webpack.common');
const { merge } = require('webpack-merge');
const { EsbuildPlugin } = require('esbuild-loader');

module.exports = (env) => {
  const webpackCommon = common(env);
  return merge(webpackCommon, {
    bail: true,
    mode: 'production',
    devtool: false,
    optimization: {
      minimize: true,
      minimizer: [
        new EsbuildPlugin({
          target: 'esnext',
          css: true,
        }),
      ],
    },
  });
};

// webpack.common.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { FederatedTypesPlugin } = require('@module-federation/typescript');
const { ModuleFederationPlugin } = require('webpack').container;
const path = require('path');

const pkg = require('./package.json');
const moduleFederationConfig = require('./module-federation.config');

module.exports = (env) => {
  return {
    infrastructureLogging: {
      level: 'log',
    },
    entry: './src/index',
    output: {
      publicPath: 'auto',
      clean: true,
      filename: '[name].[contenthash].js',
    },
    resolve: {
      alias: {
        '@remoteModule': path.resolve(__dirname, 'src/remoteModule/'),
        '@common': path.resolve(__dirname, 'src/common/'),
        '@graphql': path.resolve(__dirname, 'src/__types__/graphql'),
      },
      extensions: ['.ts', '.tsx', '.js'],
      modules: [path.resolve(__dirname, 'src'), 'node_modules'],
    },
    module: {
      rules: [
        {
          test: /\.m?js$/,
          resolve: { fullySpecified: false },
        },
        {
          exclude: /node_modules/,
          test: /\.tsx?$/,
          use: [
            {
              loader: 'esbuild-loader',
              options: {
                target: 'es2015',
              },
            },
          ],
        },
        {
          test: /\.gql$/,
          exclude: /node_modules/,
          use: [{ loader: 'graphql-tag/loader' }],
        },
      ],
    },
    plugins: [
      new ModuleFederationPlugin(moduleFederationConfig(env)),
      new FederatedTypesPlugin({
        disableDownloadingRemoteTypes: true,
        federationConfig: moduleFederationConfig(env),
      }),
      new HtmlWebpackPlugin({
        template: './public/index.html',
      }),
    ],
  };
};

// module-federation.config.js
const { dependencies } = require('./package.json');

module.exports = {
  name: 'app',
  filename: 'remoteEntry.js',
  exposes: {
    // Our user's contexts
    './providers/user': './providers/user',
    './providers/alerts': './providers/alerts',
    './providers/routes': './providers/routes',
    ... exposing other component
  },
  shared: [
    {
      ...Object.keys(dependencies).forEach((key) => ({
        [key]: {
          eager: true,
          requiredVersion: dependencies[key],
        },
      })),
      react: {
        eager: true,
        singleton: true,
        requiredVersion: dependencies.react,
      },
      'react-dom': {
        eager: true,
        singleton: true,
        requiredVersion: dependencies['react-dom'],
      },
      'react-router': {
        eager: true,
        singleton: true,
        requiredVersion: dependencies['react-router'],
      },
      'react-router-dom': {
        eager: true,
        singleton: true,
        requiredVersion: dependencies['react-router-dom'],
      },
      'styled-components': {
        eager: true,
        singleton: true,
        requiredVersion: dependencies['styled-components'],
      },
      '@apollo/client': {
        eager: true,
        singleton: true,
        requiredVersion: dependencies['@apollo/client'],
      },
      './providers/user': { eager: true, singleton: true },
      './providers/alerts': { eager: true, singleton: true },
      './providers/routes': { eager: true, singleton: true },
    },
    './i18n.tsx',
  ],
};

REMOTE

// webpack.prod.js
const common = require('./webpack.common');
const { merge } = require('webpack-merge');
const { EsbuildPlugin } = require('esbuild-loader');

module.exports = (env) => {
  const webpackCommon = common(env);
  return merge(webpackCommon, {
    bail: true,
    mode: 'production',
    devtool: false,
    optimization: {
      minimize: true,
      minimizer: [
        new EsbuildPlugin({
          target: 'esnext',
          css: true,
        }),
      ],
    },
  });
};

// webpack.common.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { FederatedTypesPlugin } = require('@module-federation/typescript');
const { ModuleFederationPlugin } = require('webpack').container;
const path = require('path');

const pkg = require('./package.json');
const moduleFederationConfig = require('./module-federation.config');

module.exports = (env) => {
  return {
    infrastructureLogging: {
      level: 'log',
    },
    entry: './src/index',
    output: {
      publicPath: 'auto',
      clean: true,
      filename: '[name].[contenthash].js',
    },
    resolve: {
      alias: {
        '@remoteModule': path.resolve(__dirname, 'src/remoteModule/'),
        '@common': path.resolve(__dirname, 'src/common/'),
        '@graphql': path.resolve(__dirname, 'src/__types__/graphql'),
      },
      extensions: ['.ts', '.tsx', '.js'],
      modules: [path.resolve(__dirname, 'src'), 'node_modules'],
    },
    module: {
      rules: [
        {
          test: /\.m?js$/,
          resolve: { fullySpecified: false },
        },
        {
          exclude: /node_modules/,
          test: /\.tsx?$/,
          use: [
            {
              loader: 'esbuild-loader',
              options: {
                target: 'es2015',
              },
            },
          ],
        },
        {
          test: /\.gql$/,
          exclude: /node_modules/,
          use: [{ loader: 'graphql-tag/loader' }],
        },
      ],
    },
    plugins: [
      new ModuleFederationPlugin(moduleFederationConfig(env)),
      new FederatedTypesPlugin({
        disableDownloadingRemoteTypes: true,
        federationConfig: moduleFederationConfig(env),
      }),
      new HtmlWebpackPlugin({
        template: './public/index.html',
      }),
    ],
  };
};

// module-federation.config.js
const { dependencies } = require('./package.json');

const moduleFederationConfig = (env) => {
  const remoteURLs = {
    app: env.appURL ?? 'http://localhost:3000',
  };
  return {
    name: 'remoteModule',
    filename: 'remoteEntry.js',
    remotes: {
      // Adding timestamp for cache busting
      '@app': `app@${remoteURLs['app']}/remoteEntry.js?t=${new Date().getTime()}`,
    },
    exposes: {
      ...exposing stuff
    },
    shared: {
      ...dependencies,
      react: {
        singleton: true,
        requiredVersion: dependencies.react,
      },
      'react-dom': {
        singleton: true,
        requiredVersion: dependencies['react-dom'],
      },
      'react-router': {
        singleton: true,
        requiredVersion: dependencies['react-router'],
      },
      'react-router-dom': {
        singleton: true,
        requiredVersion: dependencies['react-router-dom'],
      },
      'styled-components': {
        singleton: true,
        requiredVersion: dependencies['styled-components'],
      },
      '@apollo/client': {
        singleton: true,
        requiredVersion: dependencies['@apollo/client'],
      },
    },
  };
};

module.exports = moduleFederationConfig;

[alexander-akait]

What is webpack version? Run npm ls webpack, recentry we fixed some bugs with the chunk graph

[andre-lima]

I was at 5.80.0 and I just tried 5.90.3, but the issue still occurs.

[alexander-akait]

hm, without reproducible example I can't help, sorry, maybe you have problems with side effects packages, that is why it works in developemt mode, but broken in production