如何在我的 React.js App Hydration 过程中忽略 Chrome 扩展 html 标签？

Question

React.js 水合问题已经有一段时间了，因为 Chrome 扩展（例如 Last Pass）在出现“电子邮件”或“密码”等单词的表单输入处注入 html 节点。这显然是编码 Next.js 14 应用程序时的一个问题，因为每次都会弹出错误。

除了删除扩展之外，我还没有找到解决方案。但这并不理想，因为我们无法保证所有用户共享相同的非扩展场景。

我还尝试在任何地方使用“suppressHydrationWarning”，但没有效果。 （我仍然遇到那些水合错误）。

非常感谢任何帮助！

Answer 1

您是否尝试过 Next.JS 文档中的解决方案？ https://nextjs.org/docs/messages/react-Hydration-error

您可能需要研究 CSR 并通过在特定组件上禁用 SSR 来摆脱 SSR。即

const ComponentWithIssue = dynamic(() => import('../components/component-with-issue '), { ssr: false })`

....
return (
    <div>
      <ComponentWithIssue />
    </div>
  )