You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
We set up a new Remix SPA project using this command pnpm create remix@latest --template remix-run/remix/templates/spa our_project_name
Everything works fine locally, until it is deployed (to AWS S3).
From there it intermittently errors out with Minified React error #418 (Hydration failed because the server rendered HTML didn't match the client).
How are we even getting this error when there is no server?
Is there any way to ignore this error and continue rendering? Because the website looks broken when this error occurs (most Material UI styles seem not loaded).
I also noticed our root.tsx and entry.client.tsx (that must have been generated from the remix-run/remix/templates/spa) are quite different than what is mentioned in the official guide for SPA mode.
We don't have app/index.html (but build/client/index.html is generated on build)
Our root.tsx is different (We have export const Layout = ({children}) => ... that contains the <html>, instead of it being in an index.html file)
We don't have app/entry.server.tsx (Do we really need one when there is no server?)
Our app/entry.client.tsx is different (We have hydrateRoot(document,... instead of hydrateRoot(document.querySelector("#app"),...)
I didn't expect to have to deal with this hydration error when everything is running on client side.
Any help will be appreciated!
UPDATE
This issue seems to be related to MUI: #8913, #8960 (this solved it!)
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
We set up a new Remix SPA project using this command
pnpm create remix@latest --template remix-run/remix/templates/spa our_project_nameEverything works fine locally, until it is deployed (to AWS S3).
From there it intermittently errors out with Minified React error #418 (Hydration failed because the server rendered HTML didn't match the client).
How are we even getting this error when there is no server?
Is there any way to ignore this error and continue rendering? Because the website looks broken when this error occurs (most Material UI styles seem not loaded).
I also noticed our
root.tsxandentry.client.tsx(that must have been generated from theremix-run/remix/templates/spa) are quite different than what is mentioned in the official guide for SPA mode.app/index.html(butbuild/client/index.htmlis generated on build)root.tsxis different (We haveexport const Layout = ({children}) => ...that contains the<html>, instead of it being in an index.html file)app/entry.server.tsx(Do we really need one when there is no server?)app/entry.client.tsxis different (We havehydrateRoot(document,...instead ofhydrateRoot(document.querySelector("#app"),...)I didn't expect to have to deal with this hydration error when everything is running on client side.
Any help will be appreciated!
UPDATE
This issue seems to be related to MUI: #8913, #8960 (this solved it!)
Beta Was this translation helpful? Give feedback.
All reactions