React+Storybook模块联邦刷新报错：Shared module无法按需加载

页面初始加载正常，但刷新后出现报错（附错误截图）

Input.jsx #

import React from 'react';
import Input from "CSMComponents/Input" // Webpack ModuleFederation 远程应用组件

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;

已尝试的解决方案 #

• 为共享模块设置eager: true，页面刷新时报错
• 将eager改为false后，初始加载阶段就出现报错
• 验证两个项目中react和react-dom版本一致
• 确认CSMComponents的远程URL正确且可访问
• 确保模块加载顺序正确

问题现象 #

• 设置eager: true时，仅页面刷新时出现报错
• 模块初始加载正常，但刷新后无法正确重新加载

内容的提问来源于stack exchange，提问作者furkan.