fix(remix-dev/vite): invalidate route manifest on route export change (#8157)

Co-authored-by: Mark Dalgleish <[email protected]>

Author: hi-ogawa

integration/vite-manifest-invalidation-test.ts

@@ -0,0 +1,102 @@
+import { test, expect } from "@playwright/test";
+import getPort from "get-port";
+
+import {
+  createProject,
+  createEditor,
+  viteDev,
+  VITE_CONFIG,
+} from "./helpers/vite.js";
+
+const files = {
+  "app/routes/_index.tsx": String.raw`
+    import { useState, useEffect } from "react";
+    import { Link } from "@remix-run/react";
+
+    export default function IndexRoute() {
+      const [mounted, setMounted] = useState(false);
+      useEffect(() => {
+        setMounted(true);
+      }, []);
+
+      return (
+        <div>
+          <p data-mounted>Mounted: {mounted ? "yes" : "no"}</p>
+          <Link to="/other">/other</Link>
+        </div>
+      );
+    }
+  `,
+  "app/routes/other.tsx": String.raw`
+    import { useLoaderData } from "@remix-run/react";
+
+    export const loader = () => "hello";
+
+    export default function Route() {
+      const loaderData = useLoaderData();
+      return (
+        <div data-loader-data>loaderData = {JSON.stringify(loaderData)}</div>
+      );
+    }
+  `,
+};
+
+test.describe(async () => {
+  let port: number;
+  let cwd: string;
+  let stop: () => Promise<void>;
+
+  test.beforeAll(async () => {
+    port = await getPort();
+    cwd = await createProject({
+      "vite.config.js": await VITE_CONFIG({ port }),
+      ...files,
+    });
+    stop = await viteDev({ cwd, port });
+  });
+  test.afterAll(async () => await stop());
+
+  test("Vite / dev / invalidate manifest on route exports change", async ({
+    page,
+    context,
+    browserName,
+  }) => {
+    let pageErrors: Error[] = [];
+    page.on("pageerror", (error) => pageErrors.push(error));
+    let edit = createEditor(cwd);
+
+    await page.goto(`http://localhost:${port}`, { waitUntil: "networkidle" });
+    await expect(page.locator("[data-mounted]")).toHaveText("Mounted: yes");
+    expect(pageErrors).toEqual([]);
+
+    let originalContents: string;
+
+    // Removing loader export in other page should invalidate manifest
+    await edit("app/routes/other.tsx", (contents) => {
+      originalContents = contents;
+      return contents.replace(/export const loader.*/, "");
+    });
+
+    // After browser reload, client should be aware that there's no loader on the other route
+    if (browserName === "webkit") {
+      // Force new page instance for webkit.
+      // Otherwise browser doesn't seem to fetch new manifest probably due to caching.
+      page = await context.newPage();
+    }
+    await page.goto(`http://localhost:${port}`, { waitUntil: "networkidle" });
+    await expect(page.locator("[data-mounted]")).toHaveText("Mounted: yes");
+    await page.getByRole("link", { name: "/other" }).click();
+    await expect(page.locator("[data-loader-data]")).toHaveText(
+      "loaderData = null"
+    );
+    expect(pageErrors).toEqual([]);
+
+    // Revert route to original state to check HMR works and to ensure the
+    // original file contents were valid
+    await edit("app/routes/other.tsx", () => originalContents);
+    await expect(page.locator("[data-loader-data]")).toHaveText(
+      'loaderData = "hello"'
+    );
+    expect(pageErrors).toEqual([]);
+  });
+});

packages/remix-dev/vite/plugin.ts

@@ -161,6 +161,17 @@ const resolveRelativeRouteFilePath = (
 
 let vmods = [serverBuildId, serverManifestId, browserManifestId];
 
+const invalidateVirtualModules = (viteDevServer: Vite.ViteDevServer) => {
+  vmods.forEach((vmod) => {
+    let mod = viteDevServer.moduleGraph.getModuleById(
+      VirtualModule.resolve(vmod)
+    );
+    if (mod) {
+      viteDevServer.moduleGraph.invalidateModule(mod);
+    }
+  });
+};
+
 const getHash = (source: BinaryLike, maxLength?: number): string => {
   let hash = createHash("sha256").update(source).digest("hex");
   return typeof maxLength === "number" ? hash.slice(0, maxLength) : hash;
@@ -844,16 +855,7 @@ export const remixVitePlugin: RemixVitePlugin = (options = {}) => {
               ) {
                 previousPluginConfig = pluginConfig;
 
-                // Invalidate all virtual modules
-                vmods.forEach((vmod) => {
-                  let mod = viteDevServer.moduleGraph.getModuleById(
-                    VirtualModule.resolve(vmod)
-                  );
-
-                  if (mod) {
-                    viteDevServer.moduleGraph.invalidateModule(mod);
-                  }
-                });
+                invalidateVirtualModules(viteDevServer);
               }
 
               next();
@@ -1276,14 +1278,44 @@ export const remixVitePlugin: RemixVitePlugin = (options = {}) => {
         cachedPluginConfig = pluginConfig;
         let route = getRoute(pluginConfig, file);
 
+        type ManifestRoute = Manifest["routes"][string];
+        type HmrEventData = { route: ManifestRoute | null };
+        let hmrEventData: HmrEventData = { route: null };
+
+        if (route) {
+          // invalidate manifest on route exports change
+          let serverManifest = (await server.ssrLoadModule(serverManifestId))
+            .default as Manifest;
+
+          let oldRouteMetadata = serverManifest.routes[route.id];
+          let newRouteMetadata = await getRouteMetadata(
+            pluginConfig,
+            viteChildCompiler,
+            route
+          );
+
+          hmrEventData.route = newRouteMetadata;
+
+          if (
+            !oldRouteMetadata ||
+            (
+              [
+                "hasLoader",
+                "hasClientLoader",
+                "hasAction",
+                "hasClientAction",
+                "hasErrorBoundary",
+              ] as const
+            ).some((key) => oldRouteMetadata[key] !== newRouteMetadata[key])
+          ) {
+            invalidateVirtualModules(server);
+          }
+        }
+
         server.ws.send({
           type: "custom",
           event: "remix:hmr",
-          data: {
-            route: route
-              ? await getRouteMetadata(pluginConfig, viteChildCompiler, route)
-              : null,
-          },
+          data: hmrEventData,
         });
 
         return modules;