net::ERR_ABORTED 504 for some dependencies

[adambiggs]

I'm trying to migrate an app from vue-cli to vite, but some dependencies aren't loading in the browser with a net::ERR_ABORTED 504 error. Vite dev server isn't displaying any errors in the console, so I'm having trouble figuring out what the issue is.

If I try to load the URL directly, I can reproduce the 504 error. E.g.:
https://myapp.localhost:8081/@fs/path/to/my/app/node_modules/.vite/deps/pusher-js.js?v=601736dc

But if I remove the v querystring, the file is returned without any errors:
https://myapp.localhost:8081/@fs/path/to/my/app/node_modules/.vite/deps/pusher-js.js

[RazvanCristian]

I have a similar issue for this package: @mdi/font.
Did you manage to solve the issue?

[adambiggs]

No sorry, I ran out of time and had to shelf it. Please let me know if you find a workaround!

[xinaesthete]

I had a similar issue with sortablejs but in this case I still get the error when I remove the querystring.

Updating to a newer version of Vite fixed it in my case.

[ewanmellor]

For me, it looks like this was coming from the optimized-deps vite plugin.

Adding DEBUG=vite:* to my vite command line was helpful in debugging it. (It would have been much more useful if optimized-deps logged something on the error paths though.)

Removing the cache at node_modules/.vite/ fixed it.

[sarthakkhanduja]

I'm sorry, how do I add it to my command line?
Shall I make edits within my vite.config.js? Or do I edit my npm run dev command?

[paeonn]

thanks, removing the cache solve !

[mayongjian-175]

nice

[gnayiqnat]

Thank you so much

I managed to fix it by running npm run dev --force instead of npm run dev.

[DavidLGoldberg]

@sarthakkhanduja yeah, try DEBUG=vite:* npm run dev (note the different output)

[hasib-devs]

I'm using Nuxt 3 and I'm trying to use ion-sdk-js I'm also getting the same error.

GET http://localhost:4010/_nuxt/node_modules/.vite/deps/ion-sdk-js_lib_connector.js?v=6953ed0a net::ERR_ABORTED 504 (Gateway Timeout)

[tkayo]

also running into this issue and on v3.2.3

[babakfp]

Hey
I'm using SvelteKit with this package: unique-string
It throws me this warnings and errors:

Module "util" has been externalized for browser compatibility. Cannot access "util.promisify" in client code.


Module "crypto" has been externalized for browser compatibility. Cannot access "crypto.randomBytes" in client code.


client-manifest.js:14 TypeError: (0 , import_util.promisify) is not a function
    at index.js:4:26

after adding this to vite.config.js:

resolve: { alias: { util: "util/" } },

it throws this:

GET http://localhost:5173/node_modules/.vite/deps/svelte_store.js?v=3f54b6bd net::ERR_ABORTED 504 (Gateway Timeout)
client.js:1

GET http://localhost:5173/node_modules/.vite/deps/svelte.js?v=3f54b6bd net::ERR_ABORTED 504 (Gateway Timeout)
root.svelte:31

GET http://localhost:5173/node_modules/.vite/deps/svelte_internal.js?v=3f54b6bd net::ERR_ABORTED 504 (Gateway Timeout)

• https://stackoverflow.com/questions/73335430/module-util-has-been-externalized-for-browser-compatibility-cannot-access-ut

[agracia-foticos]

Same issue nuxt/nuxt#19729

[charbelmansour005]

It worked for me. I literally just deleted node_modules, then I ran npm install

[kochapas]

This works for me. Though I did these three step at once so I'm not sure which one fixed the problem. Feels free to try it out.

• Delete the node_modules folder, then npm install or yarn install again.
• I notice there was a yarn-error.log in the root folder from other packages that I was trying to use before (but removed after), so I delete this file as well.
• My vite (npm run dev) was completely frozen in the terminal (also from the previous package error). I have to terminate it and run it again. Maybe this is why none of my attempts earlier worked.

After that, it starts to work again.

[REX500]

Since it's due to the cache, it makes sense that wiping node_modules fixes it... Shouldn't be an issue in the first hand imo

[ismail16]

Yes its working for me

[agracia-foticos]

still no solution.

https://stackblitz.com/edit/nuxt-starter-pkprdt

This code running in Vite in our development environment fails, but if i put it in production compiling (without Vite) runs OK

[Yasir-Khan22]

Facing Same Issue.
Deleted the node_modules, still facing it.?

[agracia-foticos]

