fix(remix-dev/vite): set same config.mode for child compiler (#7911)

Co-authored-by: Mark Dalgleish <mark.john.dalgleish@gmail.com>

.changeset/eight-jeans-float.md

@@ -0,0 +1,5 @@
+---
+"@remix-run/dev": patch
+---
+
+Fix Vite production builds when plugins that have different local state between `development` and `production` modes are present, e.g. `@mdx-js/rollup`.

integration/vite-build-test.ts

@@ -26,9 +26,13 @@ test.describe("Vite build", () => {
         "vite.config.ts": js`
           import { defineConfig } from "vite";
           import { unstable_vitePlugin as remix } from "@remix-run/dev";
+          import mdx from "@mdx-js/rollup";
 
           export default defineConfig({
-            plugins: [remix()],
+            plugins: [
+              remix(),
+              mdx(),
+            ],
           });
         `,
         "app/root.tsx": js`
@@ -81,6 +85,10 @@ test.describe("Vite build", () => {
             );
           }
         `,
+        "app/utils.server.ts": js`
+          export const serverOnly1 = "SERVER_ONLY_1"
+          export const serverOnly2 = "SERVER_ONLY_2"
+        `,
         "app/routes/resource.ts": js`
           import { json } from "@remix-run/node";
 
@@ -95,9 +103,40 @@ test.describe("Vite build", () => {
             return null
           }
         `,
-        "app/utils.server.ts": js`
-          export const serverOnly1 = "SERVER_ONLY_1"
-          export const serverOnly2 = "SERVER_ONLY_2"
+        "app/routes/mdx.mdx": js`
+          import { useEffect, useState } from "react";
+          import { json } from "@remix-run/node";
+          import { useLoaderData } from "@remix-run/react";
+          
+          import { serverOnly1, serverOnly2 } from "../utils.server";
+
+          export const loader = () => {
+            return json({
+              serverOnly1,
+              content: "MDX route content from loader",
+            })
+          }
+
+          export const action = () => {
+            console.log(serverOnly2)
+            return null
+          }
+
+          export function MdxComponent() {
+            const [mounted, setMounted] = useState(false);
+            useEffect(() => {
+              setMounted(true);
+            }, []);
+            const { content } = useLoaderData();
+            const text = content + (mounted
+              ? ": mounted"
+              : ": not mounted");
+            return <div data-mdx-route>{text}</div>
+          }
+
+          ## MDX Route
+
+          <MdxComponent />
         `,
       },
     });
@@ -146,4 +185,25 @@ test.describe("Vite build", () => {
       "Mounted"
     );
   });
+
+  test("server renders matching MDX routes", async ({ page }) => {
+    let res = await fixture.requestDocument("/mdx");
+    expect(res.status).toBe(200);
+    expect(selectHtml(await res.text(), "[data-mdx-route]")).toBe(
+      `<div data-mdx-route="true">MDX route content from loader: not mounted</div>`
+    );
+  });
+
+  test("hydrates matching MDX routes", async ({ page }) => {
+    let pageErrors: unknown[] = [];
+    page.on("pageerror", (error) => pageErrors.push(error));
+
+    let app = new PlaywrightFixture(appFixture, page);
+    await app.goto("/mdx");
+    await expect(page.locator("[data-mdx-route]")).toContainText(
+      "MDX route content from loader: mounted"
+    );
+
+    expect(pageErrors).toEqual([]);
+  });
 });

integration/vite-dev-test.ts

@@ -27,13 +27,17 @@ test.describe("Vite dev", () => {
         "vite.config.ts": js`
           import { defineConfig } from "vite";
           import { unstable_vitePlugin as remix } from "@remix-run/dev";
+          import mdx from "@mdx-js/rollup";
 
           export default defineConfig({
             server: {
               port: ${devPort},
               strictPort: true,
             },
-            plugins: [remix()],
+            plugins: [
+              remix(),
+              mdx(),
+            ],
           });
         `,
         "app/root.tsx": js`
@@ -142,6 +146,25 @@ test.describe("Vite dev", () => {
             );
           }
         `,
+        "app/routes/mdx.mdx": js`
+          import { json } from "@remix-run/node";
+          import { useLoaderData } from "@remix-run/react";
+
+          export const loader = () => {
+            return json({
+              content: "MDX route content from loader",
+            })
+          }
+
+          export function MdxComponent() {
+            const { content } = useLoaderData();
+            return <div data-mdx-route>{content}</div>
+          }
+
+          ## MDX Route
+
+          <MdxComponent />
+        `,
       },
     });
 
@@ -261,6 +284,21 @@ test.describe("Vite dev", () => {
 
     expect(pageErrors).toEqual([]);
   });
+
+  test("handles MDX routes", async ({ page }) => {
+    let pageErrors: unknown[] = [];
+    page.on("pageerror", (error) => pageErrors.push(error));
+
+    await page.goto(`http://localhost:${devPort}/mdx`, {
+      waitUntil: "networkidle",
+    });
+    expect(pageErrors).toEqual([]);
+
+    let mdxContent = page.locator("[data-mdx-route]");
+    await expect(mdxContent).toHaveText("MDX route content from loader");
+
+    expect(pageErrors).toEqual([]);
+  });
 });
 
 let bufferize = (stream: Readable): (() => string) => {

package.json

@@ -61,6 +61,7 @@
     "@babel/preset-typescript": "^7.21.5",
     "@changesets/cli": "^2.25.2",
     "@mcansh/remark-definition-links": "2.4.1",
+    "@mdx-js/rollup": "^3.0.0",
     "@octokit/core": "^3.6.0",
     "@octokit/graphql": "^4.8.0",
     "@octokit/plugin-paginate-rest": "^2.17.0",

packages/remix-dev/vite/plugin.ts

@@ -503,6 +503,7 @@ export const remixVitePlugin: RemixVitePlugin = (options = {}) => {
 
         viteChildCompiler = await createViteDevServer({
           ...viteUserConfig,
+          mode: viteConfig.mode,
           server: {
             ...viteUserConfig.server,
             // when parent compiler runs in middleware mode to support