Uncaught Error: Shared module is not available for eager consumption in Module Federation with React and Storybook

Question

I'm using Module Federation with React and Storybook and encountering an issue. The page loads correctly initially, but upon refresh, I receive the following error:

Error Image Preview

Input.jsx:

import React from 'react';
import Input from "CSMComponents/Input" // Webpack ModuleFederation Remote App Component

export const InputField = (props) => {
  const { id, label, name, type, placeholder, radius, description, customClassName, isShowAdditionalComponent, additionalComponent, tooltipOptions, inputActions } = props;

  return (
    <>
      <Input
        id={id}
        label={label}
        name={name}
        type={type}
        placeholder={placeholder}
        description={description}
        radius={radius}
        isShowAdditionalComponent={isShowAdditionalComponent}
        additionalComponent={additionalComponent}
        customClassName={customClassName}
        tooltipOptions={tooltipOptions}
        inputActions={inputActions}
      />
    </>
  );
};

storybook-main.js:

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

const dependencies = require("../package.json").dependencies
const path = require('path')

const config = {
  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
  addons: [
    "@storybook/addon-webpack5-compiler-swc",
    "@storybook/addon-styling-webpack",
    "@storybook/addon-onboarding",
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@chromatic-com/storybook",
    "@storybook/addon-interactions",
    "@storybook-addon-mantine",
  ],
  framework: {
    name: "@storybook/react-webpack5",
    options: {},
  },
  swc: (config, options) => ({
    jsc: {
      parser: {
        "syntax": "ecmascript",
        "jsx": true,
        "dynamicImport": true,
        "decorators": true,
      },
    },
  }),
  core: {
    builder: {
      name: '@storybook/builder-webpack5',
      options: {
        fsCache: false,
        lazyCompilation: true,
      },
    },
  },
  webpackFinal: (config) => {
    config.plugins = config.plugins || [];
    config.plugins.push(
      new ModuleFederationPlugin({
        name: "storybook_main",
        filename: 'remoteEntry.js',
        remotes: {
          'CSMComponents': 'CSMComponents@http://127.0.0.1:5500/script/csmcomponents/remoteCSMComponents.js',
        },
        shared: {
          ...dependencies,
          "react": {
            singleton: true,
            eager: true,
          },
          "react-dom": {
            singleton: true,
            eager: true,
          },
          "@mantine/core": {
            singleton: true,
            eager: true,
          },
          "@mantine/hooks": {
            singleton: true,
            eager: true,
          },
          "classnames": {
            singleton: true,
            eager: true,
          },
          "@tippyjs/react": {
            singleton: true,
            eager: true,
          },
          "@fortawesome/react-fontawesome": {
            singleton: true,
            eager: true,
          },
          "framer-motion": {
            singleton: true,
            eager: true,
          },
          "@hookform/error-message": {
            singleton: true,
            eager: true,
          },
          "lodash": {
            singleton: true,
            eager: true,
          },
          "react-hook-form": {
            singleton: true,
            eager: true,
          },
        }
      })
    );


    config.output = {
      ...config.output,
      clean: false,
      environment: {
        asyncFunction: true,
      },
    };

    return config;
  }
};

export default config;

What I've Tried:

1. I initially set eager: true for shared modules, which resulted in the error upon page refresh.
2. Changing eager to false caused the error to appear on the initial load instead.
3. Verified that react and react-dom are using the same versions across both projects.
4. Checked that the remote URL for CSMComponents is correct and accessible.
5. Ensured that the modules are loaded in the correct order.

Observations:

• The error only occurs upon refreshing the page when eager is set to true.
• The modules load correctly initially but fail to reload properly upon refresh.

Answer 1

Not sure what is the entry point for story book while loading the component files, but usually while consuming remote modules which are mentioned as singleton on both consumer and producer should have an entry point entry.js where you use dynamic import to load the main App.js file. If you failed to use dynamic import as below, it will throw the eager consumtion error.

entry.js

import("./App.js")