React应用运行时注入独立编译Widget组件的实现方案咨询

你之前使用React.createElement未成功通常是两个原因：一是没有在运行时正确拿到独立Widget的导出实例，二是Widget打包时未将React/ReactDOM外置导致主应用和Widget各加载一份React实例，触发钩子运行报错。以下是两种可直接落地的实现方案：

方案1：UMD格式打包Widget + 动态Script注入 #

该方案兼容性最好，无需处理跨域模块加载限制：

• 每个独立Widget项目打包时配置输出为UMD格式，将React、ReactDOM标记为external，依赖主应用提供的全局实例避免重复加载
  以Vite配置为例，在vite.config.js中添加如下配置：

export default defineConfig({
  build: {
    lib: {
      entry: 'src/WidgetEntry.jsx',
      name: 'CalendarWidget', // 每个Widget对应唯一的全局变量名
      formats: ['umd'],
      fileName: () => 'widget.js'
    },
    rollupOptions: {
      external: ['react', 'react-dom'],
      output: {
        globals: {
          react: 'React',
          'react-dom': 'ReactDOM'
        }
      }
    }
  }
})

• 主应用侧实现通用动态加载组件：

import { useState, useEffect, createElement } from 'react'

const DynamicWidgetLoader = ({ widgetUrl, widgetGlobalName, widgetProps }) => {
  const [WidgetComponent, setWidgetComponent] = useState(null)

  useEffect(() => {
    // 已加载过直接取全局变量
    if (window[widgetGlobalName]) {
      setWidgetComponent(() => window[widgetGlobalName].default || window[widgetGlobalName])
      return
    }
    // 动态创建script标签加载Widget资源
    const script = document.createElement('script')
    script.src = widgetUrl
    script.async = true
    script.onload = () => {
      setWidgetComponent(() => window[widgetGlobalName].default || window[widgetGlobalName])
    }
    script.onerror = () => console.error('Widget加载失败')
    document.body.appendChild(script)
    return () => document.body.removeChild(script)
  }, [widgetUrl, widgetGlobalName])

  return WidgetComponent ? createElement(WidgetComponent, widgetProps) : <div>Widget加载中...</div>
}

export default DynamicWidgetLoader

方案2：ESM格式打包Widget + 动态import()加载 #

该方案代码更简洁，适合现代浏览器场景：

• 每个Widget项目打包为ESM格式，同样将React、ReactDOM标记为external，打包产物部署到支持跨域访问的静态资源服务
• 主应用中直接使用动态import()加载远程组件：

import { useState, useEffect, createElement } from 'react'

const ESMWidgetLoader = ({ widgetUrl, widgetProps }) => {
  const [WidgetComponent, setWidgetComponent] = useState(null)

  useEffect(() => {
    const load = async () => {
      // @vite-ignore 标记避免构建时静态分析报错
      const widgetModule = await import(/* @vite-ignore */ widgetUrl)
      setWidgetComponent(() => widgetModule.default || widgetModule)
    }
    load()
  }, [widgetUrl])

  return WidgetComponent ? createElement(WidgetComponent, widgetProps) : <div>Widget加载中...</div>
}

注意事项：主应用和所有Widget使用的React大版本需要保持一致，避免版本不兼容导致的运行时错误；如果使用ESM方案需要静态资源服务配置正确的CORS响应头

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