Failed to load resource: the server responded with a status of 504 (Outdated Optimize Dep)

[andrecasal]

The error Failed to load resource: the server responded with a status of 504 (Outdated Optimize Dep) shows on first load. I looked at Vite's repo for potential issues, but didn't find any directly related issues, so I'm checking here first. Where do you think this error might be coming from @kentcdodds?

Steps to reproduce:

1. git clone https://github.com/epicweb-dev/epic-stack
2. code epic-stack
3. npm i
4. npm run setup
5. npm run dev
6. npm run test:e2e

Run all tests in Playwright and notice the Failed to load resource: the server responded with a status of 504 (Outdated Optimize Dep) error on almost every test. You can also quickly navigate pages to the same effect. Notice running the tests twice (or reloading the page) makes the issue go away.

To reproduce from here just delete Vite's cache:

1. Delete node_modules
2. npm i
3. npm run dev
4. npm run test:e2e and run the tests again

System:
OS: macOS 14.5
CPU: (12) arm64 Apple M2 Pro
Memory: 131.36 MB / 16.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 20.11.0 - /usr/local/bin/node
npm: 10.2.4 - /usr/local/bin/npm
pnpm: 8.15.6 - ~/Library/pnpm/pnpm
bun: 1.0.25 - ~/.bun/bin/bun
Browsers:
Brave Browser: 126.1.67.123
Chrome: 126.0.6478.127
Edge: 123.0.2420.65
Safari: 17.5

[kentcdodds]

This is an annoying thing from vite because they compile things on demand to make it faster to start up. I'm not sure whether there's a way around this. I welcome any tips!

[andrecasal]

Adding all dependencies to optimizeDeps.include pre-bundles everything and the tests pass on first run and I don't see any perceivable delay in startup time.

But I'm not sure keeping track and adding dependencies manually to the array is something we want 🤔

[kentcdodds]

We could just have the include match everything 🤷‍♂️

[andrecasal]

Taking a second look at this.

Matching everything with:

optimizeDeps: {
	include: ['.*']
}

works, but might not address the real issue.

Trying to figure this out in bite-sized pieces.

This is what happens when Vite reloads:

Maybe there's a way to have Vite not respond with a 504 Gateway Timeout.

[andrecasal]

Actually './*' did not work.

But this did:

optimizeDeps: {
	include: [
		'@conform-to/react',
		'@conform-to/zod',
		'@epic-web/invariant',
		'@epic-web/client-hints',
		'@epic-web/client-hints/color-scheme',
		'@epic-web/client-hints/time-zone',
		'@epic-web/remember',
		'@epic-web/cachified',
		'@epic-web/totp',
		'@eslint/*',
		'@nasa-gcn/*',
		'@paralleldrive/cuid2',
		'@prisma/client',
		'@radix-ui/react-visually-hidden',
		'@radix-ui/react-slot',
		'@radix-ui/react-dropdown-menu',
		'@radix-ui/react-dialog',
		'@radix-ui/react-tooltip',
		'@radix-ui/react-checkbox',
		'@radix-ui/react-label',
		'@radix-ui/react-accordion',
		'@radix-ui/react-tabs',
		'@react-email/components',
		'@remix-run/node',
		'@sentry/remix',
		'@tanstack/*',
		'address',
		'bcryptjs',
		'better-sqlite3',
		'chalk',
		'class-variance-authority',
		'close-with-grace',
		'clsx',
		'cmdk',
		'compression',
		'cookie',
		'cross-env',
		'crypto-js',
		'date-fns',
		'dotenv',
		'embla-carousel-react',
		'execa',
		'express',
		'express-rate-limit',
		'get-port',
		'glob',
		'helmet',
		'input-otp',
		'intl-parse-accept-language',
		'isbot',
		'litefs-js',
		'litefs-js/remix.js',
		'lru-cache',
		'morgan',
		'next-themes',
		'prisma',
		'qrcode',
		'react',
		'react-day-picker',
		'react-dom',
		'react-hook-form',
		'react-resizable-panels',
		'remix-auth',
		'remix-auth-github',
		'remix-utils/honeypot/server',
		'remix-utils/honeypot/react',
		'remix-utils/safe-redirect',
		'remix-utils/client-only',
		'remix-utils/server-only',
		'set-cookie-parser',
		'sonner',
		'source-map-support',
		'spin-delay',
		'tailwind-merge',
		'tailwindcss',
		'tailwindcss-animate',
		'tailwindcss-radix',
		'vaul',
		'zod',
	],
},