NextJsでまれによくあるエラー

JavaScript

拡張機能によるエラー / hydration error

私の場合はログイン画面で下記のようなエラーが発生しました。人によって発生したりしなかったり、発生するブラウザもまちまいの現象だったので最初は原因が掴めず苦労しました。
原因はブラウザ拡張機能でした。私のケースではパスワード管理ソフトのKeeperを使っていたのが直接の原因で、こいつがDOMを直接弄るためにhydration errorになっていました。

Error: Hydration failed because the initial UI does not match what was rendered on the server.
See more info here: https://nextjs.org/docs/messages/react-hydration-error
Warning: Extra attributes from the server: data-keeper-lock-id

コメント