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 ponents 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 patibility with our current env vars
  build: {
    target: "esnext",
    monjsOptions: {
      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!

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 ponents 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 patibility with our current env vars
  build: {
    target: "esnext",
    monjsOptions: {
      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!

• javascript
• reactjs
• google-chrome
• vite

Share Improve this question Follow asked May 25, 2023 at 12:37 A-fandinoA-fandino 79411 gold badge99 silver badges1818 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

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 [email protected]. Something you can try if the above didn't work

References

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

As Vite's troubleshooting section will also mention, VS Code devcontainers do not work with the dev server by default because they do not support IPv6.

You can fix this by passing the --host flag to vite like vite host or if using npm, npm run dev -- --host. (-- forwards further flags to the dev script).

Or you can set server.host option to 127.0.0.1.