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',
	],
},

[nikdhruv05]

I'm using three.js react vite for my 3D portfolio website, and suddendly got this error and I'm unable to fixed it since 5 days. can someone help me with this error ?

[kentcdodds]

Sorry, but there's really nothing I can do in this project to address this. It should fix automatically. It only happens during development. If you want to force deps to get updated remove the node_modules/.vite directory. For any further support, check the vite project. Sorry!

[aleksandromilenkov]

I'm using three.js react vite for my 3D portfolio website, and suddendly got this error and I'm unable to fixed it since 5 days. can someone help me with this error ?

Did you manage to fix this, because I have the same issue right now..... ?