Vite dependency optimization is causing errors in development

[tavoyne]

Reproduction

See #8876 and #8917.

// vite.config.ts

import {
  vitePlugin as remix,
  cloudflareDevProxyVitePlugin as remixCloudflareDevProxy,
} from "@remix-run/dev";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";

import { getLoadContext } from "./loadContext";

export default defineConfig({
  plugins: [
    remixCloudflareDevProxy({ getLoadContext }),
    remix(),
    tsconfigPaths(),
  ],
});

System Info

System:
  OS: macOS 14.1
  CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
  Memory: 1.79 GB / 32.00 GB
  Shell: 5.9 - /bin/zsh
Binaries:
  Node: 20.9.0 - ~/.nvm/versions/node/v20.9.0/bin/node
  npm: 10.1.0 - ~/.nvm/versions/node/v20.9.0/bin/npm
Browsers:
  Chrome: 126.0.6478.183
  Chrome Canary: 129.0.6622.0
  Safari: 17.1
npmPackages:
  @remix-run/cloudflare: ^2.10.3 => 2.10.3 
  @remix-run/cloudflare-pages: ^2.10.3 => 2.10.3 
  @remix-run/dev: ^2.10.3 => 2.10.3 
  @remix-run/eslint-config: ^2.10.3 => 2.10.3 
  @remix-run/react: ^2.10.3 => 2.10.3 
  vite: ^5.3.5 => 5.3.5

Used Package Manager

npm

Expected Behavior

Pages load smoothly.

Actual Behavior

Errors like the following on page loads:

[andrecasal]

Yep, all pages visited for the first time fail to load because Vite optimizes the dependencies, but sends a 504 Outdated Dependency to the browser.

Only happens in during dev and doesn't affect production, but having all tests (or page loads) fail on first try is a bad experience.