Why am I getting these hydration errors in only Chrome based browsers.
Answered
Grass Carrying Wasp posted this in #help-forum
Grass Carrying WaspOP
(Embedded a codesandbox link for the reproduced env, dunno why it's so huge that discord converts it into a txt file)
Answered by Asian black bear
Yeah, at least you won't go crazy searching your code! Just gonna put a summary here for anyone that lands on this thread again.
This was caused by having the LastPass browser extension, which presumably modified the DOM before React could hydrate. Other browser extensions can also be the cause.
This was caused by having the LastPass browser extension, which presumably modified the DOM before React could hydrate. Other browser extensions can also be the cause.
18 Replies
Grass Carrying WaspOP
Unhandled Runtime Error
Error: Hydration failed because the initial UI does not match what was rendered on the server.
Warning: Did not expect server HTML to contain a <div> in <form>.
See more info here: https://nextjs.org/docs/messages/react-hydration-error
Component Stack
form
LoginForm
Call Stack
throwOnHydrationMismatch
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (6789:0)
popHydrationState
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (7123:0)
completeWork
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (18650:0)
completeUnitOfWork
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (24732:0)
performUnitOfWork
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (24537:0)
workLoopConcurrent
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (24512:0)
renderRootConcurrent
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (24468:0)
performConcurrentWorkOnRoot
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (23339:0)
workLoop
node_modules/next/dist/compiled/scheduler/cjs/scheduler.development.js (261:0)
flushWork
node_modules/next/dist/compiled/scheduler/cjs/scheduler.development.js (230:0)
performWorkUntilDeadline
node_modules/next/dist/compiled/scheduler/cjs/scheduler.development.js (534:0)
k
https://codesandbox.io/p/preview-protocol.js (36:2929)
Q
https://codesandbox.io/p/preview-protocol.js (36:3113)
J
https://codesandbox.io/p/preview-protocol.js (36:3473)Unhandled Runtime Error
Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.
Call Stack
updateHostRoot
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (15468:0)
beginWork$1
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (17338:0)
beginWork
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (25675:0)
performUnitOfWork
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (24526:0)
workLoopSync
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (24242:0)
renderRootSync
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (24197:0)
recoverFromConcurrentError
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (23432:0)
performConcurrentWorkOnRoot
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (23377:0)
workLoop
node_modules/next/dist/compiled/scheduler/cjs/scheduler.development.js (261:0)
flushWork
node_modules/next/dist/compiled/scheduler/cjs/scheduler.development.js (230:0)
performWorkUntilDeadline
node_modules/next/dist/compiled/scheduler/cjs/scheduler.development.js (534:0)
k
https://codesandbox.io/p/preview-protocol.js (36:2929)
Q
https://codesandbox.io/p/preview-protocol.js (36:3113)
J
https://codesandbox.io/p/preview-protocol.js (36:3473)here's the repo if you want to reproduce it locally, https://github.com/fibbbonachos/tunein/tree/dev
please let me know if it's me who's doing something wrong
this has been bugging me for the last 2 days
Asian black bear
I don't see anything obvious in your github. Do you have any browser extensions installed?
sometimes they will touch the DOM before React hydrates it which would cause an error.
@Asian black bear I don't see anything obvious in your github. Do you have any browser extensions installed?
Grass Carrying WaspOP
these are the only extensions i have installed
What the fuck
apparently it was Lastpass
not getting any errors now that I've disabled it
horror
any way to prevent this from happening for people who use lastpass?
Asian black bear
I am not sure! It seems like something someone else would need to fix, like a bug.
React team will tell you it dont hurt nothing
And logmein will say "cool we will look right into it, ur the best thanks"
@Asian black bear I am not sure! It seems like something someone else would need to fix, like a bug.
Grass Carrying WaspOP
thanks eitherway, really appreciate it. at least we could diagnose the issue
@Grass Carrying Wasp thanks eitherway, really appreciate it. at least we could diagnose the issue
Asian black bear
Yeah, at least you won't go crazy searching your code! Just gonna put a summary here for anyone that lands on this thread again.
This was caused by having the LastPass browser extension, which presumably modified the DOM before React could hydrate. Other browser extensions can also be the cause.
This was caused by having the LastPass browser extension, which presumably modified the DOM before React could hydrate. Other browser extensions can also be the cause.
Answer