remix-run · brophdawg11 · Jan 16, 2024 · Jan 12, 2024 · Jan 12, 2024 · Jan 13, 2024
diff --git a/.changeset/wild-timers-impress.md b/.changeset/wild-timers-impress.md
@@ -0,0 +1,5 @@
+---
+"@remix-run/dev": patch
+---
+
+Fix quirks mode warning for SPA template and default server entry
diff --git a/contributors.yml b/contributors.yml
@@ -424,6 +424,7 @@
 - morinokami
 - mrkhosravian
 - mrkstwrt
+- mrm007
 - mskoroglu
 - msutkowski
 - mtt87

diff --git a/integration/helpers/create-fixture.ts b/integration/helpers/create-fixture.ts
@@ -29,6 +29,7 @@ export interface FixtureInit {
   config?: Partial<AppConfig>;
   useRemixServe?: boolean;
   compiler?: "remix" | "vite";
+  spaMode?: boolean;
 }
 
 export type Fixture = Awaited<ReturnType<typeof createFixture>>;
@@ -59,19 +60,26 @@ export async function createFixture(init: FixtureInit, mode?: ServerMode) {
     );
   };
 
-  let isSpaMode =
-    compiler === "vite" &&
-    fse.existsSync(path.join(projectDir, "build/client/index.html"));
+  let isSpaMode = compiler === "vite" && init.spaMode;
 
   if (isSpaMode) {
+    let requestDocument = () => {
+      let html = fse.readFileSync(
+        path.join(projectDir, "build/client/index.html")
+      );
+      return new Response(html, {
+        headers: {
+          "Content-Type": "text/html",
+        },
+      });
+    };
+
     return {
       projectDir,
       build: null,
       isSpaMode,
       compiler,
-      requestDocument: () => {
-        throw new Error("Cannot requestDocument in SPA Mode tests");
-      },
+      requestDocument,
       requestData: () => {
         throw new Error("Cannot requestData in SPA Mode tests");
       },

diff --git a/integration/spa-mode-test.ts b/integration/spa-mode-test.ts
@@ -19,6 +19,7 @@ test.describe("SPA Mode", () => {
   test.beforeAll(async () => {
     fixture = await createFixture({
       compiler: "vite",
+      spaMode: true,
       files: {
         "vite.config.ts": js`
           import { defineConfig } from "vite";
@@ -455,5 +456,91 @@ test.describe("SPA Mode", () => {
         'Error: You cannot call serverAction() in SPA Mode (routeId: "routes/error")'
       );
     });
+
+    test("prepends DOCTYPE to <html> documents if not present", async () => {
+      let fixture = await createFixture({
+        compiler: "vite",
+        spaMode: true,
+        files: {
+          "vite.config.ts": js`
+            import { defineConfig } from "vite";
+            import { unstable_vitePlugin as remix } from "@remix-run/dev";
+
+            export default defineConfig({
+              plugins: [remix({ unstable_ssr: false })],
+            });
+          `,
+          "app/root.tsx": js`
+            import { Outlet, Scripts } from "@remix-run/react";
+
+            export default function Root() {
+              return (
+                <html lang="en">
+                  <head></head>
+                  <body>
+                    <h1 data-root>Root</h1>
+                    <Scripts />
+                  </body>
+                </html>
+              );
+            }
+
+            export function HydrateFallback() {
+              return (
+                <html lang="en">
+                  <head></head>
+                  <body>
+                    <h1 data-loading>Loading SPA...</h1>
+                    <Scripts />
+                  </body>
+                </html>
+              );
+            }
+          `,
+        },
+      });
+      let res = await fixture.requestDocument("/");
+      expect(await res.text()).toMatch(/^<!DOCTYPE html>\n<html lang="en">/);
+    });
+
+    test("does not prepend DOCTYPE if user is not hydrating the document", async () => {
+      let fixture = await createFixture({
+        compiler: "vite",
+        spaMode: true,
+        files: {
+          "vite.config.ts": js`
+            import { defineConfig } from "vite";
+            import { unstable_vitePlugin as remix } from "@remix-run/dev";
+
+            export default defineConfig({
+              plugins: [remix({ unstable_ssr: false })],
+            });
+          `,
+          "app/root.tsx": js`
+            import { Outlet, Scripts } from "@remix-run/react";
+
+            export default function Root() {
+              return (
+                <div>
+                  <h1 data-root>Root</h1>
+                  <Scripts />
+                </div>
+              );
+            }
+
+            export function HydrateFallback() {
+              return (
+                <div>
+                  <h1>Loading SPA...</h1>
+                  <Scripts />
+                </div>
+              );
+            }
+          `,
+        },
+      });
+      let res = await fixture.requestDocument("/");
+      expect(await res.text()).not.toMatch(/<!DOCTYPE html>/);
+    });
   });
 });
diff --git a/packages/remix-dev/config/defaults/entry.server.spa.tsx b/packages/remix-dev/config/defaults/entry.server.spa.tsx
@@ -1,4 +1,4 @@
-import type { AppLoadContext, EntryContext } from "@remix-run/node";
+import type { EntryContext } from "@remix-run/node";
 import { RemixServer } from "@remix-run/react";
 import * as React from "react";
 import { renderToString } from "react-dom/server";
@@ -12,6 +12,9 @@ export default function handleRequest(
   let html = renderToString(
     <RemixServer context={remixContext} url={request.url} />
   );
+  if (html.startsWith("<html")) {
+    html = "<!DOCTYPE html>\n" + html;
+  }
   return new Response(html, {
     headers: { "Content-Type": "text/html" },
     status: responseStatusCode,

diff --git a/templates/spa/app/entry.server.tsx b/templates/spa/app/entry.server.tsx
@@ -8,9 +8,12 @@ export default function handleRequest(
   responseHeaders: Headers,
   remixContext: EntryContext
 ) {
-  const html = renderToString(
+  let html = renderToString(
     <RemixServer context={remixContext} url={request.url} />
   );
+  if (html.startsWith("<html")) {
+    html = "<!DOCTYPE html>\n" + html;
+  }
   return new Response(html, {
     headers: { "Content-Type": "text/html" },
     status: responseStatusCode,