Level 29
Shouldn't your server side rendering and client side rendering use the same build? Can you share your vite config.
Feb 28, 2024
4
Level 9
Use of SASS/CSS Modules in Vite/Vue creates hydration class mismatch in Inertia SSR
I am using SASS/CSS in my Vite/Vue project, and just style modules working in my project, but now I'm noticing that it's creating a hydration class mismatch error when running SSR. The only apparent difference appears to be the hashes generated by CSS modules that are assigned within the classes...
Any thoughts on a solution to ensure the hashes are the same for ssr and non-ssr builds?
My Dev Stack: Laravel 10 / InertiaJS 1 / VueJS 3 / ViteJS 4 / TailwindCSS 3 / Vitest 0.31 / VitePress 1 / Typescript / (Inertia) SSR / FontAwesome Pro 6 / Ploi.io / Qodana / Cypress / ImgIX / HubSpot / SendGrid / SignEasy / Stripe
Level 9
Thanks for the response @gych! Below is a link to my current vite.config.ts on Gist:
https://gist.github.com/cjholowatyj/52bc42d30e7b94f555a9afe1bd081f75
GIthub Copilot Chat made a suggested fix here, but it doesn't solve the problem because the overload doesn't exist :/
Level 29
Can you also share app.js and ssr.js ?
Level 9
@gych Same Gist link updated to include my app.ts, ssr.ts, and my main.ts, which is used by both builds.
Please or to participate in this conversation.