为什么在Devtools中使用Remix的Indie堆栈初始化项目时会出现'Hydration failed”错误？
P粉476475551
2023-08-30 00:12:22
<p>当我学习Remix时，我按照教程初始化了一个项目，但是当我打开Devtools时，我发现控制台上报了几个错误。</p><p>
<code>警告：不希望服务器HTML中包含<div>标签在<html>中。</code></p><p>
<code>错误：水合失败，因为初始UI与在服务器上呈现的内容不匹配。</code>*n</p><p>
最荒谬的是，我打开了Remix的首页，它的主页也报了同样的错误，所以我特别好奇水合是否成功以及为什么会发生这个错误。</p>
这是一个由浏览器扩展修改DOM引起的众所周知的React问题。
在Remix中更加明显，因为它会渲染整个
<html />，而不仅仅是<div id="root" />。你可以通过使用没有安装扩展的浏览器配置文件（或隐身模式）来确认是否是由浏览器扩展引起的。
Kiliman在这里演示了一个解决方法：https://github.com/kiliman/remix-hydration-fix，它涉及到分别渲染头部和应用程序。