首页  >  问答  >  正文

为什么在Devtools中使用Remix的Indie堆栈初始化项目时会出现“Hydration failed”错误?

<p>当我学习Remix时,我按照教程初始化了一个项目,但是当我打开Devtools时,我发现控制台上报了几个错误。</p><p> <code>警告:不希望服务器HTML中包含<div>标签在<html>中。</code></p><p> <code>错误:水合失败,因为初始UI与在服务器上呈现的内容不匹配。</code>*n</p><p> 最荒谬的是,我打开了Remix的首页,它的主页也报了同样的错误,所以我特别好奇水合是否成功以及为什么会发生这个错误。</p>
P粉476475551P粉476475551389 天前435

全部回复(1)我来回复

  • P粉043566314

    P粉0435663142023-08-30 17:16:14

    这是一个由浏览器扩展修改DOM引起的众所周知的React问题

    在Remix中更加明显,因为它会渲染整个<html />,而不仅仅是<div id="root" />

    你可以通过使用没有安装扩展的浏览器配置文件(或隐身模式)来确认是否是由浏览器扩展引起的。

    Kiliman在这里演示了一个解决方法:https://github.com/kiliman/remix-hydration-fix,它涉及到分别渲染头部和应用程序。

    回复
    0
  • 取消回复