Vite fails to load modules in Chrome with net:ERR_FAILED error

[CyberAP]

Describe the bug

If you try to load lots of modules at once using Vite the page could fail to load with net:ERR_FAILED code occasionally. This happens probably because JS module requests oversaturate Chrome networking and it fails to fulfil some of the requests. This bug doesn't affect Firefox.

At GitLab we had to engineer our own mitigation for this bug, but it's not fully fixed.

I don't know if the bug is caused only by Chrome, Vite or both. Vite shows no errors in the stdout when this happens.

https://github.com/vitejs/vite/assets/1462706/1d9fe744-b77c-4d5d-a335-c34be3e3cac8

Reproduction

https://gitlab.com/gitlab-org/gitlab-development-kit/-/blob/main/doc/index.md#one-line-installation

Steps to reproduce

This bug is only reproduced when Vite is in dev mode, so the reproduction environment is not that easy to set up. Using GitPod or similar services to setup the environment won't work because you need to have minimal latency with Vite dev server. Stackblitz didn't work for me at the moment because I wasn't able to handle a repo of Gitlab's size.

To fully reproduce it by yourself you'd need:

1. Install GitLab Development Kit (GDK)
2. Launch GDK
3. Go to https://gdk.test:3443/flightjs/Flight/-/merge_requests/4/diffs or any other merge request in GDK
4. Refresh the page until you see the bug

System Info

System:
    OS: macOS 14.5
    CPU: (10) arm64 Apple M1 Pro
    Memory: 45.34 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.12.2 - ~/.asdf/installs/nodejs/20.12.2/bin/node
    Yarn: 1.22.19 - ~/.asdf/shims/yarn
    npm: 10.5.0 - ~/.asdf/plugins/nodejs/shims/npm
  npmPackages:
    @vitejs/plugin-vue2: ^2.3.1 => 2.3.1 
    vite: ^5.3.1 => 5.3.1 

Browser:
  Arc: Version 1.47.0 (50866)-RC
  Chromium Engine Version 126.0.6478.36

Used Package Manager

yarn

Logs

No response

Validations

• [X] Follow our Code of Conduct
• [X] Read the Contributing Guidelines.
• [X] Read the docs.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• [X] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• [X] The provided reproduction is a minimal reproducible example of the bug.

[hulh122]

