React中使用Vite Plugin Federation集成Highcharts报错问题

问题现象 #

• 远程应用独立运行时，Highcharts组件功能正常
• 作为微前端被宿主应用加载时，Chrome控制台抛出以下错误：

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
at createFiberFromTypeAndProps (chunk-373CG7ZK.js?v=da962c3f:20440:23)
at createFiberFromElement (chunk-373CG7ZK.js?v=da962c3f:20461:23)
at reconcileSingleElement (chunk-373CG7ZK.js?v=da962c3f:10511:31)
at reconcileChildFibers2 (chunk-373CG7ZK.js?v=da962c3f:10548:43)
at reconcileChildren (chunk-373CG7ZK.js?v=da962c3f:14288:37)
at mountIndeterminateComponent (chunk-373CG7ZK.js?v=da962c3f:14984:13)
at beginWork (chunk-373CG7ZK.js?v=da962c3f:15912:22)
at HTMLUnknownElement.callCallback2 (chunk-373CG7ZK.js?v=da962c3f:3672:22)
at Object.invokeGuardedCallbackDev (chunk-373CG7ZK.js?v=da962c3f:3697:24)
at invokeGuardedCallback (chunk-373CG7ZK.js?v=da962c3f:3731:39)

远程应用package.json配置如下：

{
  "name": "remote",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite --port 5173 --strictPort",
    "build": "tsc -b && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview --port 4000 --strictPort",
    "deploy": "npm run build & npm run preview"
  },
  "dependencies": {
    "highcharts": "^11.4.8",
    "highcharts-react-official": "^3.2.1",
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  },
  "devDependencies": {
    "@eslint/js": "^9.9.0",
    "@originjs/vite-plugin-federation": "^1.3.6",
    "@types/react": "^18.3.3",
    "@types/react-dom": "^18.3.0",
    "@vitejs/plugin-react": "^4.3.1",
    "eslint": "^9.9.0",
    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
    "eslint-plugin-react-refresh": "^0.4.9",
    "globals": "^15.9.0",
    "typescript": "^5.5.3",
    "typescript-eslint": "^8.0.1",
    "vite": "^5.4.1"
  }
}

解决方案 #

1. 修正模块联邦共享配置 #

在远程应用的vite.config.ts中，将highcharts和highcharts-react-official加入共享列表，并开启单实例模式，避免多实例冲突：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import federation from '@originjs/vite-plugin-federation';

export default defineConfig({
  plugins: [
    react(),
    federation({
      name: 'remote',
      filename: 'remoteEntry.js',
      exposes: {
        './HighchartsComponent': './src/components/HighchartsComponent',
      },
      shared: {
        react: { singleton: true, requiredVersion: '^18.3.1' },
        'react-dom': { singleton: true, requiredVersion: '^18.3.1' },
        'highcharts': { singleton: true, requiredVersion: '^11.4.8' },
        'highcharts-react-official': { singleton: true, requiredVersion: '^3.2.1' },
      },
    }),
  ],
});

2. 规范组件导出与导入方式 #

• 远程组件导出：确保组件使用默认导出或明确的命名导出，避免导出模块对象：

// 远程组件文件 src/components/HighchartsComponent.tsx
import HighchartsReact from 'highcharts-react-official';
import Highcharts from 'highcharts';

const HighchartsComponent = () => {
  const chartOptions = {
    title: { text: '示例图表' },
    series: [{ data: [1, 2, 3] }]
  };

  return <HighchartsReact highcharts={Highcharts} options={chartOptions} />;
};

export default HighchartsComponent;

• 宿主组件导入：使用React懒加载并配合Suspense处理加载状态：

// 宿主应用中使用远程组件
import { lazy, Suspense } from 'react';

const HighchartsComponent = lazy(() => import('remote/HighchartsComponent'));

const App = () => {
  return (
    <div>
      <Suspense fallback={<div>加载图表中...</div>}>
        <HighchartsComponent />
      </Suspense>
    </div>
  );
};

export default App;

3. 检查Highcharts-react-official导入方式 #

避免错误的导入方式，确保直接导入默认导出的组件：

// 正确
import HighchartsReact from 'highcharts-react-official';

// 错误（会拿到整个模块对象，而非组件）
import * as HighchartsReact from 'highcharts-react-official';

4. 统一宿主与远程依赖版本 #

检查宿主应用的package.json，确保highcharts和highcharts-react-official的版本与远程应用完全一致，避免版本不兼容导致模块解析异常。

原因分析 #

该错误本质是React尝试渲染一个无效的元素类型（这里是模块对象而非组件函数/类）。在Vite模块联邦场景下，常见触发原因包括：

• 共享依赖未开启单实例模式，导致远程与宿主加载了多份依赖实例
• 组件导出/导入方式错误，误将模块对象当作组件使用
• 宿主与远程依赖版本不一致，导致模块结构不兼容

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