划词翻译会导致用了 react SSR(Server-side rendering) 的网站无法正常运行

[CodFrm]

基本信息

划词翻译版本：
9.6.0
浏览器版本：
Microsoft Edge
版本 111.0.1661.51 (正式版本) (arm64)
操作系统：
MacOS

重现问题的步骤

1. npx create-remix@1.14.3 按流程创建remix基础模板
2. npm run dev 启动dev环境

预期行为

remix网站成功，且无报错

实际行为

报错

补充信息

[lmk123]

已确认是由于划词翻译在 html 下插入了一个 div 导致使用了 Server-side rendering 的网站发现客户端和服务端 html 结构不一样导致的。

如果划词翻译延迟一段时间（比如一秒后）再将 div 插入 html 就不会有这个问题，但是这个插入的具体时机很难把握。。

[lmk123]

以 https://radar.cloudflare.com/ 这个网站为例，经过多次测试，发现划词翻译最少需要在 100 毫秒后插入到 dom 才能确保不会报错，但我不确定在其他 Server-side rendering 的网站是不是也可以用 100 毫秒作为插入的时机。

[CodFrm]

remix-run/remix#1077

remix中也有反馈，不止本插件有问题，但是除了关闭扩展，没有提到其他修复方案

[CodFrm]

使用hydrate暂时解决，link: facebook/react#24430

 import { RemixBrowser } from "@remix-run/react";
 import { startTransition, StrictMode } from "react";
+import { hydrate } from "react-dom";
 import { hydrateRoot } from "react-dom/client";
 
 startTransition(() => {
-  hydrateRoot(
-    document,
-    <StrictMode>
-      <RemixBrowser />
-    </StrictMode>
-  );
+  hydrate(<RemixBrowser />, document);
 });