DEV Community

Cover image for Migrating from CRA to Vite: Problems you might face
ℵi✗✗
ℵi✗✗

Posted on • Edited on

10

Migrating from CRA to Vite: Problems you might face

Why Consider Migrating from CRA to Vite?

Migrating from Create React App (CRA) to Vite can offer several benefits:

  1. Improved Development Experience: Vite provides faster cold start times and hot module replacement (HMR), resulting in a smoother development experience compared to CRA.
  2. Performance: Vite leverages ES modules and native ESM browser support, resulting in faster bundling and serving of assets, which can lead to improved application performance.
  3. Simplified Configuration: Vite requires minimal configuration, reducing boilerplate code and making it easier to set up and customize your project compared to Webpack-based setups like CRA.
  4. Support for Modern JavaScript Features: Vite supports modern JavaScript features out of the box, allowing developers to leverage features like ES modules, TypeScript, and JSX without additional configuration.
  5. Optimized Build Output: Vite generates optimized build outputs, including tree-shaking and code-splitting, resulting in smaller bundle sizes and faster load times for end-users.

Overall, migrating from CRA to Vite can help improve the developer experience, application performance, and build optimization, making it a compelling choice for React developers looking to modernize their projects.


Preparing for the Migration

Setting Up the Existing CRA Project

In this quick demo, I'll be migrating a simple React 17 to-do list app I created using CRA to Vite. Even though this is a small app, the process is going to be similar for a bigger project. If you want to play along, feel free to download the to-do list source from the following link.

After downloading the project, navigate to the project folder and run npm install. You may notice vulnerability warnings; ignore them for now and run the app with npm start. If everything works correctly, the app will build and open in your browser.

Addressing Compatibility Issues

If you encounter errors related to the Webpack build process (e.g., hash issues due to OpenSSL incompatibility), try using an earlier Node.js version. For instance:

nvm use 16  
node -v  
npm start  
Enter fullscreen mode Exit fullscreen mode

Once the app compiles successfully and runs at http://localhost:3000, you’re ready to migrate.


Starting the Migration

Creating a New Branch

First, create a new branch for the migration:

git checkout --orphan vite-migration  
Enter fullscreen mode Exit fullscreen mode

Setting Up the Vite Project

Create a fresh Vite app in a temporary folder:

npm create vite@latest  
Enter fullscreen mode Exit fullscreen mode
  • Name the folder vite-app (or any other name).
  • Choose React and JavaScript.

Aligning React Versions

Before installing dependencies, modify the React version in the vite-app/package.json to match the CRA React version (React 17). Afterward, run:

yarn  
Enter fullscreen mode Exit fullscreen mode

Moving Source Files

  1. Delete the src and public folders in vite-app.
  2. Copy the src and public folders from the CRA project into vite-app.
  3. Replace the root index.html with the one from the CRA public folder.
  4. Restructure the folder by moving files from vite-app to the root directory.

Adapting the Project for Vite

Updating the Entry Point

Rename src/index.js to src/main.jsx. Modify the index.html to include:

<script type="module" src="/src/main.jsx"></script>  
Enter fullscreen mode Exit fullscreen mode

Fixing %PUBLIC_URL%

Remove instances of %PUBLIC_URL% in the <head> section of index.html. Additionally, clear out any unnecessary comments.

Handling JSX Files

Rename any .js files containing JSX code to .jsx, such as src/App.js to src/App.jsx. This ensures compatibility with Vite’s parsing rules.


Running and Configuring the App

Run the app with:

yarn dev  
Enter fullscreen mode Exit fullscreen mode

If it works, but you want to change the port to 3000, update the vite.config.js:

server: { port: 3000 }  
Enter fullscreen mode Exit fullscreen mode

Troubleshooting and Final Notes

For larger projects, additional challenges may arise, such as dependency conflicts or environment variable configurations. If you need help, drop a comment!

Code available here


Follow Me for More!
Stay connected for more tips, tutorials, and resources:

GitHub
YouTube
LinkedIn

Happy coding!✌️❤️

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More

Top comments (1)

Collapse
 
praneshchow profile image
Pranesh Chowdhury

Yes, migrating to vite is a good choice 👍

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more