Change hydration check from URL to matches

[brophdawg11]

The original issue this check was fixing was #1757 - see about reproducing that in today's landscape - maybe the original infinite loop is no longer an issue?

Update: I'm having trouble reproducing the original issue so I'm inclined to remove this check from RR v7 entirely. But for now, switching to matches should make it less error-prone.

Closes #9692, #8872, #7529

[changeset-bot]

🦋 Changeset detected

Latest commit: cb8024f

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 16 packages

Name	Type
@remix-run/react	Patch
@remix-run/server-runtime	Patch
@remix-run/testing	Patch
@remix-run/cloudflare	Patch
@remix-run/deno	Patch
@remix-run/dev	Patch
@remix-run/node	Patch
@remix-run/cloudflare-pages	Patch
@remix-run/cloudflare-workers	Patch
@remix-run/architect	Patch
@remix-run/express	Patch
@remix-run/serve	Patch
create-remix	Patch
remix	Patch
@remix-run/css-bundle	Patch
@remix-run/eslint-config	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

🤖 Hello there,

We just published version 2.11.0-pre.0 which includes this pull request. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

[github-actions]

🤖 Hello there,

We just published version 2.11.0 which includes this pull request. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

[calumpeak]

@brophdawg11 I just bumped to the latest version of Remix Run (2.11.0) and my application fails to load with a hydration error as ssrMatches.length is undefined. Just flagging this here as I believe this is the PR that introduces that check - cleared the cache, and everything. It may be that other users have this issue. I'll be rolling back to stable

client.ts:19 [vite] connecting...
chunk-D74W65WU.js?v=d1ff1c99:6884 Uncaught TypeError: Cannot read properties of undefined (reading 'length')
    at RemixBrowser (chunk-D74W65WU.js?v=d1ff1c99:6884:81)
    at renderWithHooks (chunk-7NZKRGB6.js?v=d1ff1c99:12171:26)
    at mountIndeterminateComponent (chunk-7NZKRGB6.js?v=d1ff1c99:14921:21)
    at beginWork (chunk-7NZKRGB6.js?v=d1ff1c99:15902:22)
    at HTMLUnknownElement.callCallback2 (chunk-7NZKRGB6.js?v=d1ff1c99:3674:22)
    at Object.invokeGuardedCallbackDev (chunk-7NZKRGB6.js?v=d1ff1c99:3699:24)
    at invokeGuardedCallback (chunk-7NZKRGB6.js?v=d1ff1c99:3733:39)
    at beginWork$1 (chunk-7NZKRGB6.js?v=d1ff1c99:19761:15)
    at performUnitOfWork (chunk-7NZKRGB6.js?v=d1ff1c99:19194:20)
    at workLoopConcurrent (chunk-7NZKRGB6.js?v=d1ff1c99:19185:13)

[ngbrown]

This window reload seems to be creating an infinite reload loop on Remix 2.11.0 on a server-rendered 404 page. With or without a custom ErrorBoundary. See #9821.

It seems that the issue is because hasDifferentSSRMatches is set to true because (initialMatches || []).length !== ssrMatches.length is true. initialMatches is 0, because matchRoutes doesn't match a 404 to the root route? while ssrMatches is length 1 with the root route.

I patched it like this and this seems to work:

diff --git a/node_modules/@remix-run/react/dist/esm/browser.js b/node_modules/@remix-run/react/dist/esm/browser.js
index ac5bd95..461875b 100644
--- a/node_modules/@remix-run/react/dist/esm/browser.js
+++ b/node_modules/@remix-run/react/dist/esm/browser.js
@@ -163,11 +163,12 @@ function RemixBrowser(_props) {
       // us to a new URL.
       let ssrMatches = window.__remixContext.ssrMatches;
       let hasDifferentSSRMatches = (initialMatches || []).length !== ssrMatches.length || !(initialMatches || []).every((m, i) => ssrMatches[i] === m.route.id);
-      if (hasDifferentSSRMatches && !window.__remixContext.isSpaMode) {
+      if (hasDifferentSSRMatches && !window.__remixContext.isSpaMode && !(window.__remixContext.state.errors?.root?.status === 404)) {
         let ssr = ssrMatches.join(",");
         let client = (initialMatches || []).map(m => m.route.id).join(",");
         let errorMsg = `SSR Matches (${ssr}) do not match client matches (${client}) at ` + `time of hydration , reloading page...`;

The non-esm output at node_modules/@remix-run/react/dist/browser.js also needs the same patch.

Just testing for status === 404 probably isn't a complete answer if on a 404 the server also throws a 500 or something.