How to Migrate My React Project From CRA to Vite.JS

React deprecated CRA(Create React App) and published a blog post

Today, we’re deprecating Create React App for new apps, and encouraging existing apps to migrate to a framework. We’re also providing docs for when a framework isn’t a good fit for your project, or you prefer to start by building a framework.

https://x.com/reactjs/status/1890477188937290183

Although Create React App makes it easy to get started, there are several limitations that make it difficult to build high performant production apps. Most production apps need solutions to problems like routing, data fetching, and code splitting.

In principle, we could solve these problems by essentially evolving Create React App into a framework. However, CRA currently has no active maintainers, and instead of creating a new framework, we've decided to recommend one of the existing frameworks that solve these problems already.

All the frameworks we recommend support client-side rendering (CSR) and single-page apps SPAs. For existing apps, we've provided links to guides to help you migrate to a SPA using a framework.

If your app has unusual constraints, or you prefer to solve these problems by building your own framework, or you just want to learn how React works from scratch, we've added new docs for building a React framework

Finally, Create React App will continue working in maintenance mode, and we've published a new version of Create React App to work with React 19. See the blog post for more info:

Introduction

In this E-Book, I will explain how I migrated my React Project (https://onurdayibasi.dev/) that I created with CRA to ViteJS., My Project Structure …

This is the first image I migrated the project. Afterwards, my project was updated as follows;

• Node 14 ⇒ Node 22
• React 16 ⇒ React 18 ⇒ React 19
• ReactRouter5 ⇒ ReactRouter6 ⇒ ReactRouter7
• ReactQuery5 ⇒ ReactQuery6
• ReactFlow11 ⇒ ReactFlow12
• AntD 4 ⇒ AntD 5

You may learn how I conducted these studies and get the specifics by downloading the eBook on the right.

1.Introduction 2.Get Started

• Upgrading Node.JS and React Versions

• Let's Create a Vite Project

• I transferred my CRA project to the one I made using Vite.

• Using Alias rather than Absolute Path

• No Window Definition in DefineConfig

• React-Script is removed from the Package.json file.

• I have edited the Config Files in the Main Directory.

• I converted a part with Require usage in the project to Dynamic Import

• Files with .js or .jsx extensions need to be set properly.

• Memory Issues When Getting a Netlify Build

• No rollup-linux-x64-gnu Optional Dependency When Building in Netlify

• Dynamic Import and Routing Problem

• React Virtualized Library Vite.js Build Problem

  3.Conclusion