fix: document body undefined (#518)

* init * format * format * Update packages/waku/src/lib/renderers/html-renderer.ts * Update packages/waku/src/lib/renderers/html-renderer.ts * Update packages/waku/src/lib/renderers/html-renderer.ts --------- Co-authored-by: Daishi Kato <[email protected]>
dai-shi · Feb 22, 2024 · 4400750 · 4400750
1 parent f2030c5
commit 4400750
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 5 deletions.
diff --git a/packages/waku/src/lib/handlers/handler-dev.ts b/packages/waku/src/lib/handlers/handler-dev.ts
@@ -182,8 +182,7 @@ export function createHandler<
           config,
           pathname: req.url.pathname,
           searchParams: req.url.searchParams,
-          htmlHead: `${config.htmlHead}
-<script src="${config.basePath}${config.srcDir}/${config.mainJs}" async type="module"></script>`,
+          htmlHead: config.htmlHead,
           renderRscForHtml: async (input, searchParams) => {
             const [readable, nextCtx] = await renderRscWithWorker({
               input,

diff --git a/packages/waku/src/lib/plugins/vite-plugin-rsc-index.ts b/packages/waku/src/lib/plugins/vite-plugin-rsc-index.ts
@@ -15,9 +15,9 @@ export function rscIndexPlugin(config: {
 <html>
   <head>
 ${config.htmlHead}
-<script src="${config.basePath}${config.srcDir}/${config.mainJs}" async type="module"></script>
   </head>
   <body>
+    <script src="${config.basePath}${config.srcDir}/${config.mainJs}" async type="module"></script>
   </body>
 </html>
 `;
@@ -26,9 +26,9 @@ ${config.htmlHead}
     configureServer(server) {
       return () => {
         server.middlewares.use((req, res) => {
-          res.statusCode = 200;
-          res.setHeader('content-type', 'text/html; charset=utf-8');
           server.transformIndexHtml(req.url || '', html).then((content) => {
+            res.statusCode = 200;
+            res.setHeader('content-type', 'text/html; charset=utf-8');
             res.end(content);
           });
         });

diff --git a/packages/waku/src/lib/renderers/html-renderer.ts b/packages/waku/src/lib/renderers/html-renderer.ts
@@ -44,6 +44,7 @@ Promise.resolve(new Response(new ReadableStream({
 
 const injectRscPayload = (
   readable: ReadableStream,
+  mainJsPath: string,
   urlForFakeFetch: string,
 ) => {
   const chunks: Uint8Array[] = [];
@@ -93,6 +94,7 @@ globalThis.__WAKU_PREFETCHED__ = {
     const encoder = new TextEncoder();
     const decoder = new TextDecoder();
     let headSent = false;
+    let mainJsSent = false;
     let data = '';
     let scriptsClosed = false;
     const sendScripts = (
@@ -102,6 +104,16 @@ globalThis.__WAKU_PREFETCHED__ = {
       if (scriptsClosed) {
         return;
       }
+      if (!mainJsSent) {
+        // enqueue `mainJs` first in the body to avoid the document.body undefined error, before we used to inject it in the head which sometimes made it load before the document.body was loaded
+        controller.enqueue(
+          encoder.encode(
+            `<script src="${mainJsPath}" async type="module"></script>`,
+          ),
+        );
+        mainJsSent = true;
+      }
+
       const scripts = chunks.splice(0).map(
         (chunk) =>
           `
@@ -337,6 +349,7 @@ export const renderHtml = async (
   );
   const [copied, interleave] = injectRscPayload(
     stream,
+    `${config.basePath}${config.srcDir}/${config.mainJs}`,
     config.basePath + config.rscPath + '/' + encodeInput(ssrConfig.input),
   );
   const elements: Promise<Record<string, ReactNode>> = createFromReadableStream(