Requests are stalled forever

If you are using Linux, file descriptor limits and inotify limits may be causing the issue. As Vite does not bundle most of the files, browsers may request many files which require many file descriptors, going over the limit.

To solve this:

  • Increase file descriptor limit by ulimit

    # Check current limit
    $ ulimit -Sn
    # Change limit (temporary)
    $ ulimit -Sn 10000 # You might need to change the hard limit too
    # Restart your browser

  • Increase the following inotify related limits by sysctl

    # Check current limits
    $ sysctl fs.inotify
    # Change limits (temporary)
    $ sudo sysctl fs.inotify.max_queued_events=16384
    $ sudo sysctl fs.inotify.max_user_instances=8192
    $ sudo sysctl fs.inotify.max_user_watches=524288

If the above steps don't work, you can try adding DefaultLimitNOFILE=65536 as an un-commented config to the following files:

  • /etc/systemd/system.conf
  • /etc/systemd/user.conf

For Ubuntu Linux, you may need to add the line * - nofile 65536 to the file /etc/security/limits.conf instead of updating systemd config files.

Note that these settings persist but a restart is required.

Network requests stop loading

When using a self-signed SSL certificate, Chrome ignores all caching directives and reloads the content. Vite relies on these caching directives.

To resolve the problem use a trusted SSL cert.

See: Cache problems, Chrome issue

macOS

You can install a trusted cert via the CLI with this command:

security add-trusted-cert -d -r trustRoot -k ~/Library/Keychains/login.keychain-db your-cert.cer

Or, by importing it into the Keychain Access app and updating the trust of your cert to "Always Trust."

431 Request Header Fields Too Large

When the server / WebSocket server receives a large HTTP header, the request will be dropped and the following warning will be shown.

Server responded with status code 431. See https://vite.dev/guide/troubleshooting.html#_431-request-header-fields-too-large.

This is because Node.js limits request header size to mitigate CVE-2018-12121.

To avoid this, try to reduce your request header size. For example, if the cookie is long, delete it. Or you can use --max-http-header-size to change max header size.

Dev Containers / VS Code Port Forwarding

If you are using a Dev Container or port forwarding feature in VS Code, you may need to set the server.host option to 127.0.0.1 in the config to make it work.

This is because the port forwarding feature in VS Code does not support IPv6.

See #16522 for more details.