Optimize dependencies found through route module graphs (#9921)

.changeset/hot-dogs-applaud.md

@@ -0,0 +1,10 @@
+---
+"@remix-run/dev": patch
+---
+
+Automatically optimize dependencies during development
+
+Now Remix will tell Vite to find dependencies by crawling imports starting with your route modules.
+This should resolve most (if not all) `504 Outdated Dependency` errors that could previously break HMR.
+
+For users who were previously working around this limiation, you no longer need to explicitly add routes to Vite's `optimizeDeps.entries` nor do you need to disable the `remix-dot-server` plugin.

package.json

@@ -132,7 +132,7 @@
     "vite": "5.1.3",
     "vite-tsconfig-paths": "^4.2.2",
     "wait-on": "^7.0.1",
-    "wrangler": "^3.24.0"
+    "wrangler": "^3.72.3"
   },
   "engines": {
     "node": ">=18.0.0"

packages/remix-dev/vite/plugin.ts

@@ -1075,6 +1075,9 @@ export const remixVitePlugin: RemixVitePlugin = (remixUserConfig = {}) => {
               : undefined,
           },
           optimizeDeps: {
+            entries: Object.values(ctx.remixConfig.routes).map((route) =>
+              path.join(ctx.remixConfig.appDirectory, route.file)
+            ),
             include: [
               // Pre-bundle React dependencies to avoid React duplicates,
               // even if React dependencies are not direct dependencies.
@@ -1497,7 +1500,12 @@ export const remixVitePlugin: RemixVitePlugin = (remixUserConfig = {}) => {
       name: "remix-dot-server",
       enforce: "pre",
       async resolveId(id, importer, options) {
-        if (options?.ssr) return;
+        // https://vitejs.dev/config/dep-optimization-options
+        let isOptimizeDeps =
+          viteCommand === "serve" &&
+          (options as { scan?: boolean })?.scan === true;
+
+        if (options?.ssr || isOptimizeDeps) return;
 
         let isResolving = options?.custom?.["remix-dot-server"] ?? false;
         if (isResolving) return;