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

integration/vite-manifest-invalidation-test.ts

@@ -0,0 +1,94 @@
+import fs from "node:fs/promises";
+import path from "node:path";
+import { test } from "@playwright/test";
+import getPort from "get-port";
+
+import { createProject, 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 id="index">
+          <p data-mounted>Mounted: {mounted ? "yes" : "no"}</p>
+          <p data-hmr>HMR updated: 0</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 id="other">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, debug: true });
+  });
+  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 = editor(cwd);
+
+    // wait hydration to ensure initial manifest is loaded
+    await page.goto(`http://localhost:${port}/`);
+    await page.getByText("Mounted: yes").click();
+
+    // remove loader export in other page should invalidate manifest
+    await edit("app/routes/other.tsx", (contents) =>
+      contents.replace(/export const loader.*/, "")
+    );
+
+    // after browser reload, client should be aware of there's no loader
+    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}/`);
+    await page.getByText("Mounted: yes").click();
+    await page.getByRole("link", { name: "/other" }).click();
+    await page.getByText("loaderData = null").click();
+  });
+});
+
+const editor =
+  (projectDir: string) =>
+  async (file: string, transform: (contents: string) => string) => {
+    let filepath = path.join(projectDir, file);
+    let contents = await fs.readFile(filepath, "utf8");
+    await fs.writeFile(filepath, transform(contents), "utf8");
+  };

packages/remix-dev/vite/plugin.ts

@@ -108,6 +108,17 @@ const resolveRelativeRouteFilePath = (
 
 let vmods = [serverEntryId, 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;
@@ -752,16 +763,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();
@@ -1098,15 +1100,33 @@ export const remixVitePlugin: RemixVitePlugin = (options = {}) => {
         // Update the config cache any time there is a file change
         cachedPluginConfig = pluginConfig;
         let route = getRoute(pluginConfig, file);
+        let hotData = { route: null as any };
+
+        if (route) {
+          // invalidate manifest on route exports change
+          let mod = await server.ssrLoadModule(serverManifestId);
+          let manifest = mod.default as Manifest;
+          let metadata = manifest.routes[route.id];
+          let newMetadata = await getRouteMetadata(
+            pluginConfig,
+            viteChildCompiler,
+            route
+          );
+          hotData.route = newMetadata;
+          if (
+            !metadata ||
+            (["hasLoader", "hasAction", "hasErrorBoundary"] as const).some(
+              (key) => metadata[key] !== newMetadata[key]
+            )
+          ) {
+            invalidateVirtualModules(server);
+          }
+        }
 
         server.ws.send({
           type: "custom",
           event: "remix:hmr",
-          data: {
-            route: route
-              ? await getRouteMetadata(pluginConfig, viteChildCompiler, route)
-              : null,
-          },
+          data: hotData,
         });
 
         return modules;