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

Question

当我学习Remix时，我按照教程初始化了一个项目，但是当我打开Devtools时，我发现控制台上报了几个错误。警告：不希望服务器HTML中包含

标签在中。错误：水合失败，因为初始UI与在服务器上呈现的内容不匹配。*n最荒谬的是，我打开了Remix的首页，它的主页也报了同样的错误，所以我特别好奇水合是否成功以及为什么会发生这个错误。

P粉043566314 · Answer

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

在Remix中更加明显，因为它会渲染整个，而不仅仅是

。

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

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