Skip to content

Remix: Hydration errors using 7.8.0 #5490

@dmarkow

Description

@dmarkow

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)

Metadata

Metadata

Assignees

Labels

Package: remixIssues related to the Sentry Remix SDK

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions