Error while hydrating

Get Help and Help Others
1

Hi team :wave:, after updating to v5 (now on 5.2.1), I’ve starting getting errors in my app which look to be related to SSR. I’ve recorded a quick demo, most routes render no problem while navigating the app, but if I refresh a page nothing renders and get the below errors.


Strive Bug - Watch Video

Uncaught TypeError: Cannot read properties of undefined (reading 'call')
    at c (runtime-app.0f51d3c3.js:1:157)
    at Object.prerenderLoader (app.c9f44c15.js:2:123198)
    at t.ActiveRouteLoader (app.c9f44c15.js:2:173873)
    at _a (app.c9f44c15.js:2:635427)
    at _u (app.c9f44c15.js:2:692259)
    at wc (app.c9f44c15.js:2:681411)
    at gc (app.c9f44c15.js:2:681339)
    at yc (app.c9f44c15.js:2:681202)
    at ic (app.c9f44c15.js:2:676338)
    at k (app.c9f44c15.js:172:15448)

and

app.c9f44c15.js:2 Uncaught Error: Minified React error #423; visit https://reactjs.org/docs/error-decoder.html?invariant=423 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

Error from the linked react docs:

There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.

Ref: https://legacy.reactjs.org/docs/error-decoder.html/?invariant=423

2

Hi @hamishirving. I’ll take a look at that.

3

Big thanks to @Tobbe for solving this one.

For anyone with an older project deployed on Netlify (you setup Netlify pre Feb '22), check your netlify.toml

Ref: Always generate 200.html as part of web build | Change by dac09 · Pull Request #4782 · redwoodjs/redwood · GitHub

Redirects section should be as below:

[[redirects]]
  from = "/*"
  to = "/200.html" # not "/index.html"
  status = 200
2 Likes
4

Just had a similar issue as well with render.com. The solution is once again to redirect to 200.html not index.html as indicated. Just want to clarify that this in not only a Netlify solution. Thanks for posting the solution!