搜尋

首頁  >  問答  >  主體

為什麼在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粉476475551487 天前517

全部回覆(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
  • 取消回覆