I meet the same ERROR! :(

Hope some way to fix the error

For me, Can only use disable-cache now

[bpartridge-fn]

We're also hitting this issue in Chromium-based browsers when loading a page in dev mode that initially requests over 2,000 modules and other static resources. Turning off HTTP caching does work around the problem. I wonder if Chrome is exhausting the number of available file descriptors or some other system resource? If so, probably not much that can be done on the Vite side of things other than documenting the workaround and maybe pressing the Chromium team to investigate.

[agaripian]

We had the same issue with chrome, it works fine in firefox and safari. There is a chrome bug open for this as well https://issues.chromium.org/issues/355006326 We resolved it by updating our Nginx server config to use the following below and it worked. The default in nginx is 1000 so if you go over that it seems like Chrome can't recover from it.

 keepalive_requests 10000;

server {
   server_name exmaple.com;
   http2 on;
   listen 443 ssl ;
   ssl_session_timeout 5m;
   keepalive_requests 10000;
}

[ilovepixelart]

If someone reads this thread and has similar issue with vite on a big spa project try: https://rollupjs.org/configuration-options/#output-experimentalminchunksize

build: {
  rollupOptions: {
    output: {
      experimentalMinChunkSize: 300000,
    },
  },
},

[NullVoxPopuli]

on a big spa project try:

that doesn't help with dev/watch mode tho <3

I've started collecting some aggregate information here: https://gist.github.com/NullVoxPopuli/65d8fad8c736e66f58cdd4c5baedb0cb

[agaripian]

on a big spa project try:

that doesn't help with dev/watch mode tho <3

I've started collecting some aggregate information here: https://gist.github.com/NullVoxPopuli/65d8fad8c736e66f58cdd4c5baedb0cb

Are you using nginx? see my comment above https://github.com/vitejs/vite/issues/17499#issuecomment-3342077380

[NullVoxPopuli]

Are you using nginx

I am not -- does just.... putting nginx in front of vite dev somehow fix this? Like, does it have some better queuing mechanism for the requests so vite and chrome don't get overwhelmed?

[NullVoxPopuli]

@agaripian what's your full nginx config and how are you running it / connecting it to vite dev? we have to use proxy_pass, ya?

[sapphi-red]

@CyberAP I have 3 questions about this issue.

• Does the error currently shown as ERR_HTTP2_PROTOCOL_ERROR instead of ERR_FAILED?
• Does it happen if you set server.proxy: {}?
• Does it happen more frequently if you try to refresh the page while the modules are loading?

[CyberAP]

@sapphi-red

• Does the error currently shown as ERR_HTTP2_PROTOCOL_ERROR instead of ERR_FAILED?

No, it's still net::ERR_FAILED.

• Does it happen if you set server.proxy: {}?

Doesn't matter. It happens even with the production build, so not directly Vite to blame here.

• Does it happen more frequently if you try to refresh the page while the modules are loading?

It only happens if there are multiple modules fetching at the same time. The factors that increase the probability are:

1. The more modules fetched at the same time
2. The faster the modules load
3. The bigger the modules are

You can see an example here of fetching the production build, which resulted in this error. No dev server running.

It's a Chrome issue that could be solved with the full bundle mode eventually.

[sapphi-red]

It is probably a different issue, but I found a fix for the ERR_HTTP2_PROTOCOL_ERROR (https://github.com/vitejs/vite/pull/21024) and that is released in 7.2.0-beta.1, so maybe worth trying that version.

[NullVoxPopuli]

I've been tracking this over at https://gist.github.com/NullVoxPopuli/65d8fad8c736e66f58cdd4c5baedb0cb

and just tested out 7.2.0-beta.1 on an app with thousands (5k to ~12k (sometimes way more)) of initially loaded modules (something I'm trying to resolve, but thats slower going due to architectural blah blah blah)

anywho, 7.2.0-beta.1 solved it. thank you <3 I don't understand as I thought it was a browser problem about simultaneous streams or something.

is there a tl;dr: explanation for how the change in #21024 resolves this?

[lxy32167]

We use whistle as a proxy to access the vite development server. After we synchronize these two new parameters to whistle's options to create the h2 server, the ERR_HTTP2_PROTOCOL_ERROR problem is solved.

[klasjersevi]

Vite 7.2.0 broke my dev server when using https pfx configuration. Disabling https or reverting back to Vite 7.1.12 resolved the issue.

I got the following message in the terminal when trying to load a page in the browser, then the dev server stopped:

file:///Users/klas/GIT/weavy/frontend/uikit-react/node_modules/vite/dist/node/chunks/config.js:11173
                        var path$13 = parseUrl$1(req$4).pathname || "/";
                                                       ^

TypeError: Cannot read properties of undefined (reading 'pathname')
    at next (file:///Users/klas/GIT/weavy/frontend/uikit-react/node_modules/vite/dist/node/chunks/config.js:11173:35)
    at call (file:///Users/klas/GIT/weavy/frontend/uikit-react/node_modules/vite/dist/node/chunks/config.js:11239:3)
    at next (file:///Users/klas/GIT/weavy/frontend/uikit-react/node_modules/vite/dist/node/chunks/config.js:11186:4)
    at Function.handle (file:///Users/klas/GIT/weavy/frontend/uikit-react/node_modules/vite/dist/node/chunks/config.js:11188:3)
    at Http2SecureServer.app (file:///Users/klas/GIT/weavy/frontend/uikit-react/node_modules/vite/dist/node/chunks/config.js:11095:8)
    at Http2SecureServer.emit (node:events:519:28)
    at Http2SecureServer.onServerStream (node:internal/http2/compat:974:10)
    at Http2SecureServer.emit (node:events:519:28)
    at ServerHttp2Session.sessionOnStream (node:internal/http2/core:3229:19)
    at ServerHttp2Session.emit (node:events:519:28)

Node.js v22.20.0
ERROR: "dev" exited with 1.