如何在多组件（含模块联邦组件）中仅配置一次React-toastify

问题根源 #

模块联邦架构下，ProjectB作为远程组件默认会使用自身依赖的react-toastify实例，而ProjectA中声明的ToastifyContainer属于主项目的上下文环境。两者实例相互独立，导致ProjectB的toast调用无法找到主项目中的容器，必须在ProjectB内重复声明容器才能生效。

当前方案的弊端 #

在ProjectB中单独引入ToastifyContainer并非最佳实践：

• 会生成多个独立的通知容器，可能引发样式冲突、通知重复渲染等问题
• 违背全局组件统一管理的原则，增加维护成本
• 远程组件过度依赖自身全局配置，降低复用性

最优解决方案：共享React-Toastify实例 #

通过模块联邦的共享依赖配置，让ProjectB复用ProjectA的react-toastify实例，实现仅在主项目配置一次ToastifyContainer即可全局生效。

步骤1：配置模块联邦共享依赖 #

在ProjectA和ProjectB的Webpack配置中，将react-toastify设置为单例共享依赖：

ProjectA的Webpack配置（Module Federation部分）

new ModuleFederationPlugin({
  name: 'ProjectA',
  remotes: {
    ProjectB: 'ProjectB@http://localhost:3001/remoteEntry.js',
  },
  shared: {
    react: { singleton: true },
    'react-dom': { singleton: true },
    'react-toastify': { 
      singleton: true, 
      version: '^9.1.3' // 替换为你实际使用的版本
    }
  }
})

ProjectB的Webpack配置（Module Federation部分）

new ModuleFederationPlugin({
  name: 'ProjectB',
  filename: 'remoteEntry.js',
  exposes: {
    './ProjectB': './src/ProjectB'
  },
  shared: {
    react: { singleton: true },
    'react-dom': { singleton: true },
    'react-toastify': { 
      singleton: true, 
      version: '^9.1.3' // 与ProjectA版本保持一致
    }
  }
})

步骤2：移除ProjectB中的重复配置 #

删除ProjectB内的ToastifyContainer导入和声明，直接使用react-toastify的toast函数即可，此时它会自动关联ProjectA中的容器。

备选方案：通过Props传递Toast实例 #

如果无法通过共享依赖解决（如版本冲突、权限限制等），可以将ProjectA的toast实例通过props传递给ProjectB：

ProjectA的App.js

import { ToastifyContainer, toast } from 'react-toastify';
import ProjectB from 'ProjectB/ProjectB';

const App = () => {
  return(
    <div>
      <ToastifyContainer />
      <ProjectB toast={toast} />
      <OtherCompoentsFromProjectA />
    </div>
  )
}

ProjectB组件

const ProjectB = ({ toast }) => {
  const triggerNotification = () => {
    toast.info('来自ProjectB的通知');
  };

  return <button onClick={triggerNotification}>触发通知</button>;
};

export default ProjectB;

这种方式无需修改模块联邦配置，但需要为每个远程组件手动传递toast实例，适合小规模场景。

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