Adventures in Vite

Time for Something Different

We have been through a lot of different setups to build and run react apps. We have:

• Rolled our own
• Used small setups from other people (which all eventually stopped updating)
• Create React App (which isn’t recommended any more)
• NextJS

I was hoping that last one was going to stick, but NextJS 13 + SSR + AppRouter has just made things harder
in SPA land. So I started looking for something else. I ended up getting guided to Vite.

Getting Settled In

I needed to migrate/remove a bunch of stuff to make our SPA work with Vite. Basically we had modified a lot of the entry
points to make it more compatible with NextJS. We didn’t need a bunch of wrapper projects and other stuff we used to adapt
to NextJS. It also looks like get to defer the use of “use client” since I’m not turning SSR on in Vite.

Most of the changes were just renaming files from .js -> .jsx (Vite cares a lot about file endings).

Hit a Wall

I was really starting to enjoy the Vite environment when I hit a big wall. As I started to move more to the app over,
Chrome would either spin forever or crash with segfault. This was unbelievably frustrating! I thought that Vite was hitting
a circular dependency that was buried in the code, but after using some tools to look for them that was the problem.

Sometimes It Takes the Right Google Search

I searched for “vite chrome spinning forever” and I found this bug. It looks like this
problem was happening at the OS level. I was blaming Vite the whole time but it is a open file setting that caused the problem.
Since it was happening at such a low level none of my webstack gave me any info to debug. I tried to follow the directions in the
report but there were extra steps needed for Ubuntu.

For Ubuntu 22.10 I needed to modify three files to get things to apply:

In the /etc/security/limits.conf

* soft nproc 65535
* hard nproc 65535
* soft nofile 65535
* hard nofile 65535

in /etc/systemd/system.conf

DefaultLimitNOFILE=65535:524288

in /etc/systemd/user.conf

DefaultLimitNOFILE=65535:524288

reboot

Once you are logged in you can use this command:

ulimit -a |grep open

This should confirm that the limit has taken effect.

delmendo@cu:~$ ulimit -a |grep open
open files                          (-n) 65535

Now I get to get back to work on moving from Redux(https://react-redux.js.org/) -> Zustand(https://github.com/pmndrs/zustand)