Styled component's classname did not match the server issue

[Pixelatex]

Description

Hi,

We are trying to get an app up and running with the combination of VIKE + TS + styled + apollo.

So far I've combed through a dozen inconsistent examples and got something working:
https://github.com/Pixelatex/vike-styled-ts

However... styled components still gives the classname doesn't match server classname error... but seemingly only in HMR as a prod build doesn't show this. (or warnings or suppressed there, not sure)

Normally this is solved on other solutions such as next by passing along the ssr option to the babel compiler but none of the documentation/examples I've found so far give any indication that is required?

Update

I was wrong, I ran the dev build and as I feared, the warning was simply suppressed. So this issue is not actually related to HMR specifically but to vike/vite or my setup of it.

[brillout]

Is there something on Vike’s side that is blocking?

[Pixelatex]

I don't know why HMR breaks it, I was hoping someone here could help me figure that bit out

[brillout]

I’d assume this isn’t related to Vike, since HMR isn’t implemented by Vike but by Vite.

[brillout]

One thing that may help is to research whether there is a solution for other Vite-based frameworks; the solution will likely also apply to Vike (but let me know if it doesn’t as it would be Vike issue then).

[brillout]

Fand — Today at 9:03 AM
@brillout I managed to fix my issue with styled components. I noticed the existing guide is missing a bit. Can I make a PR somewhere to update the guide?
Magne — Today at 11:26 AM
Are you talking about this guide? https://www.alexrabin.com/blog/vite-ssr-styled-components
If so, I don't know if this person hangs out in here, so perhaps contact them directly.
Otherwise, it could be a good idea to write a proper guide directly in the doc itself https://github.com/vikejs/vike/blob/main/docs/pages/styled-components/%2BPage.mdx

@Pixelatex (i.e. Fand I guess) What was the solution? Yes that'd be great, would a PR for https://vike.dev/styled-components work? Feel free to just make a rough draft PR and we/I can polish it.

[brillout]

I guess the solution was this commit? I went ahead and added your example to https://vike.dev/styled-components, but let me know if you object.