Lightrun
question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Hydration error with ssr:true using NextJS

See original GitHub issue

Using next 12.1.6 and react 18.1.0 I get a hydration error when using use-local-storage-state, even though I’m using the ssr:true option.

I’m setting it up like that:

const [introductionFinished, setIntroductionFinished] = useLocalStorageState(
  "introductionFinished",
  {
    ssr: true,
    defaultValue: false,
  }
);

And I’m using it like that to show a div when introductionFinished is true:

{introductionFinished ? (
  <div className="row">
    <div className="col">
      <Link href="/introduction-part-1">
        <a>Show introduction again</a>
      </Link>
    </div>
  </div>
) : (
  ""
)}

Here’s my error log:

next-dev.js?3515:25 Warning: Expected server HTML to contain a matching <div> in <main>.
    at div
    at main
    at div
    at Home (webpack-internal:///./pages/index.js:72:97)
    at MyApp (webpack-internal:///./pages/_app.js:46:27)
    at ErrorBoundary (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/client.js:8:20746)
    at ReactDevOverlay (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/client.js:8:23395)
    at Container (webpack-internal:///./node_modules/next/dist/client/index.js:323:9)
    at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:825:26)
    at Root (webpack-internal:///./node_modules/next/dist/client/index.js:949:27)
window.console.error @ next-dev.js?3515:25
printWarning @ react-dom.development.js?ac89:86
error @ react-dom.development.js?ac89:60
warnForInsertedHydratedElement @ react-dom.development.js?ac89:10496
didNotFindHydratableInstance @ react-dom.development.js?ac89:11425
warnNonhydratedInstance @ react-dom.development.js?ac89:14266
tryToClaimNextHydratableInstance @ react-dom.development.js?ac89:14400
updateHostComponent$1 @ react-dom.development.js?ac89:20711
beginWork @ react-dom.development.js?ac89:22447
beginWork$1 @ react-dom.development.js?ac89:27381
performUnitOfWork @ react-dom.development.js?ac89:26513
workLoopSync @ react-dom.development.js?ac89:26422
renderRootSync @ react-dom.development.js?ac89:26390
performConcurrentWorkOnRoot @ react-dom.development.js?ac89:25694
workLoop @ scheduler.development.js?bcd2:266
flushWork @ scheduler.development.js?bcd2:239
performWorkUntilDeadline @ scheduler.development.js?bcd2:533
react-dom.development.js?ac89:14388 Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.
    at throwOnHydrationMismatch (react-dom.development.js?ac89:14388:1)
    at tryToClaimNextHydratableInstance (react-dom.development.js?ac89:14401:1)
    at updateHostComponent$1 (react-dom.development.js?ac89:20711:1)
    at beginWork (react-dom.development.js?ac89:22447:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js?ac89:4161:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js?ac89:4210:1)
    at invokeGuardedCallback (react-dom.development.js?ac89:4274:1)
    at beginWork$1 (react-dom.development.js?ac89:27405:1)
    at performUnitOfWork (react-dom.development.js?ac89:26513:1)
    at workLoopSync (react-dom.development.js?ac89:26422:1)
    at renderRootSync (react-dom.development.js?ac89:26390:1)
    at performConcurrentWorkOnRoot (react-dom.development.js?ac89:25694:1)
    at workLoop (scheduler.development.js?bcd2:266:1)
    at flushWork (scheduler.development.js?bcd2:239:1)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js?bcd2:533:1)
throwOnHydrationMismatch @ react-dom.development.js?ac89:14388
tryToClaimNextHydratableInstance @ react-dom.development.js?ac89:14401
updateHostComponent$1 @ react-dom.development.js?ac89:20711
beginWork @ react-dom.development.js?ac89:22447
callCallback @ react-dom.development.js?ac89:4161
invokeGuardedCallbackDev @ react-dom.development.js?ac89:4210
invokeGuardedCallback @ react-dom.development.js?ac89:4274
beginWork$1 @ react-dom.development.js?ac89:27405
performUnitOfWork @ react-dom.development.js?ac89:26513
workLoopSync @ react-dom.development.js?ac89:26422
renderRootSync @ react-dom.development.js?ac89:26390
performConcurrentWorkOnRoot @ react-dom.development.js?ac89:25694
workLoop @ scheduler.development.js?bcd2:266
flushWork @ scheduler.development.js?bcd2:239
performWorkUntilDeadline @ scheduler.development.js?bcd2:533
next-dev.js?3515:25 Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.
window.console.error @ next-dev.js?3515:25
printWarning @ react-dom.development.js?ac89:86
error @ react-dom.development.js?ac89:60
errorHydratingContainer @ react-dom.development.js?ac89:11440
recoverFromConcurrentError @ react-dom.development.js?ac89:25802
performConcurrentWorkOnRoot @ react-dom.development.js?ac89:25706
workLoop @ scheduler.development.js?bcd2:266
flushWork @ scheduler.development.js?bcd2:239
performWorkUntilDeadline @ scheduler.development.js?bcd2:533
react-dom.development.js?ac89:14388 Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.
    at throwOnHydrationMismatch (react-dom.development.js?ac89:14388:1)
    at tryToClaimNextHydratableInstance (react-dom.development.js?ac89:14401:1)
    at updateHostComponent$1 (react-dom.development.js?ac89:20711:1)
    at beginWork (react-dom.development.js?ac89:22447:1)
    at beginWork$1 (react-dom.development.js?ac89:27381:1)
    at performUnitOfWork (react-dom.development.js?ac89:26513:1)
    at workLoopSync (react-dom.development.js?ac89:26422:1)
    at renderRootSync (react-dom.development.js?ac89:26390:1)
    at performConcurrentWorkOnRoot (react-dom.development.js?ac89:25694:1)
    at workLoop (scheduler.development.js?bcd2:266:1)
    at flushWork (scheduler.development.js?bcd2:239:1)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js?bcd2:533:1)
throwOnHydrationMismatch @ react-dom.development.js?ac89:14388
tryToClaimNextHydratableInstance @ react-dom.development.js?ac89:14401
updateHostComponent$1 @ react-dom.development.js?ac89:20711
beginWork @ react-dom.development.js?ac89:22447
beginWork$1 @ react-dom.development.js?ac89:27381
performUnitOfWork @ react-dom.development.js?ac89:26513
workLoopSync @ react-dom.development.js?ac89:26422
renderRootSync @ react-dom.development.js?ac89:26390
performConcurrentWorkOnRoot @ react-dom.development.js?ac89:25694
workLoop @ scheduler.development.js?bcd2:266
flushWork @ scheduler.development.js?bcd2:239
performWorkUntilDeadline @ scheduler.development.js?bcd2:533
react-dom.development.js?ac89:20658 Uncaught Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.
    at updateHostRoot (react-dom.development.js?ac89:20658:1)
    at beginWork (react-dom.development.js?ac89:22444:1)
    at beginWork$1 (react-dom.development.js?ac89:27381:1)
    at performUnitOfWork (react-dom.development.js?ac89:26513:1)
    at workLoopSync (react-dom.development.js?ac89:26422:1)
    at renderRootSync (react-dom.development.js?ac89:26390:1)
    at recoverFromConcurrentError (react-dom.development.js?ac89:25806:1)
    at performConcurrentWorkOnRoot (react-dom.development.js?ac89:25706:1)
    at workLoop (scheduler.development.js?bcd2:266:1)
    at flushWork (scheduler.development.js?bcd2:239:1)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js?bcd2:533:1)
