程序员经验分享-hwhale

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

2024-04-11

当我学习Remix时，我按照教程初始化了一个项目，但是当我打开Devtools时，我看到控制台上报告了几个错误。
Warning: Did not expect server HTML to contain a <div> in <html>.
Error: Hydration failed because the initial UI does not match what was rendered on the server.*n
最可笑的是我打开了索引页Remix https://remix.run而且它的首页也报了同样的错误，所以我特别好奇补水是否成功以及为什么会出现这个错误


这是一个众所周知的 React 问题 https://github.com/facebook/react/issues/24430由浏览器扩展修改 DOM 引起。

在 Remix 中更明显 https://github.com/remix-run/remix/discussions/4902因为它能滋润整个肌肤<html />，不仅仅是一个<div id="root" />.

您可以通过使用未安装扩展程序（或隐身模式）的浏览器配置文件进行测试来确认是否是由浏览器扩展程序引起的。

Kiliman 在此演示了一种解决方法https://github.com/kiliman/remix-Hydration-fix https://github.com/kiliman/remix-hydration-fix其中涉及分别渲染头部和应用程序。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

ReactJS

remixrun

hydration

为什么使用 Remix 的 Indie 堆栈初始化的项目在 Devtools 中出现 Hydration failed 错误？ 的相关文章

随机推荐

  • 什么是自以为是的软件？

    Locked 这个问题及其答案是locked help locked posts因为这个问题是题外话 但却具有历史意义 目前不接受新的答案或互动 我经常看到人们说某些软件 非常固执己见 或者微软倾向于编写 不固执己见 的框架 这实际上意味着

  • 单元测试请求重试python

    如果端点在返回结果之前超时 我会尝试重试请求几次 这是代码 def retry request self params max retries 3 for i in xrange max retries try response reque

  • Visual Studio MVC 5 无需密码登录

    我使用 Visual Studio MVC 5 和处理登录等的帐户模板 我想以没有密码的用户身份登录 我试过这个 var user new ApplicationUser UserName model Email Email model E

  • 将 Java 与 Microsoft Visual Studio 2012 结合使用

    我最初是一名 C 程序员 Visual Studio 为我提供了出色的帮助 然而 我最近想扩展到 C 和 Java Visual Studio 支持 C 我现在已经有了一些使用经验 但它不支持 Java 有人可以给我一些建议 让我可以将 V

  • django 模型表单自定义字段

    我创建了一个包含一些类的模型 class Student models Model name models CharField max length 40 last name models CharFIeld max length 40 在

  • 使用适用于 Internet Explorer 的 Selenium Webdriver。测试不会运行

    我目前正在扩展我的测试 以涵盖使用 Selenium webdriver for IE IEDriverServer exe 的 Internet Explorer 我的问题是 当我使用 IE webdriver 执行测试时 当我运行测试时

  • 尝试更改 pandas 数据框中的单个值

    我看过很多类似标题的问题 但我仍然无法弄清楚 我想要做的就是将数据框中第五行第五列的值替换为值 100 我以为这就能解决问题 df loc cheerios rating 100 因为 Cheerios 是行 而 rating 是列 nam

  • 在django模板中按索引访问列表

    我正在尝试动态访问列表中的索引位置 allAppsList app id link 它不起作用 allAppsList 0 link worked 应该是语法问题 我在网上谷歌 但没有找到任何有用的东西 顺便提一句 如果在 Java 中使用

  • 如何获取子Widget的大小

    我有一个特殊的要求 允许标题小部件 通常包含静态内容出现在滚动视图的顶部 滚动视图应与标题小部件重叠 以便可以使用剪辑形状来产生效果 我通过使用堆栈视图来实现此效果 其中标题小部件作为堆栈中的第一项 滚动视图作为顶部元素 滚动视图包含一列

  • 如何扩展 Yii 框架类以及放置文件的位置

    我想扩展一些内置的框架类 但我有一些不清楚的地方 我认为我应该将我的类放在我的组件文件夹下 这是正确的位置吗 我应该将课程命名为Subfolder ClassName和像这样的文件ClassName php 我如何继承 默认包含路径不包含框

  • 无法通过 KAFKA api 连接到 EventHub

    通过 kafka 库连接事件中心时遇到异常 Caused by org apache kafka common protocol types SchemaException Error reading field sasl auth byt

  • 如何使用 JavaScript 获取缩放后的 SVG 元素的宽度？

    如果我有内联 SVG 包括已缩放的元素

  • 多个队列在一个通道中消耗

    我使用rabbitMq 来管理和使用队列 我有多个队列 它们的数量并不具体 我使用直接交换来发布消息 我怎样才能仅使用一个队列来消费每个队列的所有消息 基于routing key 渠道 此时我假设我有 5 个队列 我使用了 for 循环并为

  • vuejs如何上传图片？

    请 下面是我的 vue 组件脚本部分中的代码 我的所有输入字段均正确 但图像和视频上传显示空值 我试图解决这个问题但没有成功 playVideo url let video video preview get 0 video preload

  • GCM 和 Google Analytics 使用不同的 google 帐户在 google-services.json 文件中集成在一起？

    我必须将 GCM 和 Google Analytics 集成到同一个应用程序中 所以首先我们需要获取google services json配置文件 好吧 假设我有两个谷歌空调 把它想象成 电子邮件受保护 cdn cgi l email p

  • OpenGL 与 Cocos2d：该选择什么？

    我知道 cocos2d 它是非常简单的 API 我可以用它来做简单而巨大的 2D 甚至有时 3D 游戏 应用程序 我也知道 OpenGL 它更复杂 它的 API 级别较低等 问题 实现 2D 3D 游戏用什么更好 如果我们有cocos2d这

  • 尝试检索经过身份验证的 Google+ 用户的电子邮件地址时收到“gapi.client is undefined”

    我正在尝试从使用 google 登录按钮登录我的网站的访问者那里检索用户数据 但我最终在 javascript 控制台中收到消息 TypeError gapi client 未定义 由于我无法识别错误 我最终从 Google 复制 粘贴了示

  • 在 Linux 的 gdb 中启用 memleak 选项

    我试图查看哪个进程导致内存泄漏 并转储导致它的堆以查看问题所在 我应该在 gdb 中使用哪个命令来设置内存泄漏并检查堆 I tried gdb check leaks checkpoint can t find fork function

  • 如何将 Composer 包包含到纯 php 中？

    下午好 首先我要说的是 我从未在我的项目中包含过 Composer 项目 除非它是 Laravel 框架的 Composer 包 如果需要 您 需要 它并将其添加到提供者数组和别名中 现在 问题来了 我有一个作曲家包我正在尝试使用https

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

    当我学习Remix时 我按照教程初始化了一个项目 但是当我打开Devtools时 我看到控制台上报告了几个错误 Warning Did not expect server HTML to contain a div in Error Hyd

热门标签