Migrating our React setup to Vite

Meet the team: Darko is our Software Development Manager, or as we like to call him running junkie :)

Introduction

In the modern world, web applications tend to be more complex and more useful in every field of life.

The front-end applications are the first contact with your customers, and these applications over time, become more and more complex, which means the build time, as well as development time, can dramatically increase. Increased build and development time, often means more expensive bills for building and developing these applications.

Choosing the right build tool is the most important thing in this development toolchain, so the right tools can save you valuable time and money.

We did some research and found that one of the most popular build tools for front-end applications, ViteJS, is the most appropriate build tool for our case.

Here is our journey with migrating our RAR React application to ViteJS

Environment and performances with RAR

First, we want to mention that both RAR and CRA are great, but not as great as ViteJS, especially for the build and development time as well as the application size 😊.

With RAR, the application build time was between 15 and 30 minutes with GitHub Actions, which made every build on CI very painful and slow.

Also, the fast refresh feature was not fast at all.

The migration

Our react application was based on react version 16, and the first step was to upgrade to the latest, version 17.

if you are using react with typescript, do not forget to update and node type to version 17 e.g. "@types/node": "^17.0.21"

The second step was to add a specific ViteJS configuration. According to their documentation, we created ViteJS configuration file.

vite.config.ts

then, we updated the scripts in package.json

and the last step was to create index.html page in the root of the project, for the new setup.

And that’s it. We installed the new dependencies, and run the command yarn dev. The result was, a lot of errors, and the application did not work. After research, we found that the indirect dependency(dependency of our dependency) uses node-specific modules. In our case, the problematic dependency was aws-iot-device-sdk which uses node-specific modules like Buffer, process, etc. The errors and how we fixed them, jump to the next section 😊

First issues with the new setup

A lot of errors occurred in the browser’s console and the application did not work at all 😞

The most common errors were: Buffer or process are not defined. These functions/constants are used by the indirect dependencies, and our application did not work because of them.

The errors look like the image below:

Uncaught ReferenceError: process is not defined

Uncaught ReferenceError: Buffer is not defined

We tried almost everything. Tried to define Buffer and process in the config files and inject from the config file, but ViteJS was a little confused about how to order the injected variables or manually injected polyfilled scripts, so we get another error like Uncaught SyntaxError: Identifier 'Buffer' has already been declared.

After days of investigation, we finally found a working solution. In the next chapter, you can read, how we went over the issues caused by the node-specific modules 🚀

How we went over the issues

First, we installed the Buffer and process as a new dependency.

yarn add Buffer
yarn add process

It adds a new dependency to your package.json. In our case:

Then, it needs to create a new file, e.g. in your src folder with name nodespecific.ts

Your nodespecific.ts file should look like this:

then, you will need to add this file to your index.html

This will work for local development, but for the production build, you will need to install one more ViteJS plugin.

yarn add @rollup/plugin-inject

And the last step is to update vite.config.ts. Now, your ViteJS configuration file would look like this:

Now, you can run yarn dev or yarn build. 🚀

Conclusion

ViteJS is a great tool, it saves time and money. It will be better over time. Migrating from CRA or RAR was definitely worth it.

If you have any questions, feel free to post a comment below

✨ happy coding