I have a rather large Vue 3 application (~550 components). It takes two minutes just to run
vue-cli-service serve and around 20 seconds to re-build it after each change. Hot reload stopped working a long time ago so it always needs to be refreshed in the browser even after a small style change. Moreover, the app is still not finished and it will probably get 2-3 times this big in the next year so it will probably be even worse.
Because of these problems, I've decided to migrate it from Vue CLI to Vite. I have already resolved a lot of problems and the app seems to work with Vite now with so much better loading times.
However, it sometimes gets stuck when I start a dev server (
vite command) and open it in a browser. The page keeps loading and I can see a lot of pending requests in the Network tab of Chrome DevTools. There's nothing special in the output of
vite --debug and running
vite --force doesn't help either.
When this problem occurs, the browser always loads a lot of modules (~900) and then it gets stuck on 10-20 modules. The status of all these HTTP requests is simply
Pending and they never finish. There are no errors in the browser or on the command line.
I don't think any particular file causes this. Maybe the problem is in my deeply nested folder structure with a lot of re-exports using
index.ts file on each level. It mostly gets stuck on my own modules but I've also seen cases when it was waiting for a module of some external library.
Has anybody experienced a similar problem? How did you solve it?
EDIT: I have discovered that this issue only occurs in Chromium-based browsers (Google Chrome, Brave, etc.) on Linux. It works without any problems in Chrome on MacOS and Windows as well as in other browsers (Firefox, GNOME Web, etc.) on Linux.
Thanks to this comment, I realized this was a problem with the file descriptors limit.
On Manjaro Linux (Arch-based), I was able to solve it by adding the following line to both
After this change, Vite works without any problems in all browsers.