diff --git a/packages/waku/src/lib/plugins/vite-plugin-rsc-hmr.ts b/packages/waku/src/lib/plugins/vite-plugin-rsc-hmr.ts
index c32e33ff3..f2abb5541 100644
--- a/packages/waku/src/lib/plugins/vite-plugin-rsc-hmr.ts
+++ b/packages/waku/src/lib/plugins/vite-plugin-rsc-hmr.ts
@@ -102,7 +102,32 @@ async function generateInitialScripts(
   }
 
   const scripts: HtmlTagDescriptor[] = [];
+  let injectedBlockingViteClient = false;
+
   for (const result of sourceSet) {
+    // CSS modules do not support result.source (empty) since ssr-transforming them gives the css keys
+    // and client-transforming them gives the script tag for injecting them.
+    if (result.id.endsWith('.module.css')) {
+      if (!injectedBlockingViteClient) {
+        // since we use the client-transformed script tag, we need to avoid FOUC by parse-blocking the vite client that the script imports
+        // this way we make sure to run the CSS modules script tag before everything
+        // blocking this way is not ideal but it works. It should be revisited.
+        scripts.push({
+          tag: 'script',
+          attrs: { type: 'module', blocking: 'render', src: '/@vite/client' },
+          injectTo: 'head-prepend',
+        });
+        injectedBlockingViteClient = true;
+      }
+      scripts.push({
+        tag: 'script',
+        // tried render blocking this script tag by data url imports but it gives `/@vite/client: Invalid relative url or base scheme isn't hierarchical.` which could not find a way to fix.
+        attrs: { type: 'module', 'waku-module-id': result.id },
+        children: result.code,
+        injectTo: 'head-prepend',
+      });
+      continue;
+    }
     scripts.push({
       tag: 'style',
       attrs: { type: 'text/css', 'waku-module-id': result.id },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 50b0cdcdc..219c6916c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -578,7 +578,7 @@ importers:
         version: 18.3.0-canary-b30030471-20240117(react-dom@18.3.0-canary-b30030471-20240117)(react@18.3.0-canary-b30030471-20240117)(webpack@5.89.0)
       vite:
         specifier: 5.0.12
-        version: 5.0.12(@types/node@20.11.8)
+        version: 5.0.12
     devDependencies:
       '@netlify/functions':
         specifier: ^2.5.1
@@ -1973,7 +1973,7 @@ packages:
       '@babel/plugin-transform-react-jsx-source': 7.23.3(@babel/core@7.23.7)
       '@types/babel__core': 7.20.5
       react-refresh: 0.14.0
-      vite: 5.0.12(@types/node@20.11.8)
+      vite: 5.0.12
     transitivePeerDependencies:
       - supports-color
     dev: false
@@ -6397,6 +6397,41 @@ packages:
       - typescript
     dev: true
 
+  /vite@5.0.12:
+    resolution: {integrity: sha512-4hsnEkG3q0N4Tzf1+t6NdN9dg/L3BM+q8SWgbSPnJvrgH2kgdyzfVJwbR1ic69/4uMJJ/3dqDZZE5/WwqW8U1w==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+    hasBin: true
+    peerDependencies:
+      '@types/node': ^18.0.0 || >=20.0.0
+      less: '*'
+      lightningcss: ^1.21.0
+      sass: '*'
+      stylus: '*'
+      sugarss: '*'
+      terser: ^5.4.0
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+      less:
+        optional: true
+      lightningcss:
+        optional: true
+      sass:
+        optional: true
+      stylus:
+        optional: true
+      sugarss:
+        optional: true
+      terser:
+        optional: true
+    dependencies:
+      esbuild: 0.19.11
+      postcss: 8.4.33
+      rollup: 4.9.6
+    optionalDependencies:
+      fsevents: 2.3.3
+    dev: false
+
   /vite@5.0.12(@types/node@20.11.8):
     resolution: {integrity: sha512-4hsnEkG3q0N4Tzf1+t6NdN9dg/L3BM+q8SWgbSPnJvrgH2kgdyzfVJwbR1ic69/4uMJJ/3dqDZZE5/WwqW8U1w==}
     engines: {node: ^18.0.0 || >=20.0.0}