Styled Components + Remix SPA Mode

[seanmcquaid]

Based on the examples in the examples repo, Remix + Styled Components with SSR is a relatively solved solution. However, SPA mode makes things interesting. We do not have a server to inject the styles in at runtime so if there is a full document refresh (like in the case of an error that causes rehydration to kick off and render the ErrorBoundary) then all styles with styled components are lost.

Has anyone come up with a solution for this quite yet?

[revskill10]

You should prerender the index.html .

[yegorkay]

I am facing a similar issue, though mainly with Material UI which is using emotion under the hood (I am also using Vite if that matters)

If by "pre-rendering" we mean initializing the server HTML document with the relevant styles, to my findings, this doesn't seem to work, or rather doesn't affect anything in SPA mode once the app is built.

---

https://stackblitz.com/edit/remix-run-remix-zzd6ri?file=vite.config.ts

Start the app with:

npm run dev

• Open the preview in a new tab by clicking the top right icon in StackBlitz
• Click Go To Invalid
• Open up dev tools
• cmd + shift + p, then type java, then click disable JavaScript
• Reload the page
• See the styles and elements persist on the page

Now let's try building:

npm run build && npm run preview

• Check the /build/client directory to see nothing regarding styles being "pre-rendered" in the index.html
• Open the preview in a new tab by clicking the top right icon in StackBlitz
• Click Go To Invalid
• Open up dev tools
• cmd + shift + p, then type java, then click disable JavaScript
• Reload the page
• Nothing is there

To my understanding, Remix still requires a server to build as seen in the SPA Mode docs, but how is someone using SPA Mode supposed to persist styles in the ErrorBoundary if the document isn't pre-rendering and how is this supposed to work if an entirely new document is supposedly sent in the ErrorBoundary? I tried following this discussion but it doesn't seem to work based on the reproduction provided above:

#6543

Is there a fundamental issue in the reproduction I've provided that I am missing? Is this just the way things are if someone is still using CSS in JS? I'm not really sure where to go from here next. I was keen on getting SPA Mode to work with my Vite app at work, though this is something that might make users second guess Remix for SPAs assuming this is a Remix issue and not a skill issue from me.

I don't mean to hijack the thread, but hoping more comments on one thread gets more traction than me making another thread that dies.

[yegorkay]

Of course disabling JavaScript in what is supposed to be a SPA app will render nothing, but to my understanding is that the ErrorBoundary is an entirely new document that should have something in it. It's a bit unclear that there are two different behaviours in development and production here with regards to ErrorBoundary.

edit:

Wrapping the HydrateFallback in the <Document /> component be a solution to this?

[yegorkay]

After digging into it, you can use the Layout export which will house your <Document /> component with the injected/pre-loaded styles

https://remix.run/docs/en/main/file-conventions/root#layout-export

https://stackblitz.com/edit/remix-run-remix-7fz5ob?file=src%2Froot.tsx