Don't replace CRA

[Ali-Milani-13]

Is your proposal related to a problem?

the most known problem of the CRA of course. maintenance, debugging and speed.

Describe the solution you'd like

referring to this issue at react dev #11262

I think we've gone so far with front end, and it was unnecessary. open source is beautiful but causing fragmentation now, especially with this CRA case.

from my understanding, the main reason why developers are getting excited by Vite or build tools like that are 2 reasons:

they are faster
they are less buggy
so, there's no need to really ditch CRA or convert it to something completely new. with proper and updated tools, it will be ok.

Describe alternatives you've considered

as a developer, I chose web development as a job not hobby and I'm sure me and thousands of other developers have a life to live. I can't really afford, hacking with Vite config and submitting issues and diving into plugin eco system. create-react-app offered an amazing zero config way to just set the project up and running and now we are losing this tool. I haven't touched webpack config or any bundler config for 3 years and that saved lots of time. it was perfect.

my suggestion might look naive, but I suggest ditching all deprecated dependencies and replacing old and slow tools with newer ones.
there's no force to do all of them at 1 night.
if there are no qualified libraries and dependencies to replace the old ones, it's ok. it can stay that way for a while.

Additional context

we can keep it simple. we don't really need top to bottom 100% revolutionary reconstruction. CRA needs a bit of housekeeping. I think other proposed solutions are either exteremly complex or hard to deploy.

please consider updating underlying dependencies and their vulnerabilities. this step itself, will add convince to further improvements and replacing slow libraries with newer and faster ones.

[bayareaunicorn]

This can be solved by the community maintaining the CRA package and offering a prompt style choice as with nextjs.

While just a draft a prompt like this offers more advanced configurations such as Federated Modules in Webpack for microfrontends or custom builds with Metro. Besides the obvious quick vite config.

npx create-react-app

Name of your app? 

Is this app being built for production? 
Production
Development 

Choose a Bundler
Vite
Babel
Metro
Webpack

Choose 1
Javascript
Typescript
FlowJS

[Ali-Milani-13]

This can be solved by the community maintaining the CRA package and offering a prompt style choice as with nextjs.

While just a draft a prompt like this offers more advanced configurations such as Federated Modules in Webpack for microfrontends or custom builds with Metro. Besides the obvious quick vite config.

npx create-react-app

Name of your app? 

Is this app being built for production? 
Production
Development 

Choose a Bundler
Vite
Babel
Metro
Webpack

Choose 1
Javascript
Typescript
FlowJS

that will solve part of the problem. CRA creates lots of convince. I don't have to define proxy middleware in my webpack config file or Vite config to proxy api requests.

I just need to add, proxy option in the package.json

having both css and scss + module support is also tricky when it comes to other bundlers, even if they offer built in support for sass, if you want to have css and scss modules together, it will create quirks.

same goes for PWA support, which needs plugin for build tools like Vite. but in CRA you can directly attach service worker to the index.html.

%PUBLIC_URL support for index.html is also great.

there are lots of great features.

after all, CRA saves you lots of time. I tried to build projects with Vite, Parcel and webpack (custom configuration) and no of them were straightforward as CRA. you might not see an issue in right after the project build but it will show problems throughout the project.

[ahmadi3d]

@Ali-Milani-13 This might be a tad out of context, but I've always been using create-react-app. Now that I'm planning to start a huge project, after lots of research and testing, I felt Vite was the way to go. However, your comments did make me hesitate. Can you explain some of these "it will show problems throughout the project" issues that you saw, for example, in Vite? Thank you!

[Ali-Milani-13]

@ahmadi3d

Hi there.

so, these were couple of the issues I've encountered so far. ( I don't remember all of them )

1. you will be heavily reliant on tools like "linter". from what I understood about hot module replacement (HMR), if you forget to import something, Vite will not have any clue about it. it won't give you any error message, just a blank page.
   I've had my linter tool broken and exact same thing happened.
   I couldn't even get an error on console to see what was happening. I did it with debugger and things like that to find the issue.

CRA only gives you blank page if you have uncaught exceptions and even then, you can check your console and find the exact issue.

2. same goes for index.html file. you can work it the way you do in CRA. for example, with PUBLIC_URL. you have to configure module bundler (vite.config.js) if you want to do something with index.html. as I said I can't really afford this time to put on it.

3. if you use css and sass modules together, it will introduce lots of bugs. although this issue is not unique to Vite. Parcel and Rsbuild have the same issues even if you manually create your own webpack react project, it will also cause this issue. so, only CRA works with it fine.

4. as far as I know, source mapping is still problematic in Vite. I haven't encountered any issue with source map on CRA.

I don't want to mock any open-source project. keep that in mind. for my use case, I really want to stick with CRA. so, if Vite floats your boat, go for it. since CRA is extremely slow during dev mode + tailwind doesn't go well with CRA because of postCSS issues.

so, you have to make your own decision. what everything comes with tradeoff.

I traded couple seconds of build and compile time + EXTEREMLY large module bundler to have a framework like experience and everything just works.

keep that in mind. I consider CRA as a "semi framework" for React. it has its own structure and capabilities. but once you want more or a little bit customization, you will have to either eject it or use react-app-rewired.

[Ali-Milani-13]

@ahmadi3d
right now, my only problem are the security vulnerabilities because of outdated dependencies and if CRA fixes this issue, it still worth and I will continue using it.
I believe to what I've said in my bio.

[nivethan-dev]

@Ali-Milani-13 @ahmadi3d

Whether we like it or not, Vite has already won. The numbers speak for themselves: 16 million downloads for Vite compared to 100k for CRA. [npm downloads](https://npmtrends.com/create-react-app-vs-vite)

Even the new React documentation removed CRA, and they recommend starting new projects with either a framework or Vite. If fragmentation is a concern, the focus should be on moving away from CRA, not resisting Vite.

Think about the amount of effort required to modernize CRA’s messy codebase to match Vite. Why reinvent the wheel? Vite is faster, simpler, and more future-proof.

[bmuenzenmeyer]

@nivethan-dev your graph is flawed in that create-react-app is a CLI used to generate react-scripts - i think this is more informative of the current state

https://npmtrends.com/react-scripts-vs-vite

[nivethan-dev]

@bmuenzenmeyer thanks for pointing it out. so 17.6 million vs 2.7 million 🤷🏻‍♂️
still my point is valid though! Vite has already won. i would be surprised if you recommend people to use CRA over Vite for new projects!