updateHostRoot @ react-dom.development.js?ac89:20658
beginWork @ react-dom.development.js?ac89:22444
beginWork$1 @ react-dom.development.js?ac89:27381
performUnitOfWork @ react-dom.development.js?ac89:26513
workLoopSync @ react-dom.development.js?ac89:26422
renderRootSync @ react-dom.development.js?ac89:26390
recoverFromConcurrentError @ react-dom.development.js?ac89:25806
performConcurrentWorkOnRoot @ react-dom.development.js?ac89:25706
workLoop @ scheduler.development.js?bcd2:266
flushWork @ scheduler.development.js?bcd2:239
performWorkUntilDeadline @ scheduler.development.js?bcd2:533

Issue Analytics

  • State:closed
  • Created a year ago
  • Comments:7 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
nepomuccommented, May 28, 2022

@astoilkov Works like a charm. Thanks a lot! 👍

1reaction
Miloshinjocommented, May 14, 2022

I have the same error and it’s cause Im using React 18. I decided to wait for the new version, but in the meantime, I have got around the problem by doing useIsClient hook before my html renders. Since it’s a side project and not in production yet, I’m not in a rush and workaround does me just fine.

import { useEffect, useState } from 'react';

/**
 * Let's us know if we are on the Client or the Server
 */
export default function useIsClient() {
  const [isClient, setClient] = useState(false);

  useEffect(() => {
    setClient(true);
  }, []);

  return isClient;
}
Read more comments on GitHub >

github_iconTop Results From Across the Web

react-hydration-error - Next.js
In general this issue is caused by using a specific library or application code that is relying on something that could differ between...
Read more >
How to solve react hydration error in Nextjs - Stack Overflow
in Nextjs react-hydration-error occurs when the SSR content not match in the browser or the the third party ...
Read more >
How To Solve Hydration Error In Next.js | by Westin Tang
The code in react-dom will use tryHydrate to try the hydrate operation, if it fails, the mode and flags will be checked and...
Read more >
Hydration failed because the initial UI does not match ... - GitHub
I was converting a date in my Next.js render() No complaints on the local dev machine. But got the error on production. Your...
Read more >
Fix Next.js “Text content does not match server-rendered ...
Learn how to fix the React hydration error “Text content does not match server-rendered HTML” so you can personalize & transform HTML in ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found
Previous page

Seems to be trying to fetch from local storage before window is defined in React/Next SSR environment

Next page

Persist in localStorage, but do not upgrade React state