為什麼在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，它涉及分別渲染頭部和應用程式。