使用React.js构建可嵌入Widget时遇Minified React error #299求解决

这个错误本质是重复加载React/ReactDOM导致的全局环境冲突——你的Widget和嵌入的宿主页面各自加载了一套React实例，引发了框架内部的状态混乱。以下是针对性的解决办法：

• 将React/ReactDOM设为外部依赖
  让Parcel不把React和ReactDOM打包进Widget，而是复用宿主页面的全局实例。在项目的package.json中添加：

  "peerDependencies": {
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  },
  "parcel": {
    "externals": {
      "react": "React",
      "react-dom": "ReactDOM"
    }
  }
  

  重新执行你的构建命令，打包后的Widget会依赖全局的React和ReactDOM对象，避免重复加载。

• 用Shadow DOM隔离Widget环境
  如果宿主页面没有React或版本不兼容，给Widget创建独立的Shadow DOM容器，完全隔离React环境。修改你的Widget入口代码：

  // 创建宿主容器
  const widgetContainer = document.createElement('div');
  document.body.appendChild(widgetContainer);
  // 启用Shadow DOM
  const shadowRoot = widgetContainer.attachShadow({ mode: 'open' });
  // 在Shadow DOM中渲染组件
  import React from 'react';
  import ReactDOM from 'react-dom/client';
  import YourWidget from './YourWidget';
  
  const root = ReactDOM.createRoot(shadowRoot);
  root.render(<YourWidget />);
  

  这种方式下，你可以保持React/ReactDOM在打包内，Shadow DOM会隔绝宿主环境的变量干扰。

• 调整Parcel构建参数
  尝试关闭Parcel的scope hoist优化，避免全局变量被意外共享：

  parcel build src/index.js --no-source-maps -d widget --no-scope-hoist
  

• 版本一致性检查
  如果宿主页面已加载React，确保你的Widget使用的React主版本（如16.x/17.x/18.x）与宿主完全一致，跨大版本的API差异也可能触发这类冲突。

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