#Two mysterious errors: related or separate?

1 messages · Page 1 of 1 (latest)

night agate
#

I'm getting the following error:
Uncaught Error: The server did not finish this Suspense boundary: The server used "renderToString" which does not support Suspense. If you intended for this Suspense boundary to render the fallback content on the server consider throwing an Error somewhere within the Suspense boundary. If you intended to have the server wait for the suspended component please switch to "renderToPipeableStream" which supports Suspense on the server
... which kind of makes sense, except that I've wrapped the <Suspense> component in a remix-utils <ClientOnly> component.

I'm not sure whether this is the same fundamental issue that is causing Uncaught Error: with no explanation when I navigate to another page while this <Suspense> component is in my layout, or if I'll have to solve that error separately after fixing the one pasted above (which doesn't actually prevent the page rendering correctly on its own).

#

OK, extra-weird: the Suspense hydration error is happening when I'm not even trying to render a Suspense component in the current Route.

fervent crystal
night agate
#
  1. No, thank you for pointing me to that.
  2. I added ClientOnly after I started getting the error, trying to prevent it.
#

After trying to adapt those changes for React18 Streaming, I'm getting a whole bunch of Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server. errors.

#

(I removed the ClientOnly.)

#

(I'm also getting Warning: Expected server HTML to contain a matching <meta> in <head>.)

fervent crystal
#

Yes, that's what most people get when they initially implement streaming. Any client-server discrepancies/differences will interfere with hydration as well as any extensions you may have in your browser which manipulate the DOM.

#

And things like MUI/emotion, styled components, etc.

night agate
fervent crystal
#

Make sure you follow documentation for any such libraries you might be using to make them compatible with Streaming. Also make sure, page by page, in your app that client and server render the exact same thing.

#

If that doesn't work for you, you can revert to not using streaming which is perfectly fine for most apps and wait for React 18.3 which will supposedly fix most of the thorny issues

night agate
#

yeah I may have to do that, the streaming is just there to hopefully slightly speed up loading images from an s3 bucket

fervent crystal
#

No, that's SSR without Streaming. It uses renderToString

#

Streaming uses renderToPipeableStream

night agate
#

scroll down almost to Referring to Other Components, there's a section specifically about Streaming

fervent crystal
#

That's not React18 Streaming, but streams in NodeJS

#

That documentation is from a while ago.

night agate
#

ok

#

maybe I'll just wait for React 18.3 😕

fervent crystal
night agate
#

ok, now I've removed <Suspense> from the repo entirely and I'm still getting the "server did not finish this Suspense boundary" error in my console ... bizarre

fervent crystal
#

Even when you restart the server? Are you sure it's removed? Are you sure you're not serving from a build?

night agate
fervent crystal
night agate
#

npm run dev

#

and yes, I reverted the entry.server file

#

hmm, I deleted a dangling defer() loader and the error seems to be gone