I just migrated a big react application from Webpack to Vite. I configured to make use of the dev server with HMR. The project is kind of big and it has a lot of dependencies and many pages that I thinkg are loaded in the first load. I am using react-router for the routing and I don't have the time to lazy load the components yet.

This is my vite.config.js:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import path from "path";

export default defineConfig({
  root: "src",
  envDir: "../",
  envPrefix: "REACT_", // To mantain compatibility with our current env vars
  build: {
    target: "esnext",
    commonjsOptions: {
      transformMixedEsModules: true,
    },
  },
  plugins: [react()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
  server: {
    port: 8080,
    host: "0.0.0.0",

    proxy: {
      "/api": {
        target: "http://localhost:5000",
        changeOrigin: true,
        rewrite: (path) => path.replace("/api", ""),
      },
    },
  },
});

When I run the dev server I can access it with no problems using Firefox but when I use Chrome the tabs hangs and if I get to open the devtools I see many static files are pending and won't load.

A huge bunch of file are being loaded but Firefox has no issue loading them so I don't know if it's a Chrome issue or I missed something.

Doing my research and deductions I think it has something to do with the cache but I am not sure what is the issue.

Let me know if you need more details!

EDIT:

I found an actual solution in the Vite's Troubleshooting page in the Dev Server section. Follow the steps and then reboot your system

I have also updated Vite to the latest version just in case.

ORIGINAL:

Ok, I found a solution:

In my Linux system I fixed it by incrementing the maximum file descriptors allowed per process in my OS in the file /etc/security/limits.conf adding this line at the end:

* - nofile 65536

After saving the changes I rebooted my system and Chrome didn't have much problem with the dev server anymore.

I tested it on Windows and it worked just fine without any additional configuration.

Extra

Another solution I found was to downgrade to Vite@3.2.5. Something you can try if the above didn't work

References

https://github.com/vitejs/vite/issues/11468#issuecomment-1419820986