I deleting node_modules and .lock, reinstall all, but error persists

[Stf-F]

Same issue here with primevue/fileupload and Nuxt 3

[Ancient-Dragon]

Same here and none of the solutions mentioned worked, going from vite 4.1.4 -> 4.2.x seems to be the cause of the problem

[ESP-Marc]

Experienced this issue with v4.2.1 after updating from v4.1.1 using yarn with node-modules for node linker.

I deleted .yarn, node_modules, dev-dist, yarn.lock folders and files and re-installed, now works fine...

[skyturkish]

Same issue after google cloud deploy a vue project with vuetify, none of above works for me, no solution

[ESP-Marc]

You may need to discover and clear any global caches for yarn/npm including any build pipeline artifact caches that might be re-used, a lot of pipelines config templates create an artifact for the node_modules directory to cache it.

[skyturkish]

I didn't find exactly what you said, what should I do ?

[Kamariw95]

Same issue, same context. Anyone have any thoughts?

[NeizKap]

@skyturkish Hey, have you fixed this? If yes, how?

[skyturkish]

My problem seemed to be the excessive number of requests. I was using Google Cloud Run for deployment, and it improved when I allocated more CPU, but it probably would have been fixed if I had switched the project to server-side rendering as well.

[robertmielewczyk]

I'm running my vue/vite project inside docker so all I had to do in order to resolve this was:

0. Attach shell to your docker instance
1. remove vite cache at /app/node_modules/.vite rm -rf /node_modules/.vite
2. restart container | or start stop your project

of course step 2 works because my container runs a certain commands that will refresh removed cache
for me it is simply running:
npm run dev which in package.json is defined as run: vite

(same steps should apply if you're not using docker, except step zero)

[CollinHerber]

Just figured I'd throw this out there.. But I was running into this as well and even after deleting the node modules, many times I might add it was still a problem.
The solve for me, and while it's slightly concerning, was upgrading to Vite 4.3.0-beta6. I was able to run after doing this.

[Ancient-Dragon]

We are getting this when running component testing in cypress. No matter what I do I cannot get this to work, are there any updates? I'm tempted to raise an issue if no one has already?

(this seems to be for every package we import, local dev seems to run fine).

[ethanmichel0]

Hey all, I am super confused -- I get this error when I run my sveltekit/vite project through docker, but when I run locally I don't get this error. I am super confused why this is happening, and I have tried several of the above steps, but to no avail.
Here is what I have tried:

1. Deleting node_modules, both locally and from inside of docker container
2. Recreating docker image without cache, and even deleting image entirely and recreating a fresh one

Here is my docker file:

`FROM node:16-slim
WORKDIR /app
COPY package.json .
COPY package-lock.json .
RUN npm install && npm cache clean --force
COPY svelte.config.js .
COPY vite.config.js .
COPY jsconfig.json .
COPY playwright.config.js .
ENTRYPOINT npm run dev`

(please note that my code in /src is mounted inside of the docker container)
does anyone have any idea why 504 outdated optimize dep is occurring for me, but only when I run my docker image? Super confused. Thank you all for your help :)

[glacials]

I was able to solve one occurrence of this by removing some custom cache busting I'd had:

- <script src="app.js?v=3"></script>
+ <script src="app.js"></script>

This immediately solved the issue. None of the above worked for me.

I recently ran into it again, and noticed it only happens in Safari. Chrome is fine. (Both macOS.)

[50bbx]

I had a similar issue. Vite dev server would give a 504 Outdated Optimize Dep error. Turns out that I was importing React instead of react. It was an issue with wrong case!

What fixed it for me:

// before
import { useState } from 'React'

// after
import { useState } from 'react'

[alx8437]

You can try follow npx vite --force This will update cash of dependensies force. Then you can use our usually script for run vite.

[MaxLikesCode]

Thanks so much! This fixed it.

[willbchang]

Removing node_modules and reinstalling only works for once, I have to repeat it every time I want to start a server. This solution fixed my problem.

[psy0rz]

tried all of above to no avail..

vite 4.4.9, using Vue and "jeep-sqlite": "^2.4.1",

[psy0rz]

found a solution! at https://stackoverflow.com/questions/76631171/jeep-sqlite-loader-not-running-in-web

add this to vite.config.ts:

export default defineConfig({
  optimizeDeps: {
    exclude: ['jeep-sqlite/loader']
  }
});

[webgeek-studio]

Just restart the server + vite!!!

[sergio0983]

