如何在未安装React的第三方应用HTML中嵌入React Widget？

完全可以做这类React Widget，你碰到的React或createRoot未定义错误，本质是构建产物没正确打包依赖，或者加载顺序不对，下面给你两种靠谱的解决思路：

一、修复IFrame嵌入方案 #

你用IFrame的思路没问题，出错大概率是Widget的构建产物没把React和ReactDOM打包进去，或者文件加载路径不对。

解决步骤：

• 确保React Widget项目构建时，把React、ReactDOM打包进最终静态文件（别用externals排除它们）。比如用Vite就别在vite.config.js里把react设为external；用Create React App的话，直接跑npm run build默认会打包所有依赖。
• 把构建后的build（或dist）文件夹部署到你的域名下，确认index.html里的JS/CSS路径是对的（相对或绝对路径都可以）。
• 使用者直接用你部署后的IFrame地址嵌入就行，就像你示例里的写法，只要https://yourdomain.com/widget/index.html能正常打开，就不会有依赖未定义的问题。

二、修复Web Component（react-to-web-component）方案 #

用react-to-web-component时，必须保证React和ReactDOM先于你的Widget脚本加载，而且要全局可访问。

解决步骤：

1. 你的Widget项目里，要么把React、ReactDOM作为全局变量引入，要么构建时把它们打包进去。
2. 给使用者的嵌入代码要包含这三部分：
   • 先加载React和ReactDOM的脚本（CDN或你自己托管的版本都行）
   • 再加载你的Widget Web Component脚本
   • 最后在HTML里用自定义元素

比如使用者的页面可以这么写：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Embed React Widget</title>
  <!-- 先加载React和ReactDOM -->
  <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
  <!-- 再加载你的Widget Web Component脚本 -->
  <script src="https://yourdomain.com/widget/web-component.js"></script>
</head>
<body>
  <h1>Welcome to My Page</h1>
  <p>Below is the embedded feedback widget:</p>
  <!-- 使用自定义元素 -->
  <feedback-widget></feedback-widget>
</body>
</html>

另外，如果你的组件基于React 18，要确认react-to-web-component工具包支持这个版本，或者手动适配渲染方式，避免createRoot未定义的问题。

额外注意点 #

• 不管用哪种方案，要么让Widget产物是自包含的，要么明确告诉使用者需要提前加载哪些依赖。
• 测试时直接打开使用者的示例HTML文件，看控制台错误信息，就能快速定位是依赖没加载还是路径错了。

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