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.

Remix: Hydration errors using 7.8.0

See original GitHub issue

Is there an existing issue for this?

How do you use Sentry?

Sentry Saas (sentry.io)

Which package are you using?

@sentry/remix

SDK Version

7.8.0

Framework Version

Remix 1.6.5

Link to Sentry event

No response

Steps to Reproduce

  1. Create a new remix app using the indie template: npx create-remix (this also happens if you use the “just the basics”, but then add a links functions to your root).
  2. Add the Sentry.init(...) code to entry.server.tsx as described in the documentation.
  3. npm run dev

Expected Result

No hydration errors.

Actual Result

Server-rendered pages cause hydration issues. This did not happen with 7.7.0.

With a “just the basics” template and one stylesheet in the links function I now get this in the browser console:

Warning: Expected server HTML to contain a matching <link> in <head>.
    at link
    at Links (http://localhost:3000/build/_shared/chunk-Z4IMO2RH.js:2938:7)
    at head
    at html
    at App
    at SentryRoot (http://localhost:3000/build/_shared/chunk-Z4IMO2RH.js:8253:20)
    at ErrorBoundary (http://localhost:3000/build/_shared/chunk-Z4IMO2RH.js:8120:5)
    at errorBoundary(SentryRoot)
    at RemixRoute (http://localhost:3000/build/_shared/chunk-Z4IMO2RH.js:2782:3)
    at Routes2 (http://localhost:3000/build/_shared/chunk-Z4IMO2RH.js:2765:7)
    at Router (http://localhost:3000/build/_shared/chunk-Z4IMO2RH.js:962:15)
    at RemixCatchBoundary (http://localhost:3000/build/_shared/chunk-Z4IMO2RH.js:1272:10)
    at RemixErrorBoundary (http://localhost:3000/build/_shared/chunk-Z4IMO2RH.js:1197:5)
    at RemixEntry (http://localhost:3000/build/_shared/chunk-Z4IMO2RH.js:2662:12)
    at RemixBrowser (http://localhost:3000/build/_shared/chunk-Z4IMO2RH.js:3404:27)
(anonymous) @ instrument.ts:123
printWarning @ react-dom.development.js:67
error @ react-dom.development.js:43
warnForInsertedHydratedElement @ react-dom.development.js:9733
didNotFindHydratableInstance @ react-dom.development.js:10512
insertNonHydratedInstance @ react-dom.development.js:14509
tryToClaimNextHydratableInstance @ react-dom.development.js:14596
updateHostComponent @ react-dom.development.js:17610
beginWork @ react-dom.development.js:19080
beginWork$1 @ react-dom.development.js:23940
performUnitOfWork @ react-dom.development.js:22776
workLoopSync @ react-dom.development.js:22707
renderRootSync @ react-dom.development.js:22670
performSyncWorkOnRoot @ react-dom.development.js:22293
scheduleUpdateOnFiber @ react-dom.development.js:21881
updateContainer @ react-dom.development.js:25482
(anonymous) @ react-dom.development.js:26021
unbatchedUpdates @ react-dom.development.js:22431
legacyRenderSubtreeIntoContainer @ react-dom.development.js:26020
hydrate2 @ react-dom.development.js:26086
(anonymous) @ entry.client.tsx:23

Using the indie template, I get a bunch of errors:

Warning: Expected server HTML to contain a matching <link> in <head>.
    at link
    at Links (http://localhost:3000/build/_shared/chunk-XOSPV4IN.js:2743:7)
    at head
    at html
    at App
    at SentryRoot (http://localhost:3000/build/_shared/chunk-6QXZE7SL.js:4990:20)
    at ErrorBoundary (http://localhost:3000/build/_shared/chunk-6QXZE7SL.js:4857:5)
    at errorBoundary(SentryRoot)
    at RemixRoute (http://localhost:3000/build/_shared/chunk-XOSPV4IN.js:2587:3)
    at Routes2 (http://localhost:3000/build/_shared/chunk-XOSPV4IN.js:2570:7)
    at Router (http://localhost:3000/build/_shared/chunk-XOSPV4IN.js:679:15)
    at RemixCatchBoundary (http://localhost:3000/build/_shared/chunk-XOSPV4IN.js:1074:10)
    at RemixErrorBoundary (http://localhost:3000/build/_shared/chunk-XOSPV4IN.js:999:5)
    at RemixEntry (http://localhost:3000/build/_shared/chunk-XOSPV4IN.js:2467:12)
    at RemixBrowser (http://localhost:3000/build/_shared/chunk-XOSPV4IN.js:3225:27)
(anonymous) @ instrument.ts:123
overrideMethod @ react_devtools_backend.js:4026
printWarning @ react-dom.development.js:86
error @ react-dom.development.js:60
warnForInsertedHydratedElement @ react-dom.development.js:10499
didNotFindHydratableInstance @ react-dom.development.js:11458
warnNonhydratedInstance @ react-dom.development.js:12385
tryToClaimNextHydratableInstance @ react-dom.development.js:12534
updateHostComponent @ react-dom.development.js:19902
beginWork @ react-dom.development.js:21618
beginWork$1 @ react-dom.development.js:27426
performUnitOfWork @ react-dom.development.js:26557
workLoopConcurrent @ react-dom.development.js:26543
renderRootConcurrent @ react-dom.development.js:26505
performConcurrentWorkOnRoot @ react-dom.development.js:25738
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533

Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.
    at throwOnHydrationMismatch (react-dom.development.js:12507:9)
    at tryToClaimNextHydratableInstance (react-dom.development.js:12535:7)
    at updateHostComponent (react-dom.development.js:19902:5)
    at beginWork (react-dom.development.js:21618:14)
    at HTMLUnknownElement.callCallback2 (react-dom.development.js:4164:14)
    at HTMLUnknownElement.sentryWrapped (index.js:95:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:16)
    at invokeGuardedCallback (react-dom.development.js:4277:31)
    at beginWork$1 (react-dom.development.js:27451:7)
    at performUnitOfWork (react-dom.development.js:26557:12)
    at workLoopConcurrent (react-dom.development.js:26543:5)
    at renderRootConcurrent (react-dom.development.js:26505:7)
    at performConcurrentWorkOnRoot (react-dom.development.js:25738:38)
    at workLoop (scheduler.development.js:266:34)
    at flushWork (scheduler.development.js:239:14)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js:533:21)
throwOnHydrationMismatch @ react-dom.development.js:12507
tryToClaimNextHydratableInstance @ react-dom.development.js:12535
updateHostComponent @ react-dom.development.js:19902
beginWork @ react-dom.development.js:21618
callCallback2 @ react-dom.development.js:4164
sentryWrapped @ index.js:95
invokeGuardedCallbackDev @ react-dom.development.js:4213
invokeGuardedCallback @ react-dom.development.js:4277
beginWork$1 @ react-dom.development.js:27451
performUnitOfWork @ react-dom.development.js:26557
workLoopConcurrent @ react-dom.development.js:26543
renderRootConcurrent @ react-dom.development.js:26505
performConcurrentWorkOnRoot @ react-dom.development.js:25738
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533

Warning: An error occurred during hydration. The server HTML was replaced with client content in <#document>.

Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.
    at throwOnHydrationMismatch (react-dom.development.js:12507:9)
    at tryToClaimNextHydratableInstance (react-dom.development.js:12535:7)
    at updateHostComponent (react-dom.development.js:19902:5)
    at beginWork (react-dom.development.js:21618:14)
    at beginWork$1 (react-dom.development.js:27426:14)
    at performUnitOfWork (react-dom.development.js:26557:12)
    at workLoopConcurrent (react-dom.development.js:26543:5)
    at renderRootConcurrent (react-dom.development.js:26505:7)
    at performConcurrentWorkOnRoot (react-dom.development.js:25738:38)
    at workLoop (scheduler.development.js:266:34)
    at flushWork (scheduler.development.js:239:14)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js:533:21)
throwOnHydrationMismatch @ react-dom.development.js:12507
tryToClaimNextHydratableInstance @ react-dom.development.js:12535
updateHostComponent @ react-dom.development.js:19902
beginWork @ react-dom.development.js:21618
beginWork$1 @ react-dom.development.js:27426
performUnitOfWork @ react-dom.development.js:26557
workLoopConcurrent @ react-dom.development.js:26543
renderRootConcurrent @ react-dom.development.js:26505
performConcurrentWorkOnRoot @ react-dom.development.js:25738
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533

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:19849:57)
    at beginWork (react-dom.development.js:21615:14)
    at beginWork$1 (react-dom.development.js:27426:14)
    at performUnitOfWork (react-dom.development.js:26557:12)
    at workLoopSync (react-dom.development.js:26466:5)
    at renderRootSync (react-dom.development.js:26434:7)
    at recoverFromConcurrentError (react-dom.development.js:25850:20)
    at performConcurrentWorkOnRoot (react-dom.development.js:25750:22)
    at workLoop (scheduler.development.js:266:34)
    at flushWork (scheduler.development.js:239:14)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js:533:21)

Issue Analytics

  • State:closed
  • Created a year ago
  • Reactions:1
  • Comments:5 (4 by maintainers)

github_iconTop GitHub Comments

2reactions
AbhiPrasadcommented, Jul 28, 2022

Well we should probably do a couple things here to start off.

  1. Enforce that the meta monkey patch logic is runs on the server
  2. Make sure that we are not attaching meta headers if tracing is not enabled
0reactions
AbhiPrasadcommented, Jul 28, 2022

Thank you for the repro app! Looking at https://github.com/getsentry/sentry-javascript/compare/7.7.0...7.8.0, This might be related to https://github.com/getsentry/sentry-javascript/pull/5440 @onurtemizkan

Not sure why setting the meta tag is disrupting the hydration like that though 🤔

Read more comments on GitHub >

github_iconTop Results From Across the Web

remix hydration failed because the initial ui does not match what ...
I have this error and I can't solve it.. Can anyone help me? image. Open side panel. getsentry/sentry-javascriptRemix: Hydration errors using 7.8.0#5490.
Read more >
hydration error when there is a chrome extension that modifies ...
I installed an extension that modifies DOM such as Grammar Checker into my browser and tried to develop a web app with Remix....
Read more >
Remix is returning Hydration Error when attempting to map data
When running my Remix project locally, I receive a React hydration error. I notice the HTML from the server doesn't match with the...
Read more >
Create Infinite Scroll Images in Remix - Media Jams
This tutorial will walk us through implementing infinite scroll in an image gallery using the react-infinite-scroll-component with Remix.
Read more >
Hair Removal Cream for Face Women Sprayers Hydrating ...
Hair Removal Cream for Face Women Sprayers Hydrating Water Spray Facial humidifier Steamer Mist Portable Face Nano Beauty Instrument (Green, One Size).
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

[@sentry/svelte] Svelte SDK Roadmap

Next page

TypeError: partialRoute.split is not a function