This is a cry for help. I beg you, I am on my knees, weeping, imploring you...
STOP USING CREATE-REACT-APP
Ok so if you don't want to read the whole article let me tell you what's what in simple terms (TL;DR):
-
create-react-appstopped being updated over 2 years ago -
react-scriptswhich CRA depends on, stopped being updated over 2 years ago - CRA is slow compared to modern alternatives
- webpack is very slow compared to modern alternatives
What's the solution? In one word: Vite.
No Longer Updated
The last time the create-react-app package was updated was on April 12 2022 at 1:33 EDT, which by all accounts as of writing this, is over 2 years ago. And while some things can go years without updating, it's important to realize that CRA itself has a lot of dependencies which have not been updated, and have suffered from vulnerabilities. When you run npx create-react-app you'll get the following result:
8 vulnerabilities (2 moderate, 6 high)
The Facebook/React team have no intention at this point of fixing any dependency, as made clear by the fact that create-react-app is no longer updated and they now recommend other tools (see further down).
React-Scripts
react-scripts is the actual dependency used by CRA when running your dev server, with npm run dev and when building with npm run build. And just like CRA, its last update was in 2022, in fact, in the exact same commit as CRA's last update. react-scripts has a ton of dependencies that have since updated and patched, but of course, react-scripts won't update.
Webpack
I don't want to bash webpack here, but I will say this : webpack is slow as shit, compared to Vite. It's not as configurable as the alternative either, even if it seems to have plenty of a plugin ecosystem, it's already been overshadowed by what Vite offers.
The solution: Vite
Vite (pronounced somewhere between vit and veet since it's the French word for "Fast") is a direct replacement for create-react-app's features, in that it offers a fully configurable development environment with a hot reload server and plenty of plugins.
Not only is Vite configurable, it's blazing fast and it also supports basically all front-end frameworks. That is to say, you can create a Vite project for React, Svelte, Solid, Vue, Lit, Quik, and Angular. It even lets you create vanillajs applications but with builder dependencies such as tailwind, sass, etc.
Personal anecdote time : When I first learned of Vite in a previous job, I took half a day to convert a project that was using react-scripts into Vite. It took half a day because it was a pretty massive project, I was a Junior level dev, and I was new to a lot of it. I knew it was worth it, and I was right : When saving a file and waiting for the hot reload in the browser, the waiting time went straight down from 6 MINUTES to LESS THAN A SECOND. Yes, you're reading that right, I didn't make a typo between "minutes" and "seconds". The initial build time also was reduced to about 20 seconds, because it was still a pretty massive application.
So when I say "blazing fast" I actually do mean it, it is not a hyperbole or exaggeration. And I'm going to do it again, and again, in every project I work on still using react-scripts.
So, have I convinced you? Go right ahead and get started with Vite today.
How to convert
Ok so you might be wondering if there's going to be a whole lot of changes to make in your code, right? Well... not really. The truth of the matter is that the vast majority of your changes happen at the configuration and root level of the app.
Converting a CRA app into a Vite one boils down to:
- From a new folder (not your existing app), run
npm create vite@latest - Select
Reactas a framework - Choose
Javascript + SWCorTypescript + SWCdepending on whether you use TS. (SWC makes the build process even faster than not using it) - Let it generate the scaffold project
- Copy over all your components and subfolders (EXCEPT FOR
App.jsandindex.js) - Modify the
main.jsxandApp.jsxto re-introduce your configuration including react-router, your contexts, etc - Add any required plugins into
vite.config.js - Adjust for errors/issues
Obviously the last 3 steps are where the majority of your work will go. Depending on the complexity of your existing application, finding the correct plugin and configuration might take a bit of time, and adjusting for errors you might encounter could take some time. But in the end, I repeat again that it will absolutely be worth the effort.
What if I need help?
If you've reached this far and you've decided to switch but are afraid of having to deal with problems and errors, I invite you to join me in the #javascript channel of The Programmer's Hangout on Discord. I hang out there as eslachance (usually nicknamed Alterion), don't hesitate to ping me for help and mention this dev.to article. The more official Reactiflux server is also at your disposal.
If I'm not available there are plenty of people in TPH and Reactiflux that can help you, some that I've directly converted to Vite!
A Conspiracy Theory
Stop reading here if you don't care about drama, conspiracy theories, and rants. I'm about to go deep into a rabbit hole which you're absolutely not forced to follow me into - Vite's cool as it is, it's your answer, you may disengage for the rest ;)
The question I asked myself often is : Why did the React team bury the mention of Vite deep within a collapsed "Deep Dive" block on the Start a New Project page of their docs. Why does the mention of Vite feel very brushed off, just a comment, a maybe not important note at the very end of a wall of text most people won't read?
What I think should have happened is that instead of this massive hidden wall of text casually handing out a mention of Vite along with Parcel... it should have been a paragraph at the top level of the page, before any mention of NextJS and other full-stack frameworks.
The page should have noted that create-react-app is deprecated (it makes NO mention of CRA at all!) and that its direct, suggested replacement for a front-end-only project was to use Vite.
Instead, what the documentation does is suggest to use a "Production-grade React framework", and starts with NextJS as the main one, the first one.
Here's where the conspiracy comes in. NextJS is made by Vercel, who also offers hosting that is specifically compatible with NextJS, which is not hostable unless you are on a service that supports it. Even if the docs say All of the frameworks we recommend are open source with active communities for support, and can be deployed to your own server or a hosting provider , it fails to mention that the hosting or server requires nodejs to be running for this to work.
I am aware of NextJS's "static output" but that doesn't support most of its features and more importantly, isn't an SPA but rather a Static Site Generator where every page is reloaded, just what React avoids happening.
Now... Vercel is a large company, and they have been infiltrating themselves into the React ecosystem. As one reddit post points out:
- "The React team is currently working primarily with Vercel to "research, develop, integrate, and test framework-agnostic bleeding-edge React features like React Server Components". The React docs website is built on NextJs."
- "Vercel has been more aggressive in hiring and sponsoring React core team members."
Now... it doesn't source these facts, so take it with a grain of salt (I haven't been able to seriously find any source for these on my own. that's why it's a conspiracy theory and not an affirmation of facts). But it sure makes me wonder just how much money Vercel has been pumping into the React team, how many members of that team it stole and how that affected the React docs and the team itself, either directly or through "my colleague used to work here and now is at Vercel and they keep telling me Next is great".
If you have any solid information on the subject I would love to hear from you in private, do a little bit of investigative journalism, and write up a real article or video on the matter. But until then, it'll remain just real life conspiracy theory I'll continue to believe in until an official Facebook/React team member explains to me why the hell Vite isn't put front and center in their docs.
That's all, folks!
Top comments (9)
Once I started using Vite, I never used create-react-app ever again. It's just too good. I assume that most people who still use the latter are newbies following tutorials that haven't been updated yet or possibly even ChatGPT outputting responses with create-react-app instead of Vite.
Always prefer Vite as it is faster and more reliable as compared to
create-react-app...Do You know why people still massively use "create-react-app"?
...
Chatgpt, Claude AI, DeepSeek - even recently released high models like 4o or sonet 3.5 are spitting it out.
That's probably part of the problem. But the fact that create-react-app is still active on on github and npm, it has not been set to archived, so when people watch any video, tutorial, or any source of information... They're not going to know. It's still there and offers no warning of being dead except for the npm audit.
On the other hand, Vite has memory usage problems in production builds that can clog CI/CD systems. And these problems are known for over 3 years: github.com/vitejs/vite/issues/2433.
As I'm not for using create-react-app, I don't consider Vite as a solution to everything. Especially not, if you're thinking about creating large apps in React. What I prefer is to use Nx. In Nx, when you choose to create a standalone React app, you get nearly the same as you got with CRA. However, it's regularly updated, and you can choose which bundler to use (Vite, Webpack or RSPack).
"Some problems may occur in very rare cases" is not a good reason to avoid an entire build system. 11 million downloads per week and only 443 people have upvoted that issue, it's statistically insignificant as far as issues go. I bet I can find Nx issues that have been open for a long time that only affect a few people, but I guess since those issues don't affect you personally, they don't matter?
Who said it didn't affect me personally? I actually had to rewrite two commercial projects from Vite to Webpack because once they went out of PoC phase and started being full-grown apps with more code and more dependencies, build was eating over 4GB of RAM (e.g. that's RAM limit in Bitbucket Pipelines). Webpack? Barely going to 2GB. And for production builds, both of them are similarly slow, because Vite uses Rollup for production builds.
I agree that Vite is very fast for development, but for production builds it's not a viable solution. Angular's team have a nice approach, where they use Vite for development because of speed, and for production they use esbuild. But it depends on the size of the app. If we're talking about small apps, proof of concepts, Vite's great. For large, corporate apps, no.
I guess I the 3 different corporations I worked for where I converted massive react web apps from Webpack to Vite/Rollup must have all missed that problem in all their CI/CD systems for 6 years then. Strange how personal anecdotal evidence works, right?
Why so aggressive? I don't deny what you've written in the article, I even agree that people should stop using CRA. I've just pointed that Vite may not always be reliable, based on my own experience, and backed with a GitHub issue with over 400 likes. I'm glad that you didn't have any problems with Vite and I wish I also had the same experience.