Great article, thank you very much! It saved me from a lot of headaches 🍻

Just note, vite-plugin-svgr package was release version 4, so if you install this version it won't work with syntax in this blog. You should downgrade to verion 3.3.0

Excellent migration guide from CRA to Vite 👌

Vite is a lot faster. 💨

I am getting a blank screen after running yarn run dev. I moved my index.html to the root of the folder and added the script but nothing is working.

10/10 hearts! Worked flawlessly. Migrated Refine app from CRA to Vite.

Updated scripts to - { "start": "refine run vite", "build": "tsc && refine run vite build", "serve": "refine run vite preview", "refine": "refine" }

Thereafter npm start did show empty white page for a long time but soon after the content displayed

Just followed your guide to sucessfully migrate to vite. It's so fast and I'm really happy to finally have gotten rid of cra. (not being able to update to ts5 was the final straw).

Here's a tipp though: Vite recommends using vite-plugin-checker for checking types. I also added it and it works great. This removes your only "disadvantage".

I don't know if it is alright to ask questions here, but I have migrated on of my CRA's fully to vite now, following this amazing guide. But I am running into problems when it comes to building it for productions, whenever I run it in productions it cannot find the files in assets folders, it fails with 404. I think this is because the index.html script and link tags are missing a leading . to the paths but I cannot find anywhere on how to configure vite fix this issue. Have you any ideas?

This is probably a long shot, but do you know why my page is totally blank now? There's no content in the root div, almost no console logs, and no network activity.

This was a great article, I read it because I wanted to know about this migration as it very relevant my my work place and it up fixing and completely different vite issue I have had for weeks, with the resolve.alias config! AMAZING

very useful, I switched from CRA too and already seeing the benefits

nice! now my homepage won't render and i f*ed up my whole app!

Thank you so much for this easy to follow post. I had been wanting to make the switch from CRA to Vite for a while but I was worried it would take me a long time. After reading your article I made the switch in about 3 hours!!

Worked wonders, thanks!

Great article

I think you should update jsx key of tsconfig.json to

"jsx": "react-jsx"

to prevent typescript errors like

'React' refers to a UMD global, but the current file is a module. Consider adding an import instead.

Awesome, I also made the switch from CRA. Now I am using Next.js and Vite.