I am not sure if this applies to everyone with this problem, but in my case, the problem was caused because I ran "npm run dev" with my user and node_modules folder was owned by root, causing vite process to be unable to rewrite assets.

My docker entrypoint, among other things, creates those folders if not present, and will do so as root instead of doing it as my current user. Later, when I run npm run dev in the host as "dev" user, vite cannot access root owned folders.

Short term solution:
sudo chown -R dev:dev node_modules

In my case, I also faced the same problem when running npm run build because it is also included in the entrypoint script so:
sudo chown -R dev:dev public/build

For the long term, change ownership of the folders when they are created (probably in the build phase).

[Developer-Nasim]

After restarting the server, now it's fixed for me :)

[LiuZiqi-dual]

I also had this problem when installing the module using pnpm, and after checking the contents of the /.vite/deps folder, I found that the .js file I needed really didn't exist.
After rm -rf deletes the whole node_modules folder and reinstalls it.
The first time I access it after run dev, it regenerates the contents of the /.vite/deps folder, then it generates the .js file I need for that package, and the problem is solved!

[nolros]

You will get that message if you attempt to load a node dependency inside a browser environment, My guess most of the time it is loading up environments. This will most likely be the problem. Hope this helps

Short answer: Vite node dependency import inside browser e.g. (btw env this is most likely the issue

import { loadEnv } from 'vite'

Detailed problem example/explanation: ERR_ABORTED 504 (Outdated Optimize Dep)

Using Node and Browser env. Difficult to debug

BaseEnvProvider.js (Base env class)

export default class BaseEnvProvider {
  get(key, defaultValue) {
    return this._env[key] || defaultValue
  }
}

NodeEnvProvider.js (Node env class)

import { loadEnv } from 'vite' works here

import BaseEnvProvider from './BaseEnvProvider.js'
import { loadEnv } from 'vite'

class NodeEnvProvider extends BaseEnvProvider {
 constructor(mode) {
    super(mode)
    this._env = loadEnv(mode, process.cwd(), '')
  }
}

const nodeEnvProvider = (mode) => NodeEnvProvider.getInstance(mode)

export default nodeEnvProvider

BrowserEnvProvider.js (Browser env class)

import { loadEnv } from 'vite' will throw and exception :ERR_ABORTED 504 (Outdated Optimize Dep)

import BaseEnvProvider from './BaseEnvProvider'
/**
* don't load node dependencies in browser
*/
//import { loadEnv } from 'vite' // this vite dependencies will throw the error

class BrowserEnvProvider extends BaseEnvProvider {
  constructor() {
    super()
      this._env = import.meta.env
  }
}

const Env = new BrowserEnvProvider()

export {
  Env as default,
  BrowserEnvProvider
}

env.development

SERVER_HOST=localhost
SERVER_PORT=5173

VITE_SERVER_HOST="${SERVER_HOST}"
VITE_SERVER_PORT="${SERVER_PORT}"

vite.config.*

Difficult to debug because NodeEnvProvider will work in Vite/Node environment (not tested), but your browser BrowserEnvProvider will be very unhappy

import {defineConfig} from 'vite';
import nodeEnvProvider from './NodeEnvProvider.js'

export default ({mode}) => {
 const Env = nodeEnvProvider(mode)

 return defineConfig({
    server: {
      host: Env.get('SERVER_HOST', 'myserver'),
      port: Env.get('SERVER_PORT', 1234),
    }
    //rest of code
  })
}

browserUsageExample.js

import Env from './BrowserEnvProvider'

/**
* contrived example
* will work with no import { loadEnv } from 'vite'  in BrowserEnvProvider, 
* but will throw ERR_ABORTED 504 (Outdated Optimize Dep) exception with that node import in BrowserEnvProvider
*/
const config = Object.freeze({
  server: Env.get('VITE_SERVER_HOST', 'localhost'),
  port: Env.get('VITE_SERVER_PORT', 1234),
})

[ModPhoenix]

Run vite optimize --force command helped me resolve 504 issue with dependencies optimization

Doc: https://vitejs.dev/guide/cli.html#vite-optimize

[iamdineshbasnet]

wrap <App /> with Helmet provider. The below code works in my case

<HelmetProvider> <App /> </HelmetProvider>

[luisiacc]

This worked for me, add this to your vite.config.js

export default defineConfig({
  server: {
    warmup: {
      clientFiles: [
        "./app/entry.client.tsx",
        "./app/root.tsx",
        "./app/routes/**/*.tsx"
      ],
    },
  }