147 likes
·
65.7K reads
27 comments
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.
Updated, thank you for that. 🙏
Awesome, I also made the switch from CRA. Now I am using Next.js and Vite.
Worked wonders, thanks!
Glad you found it useful Freddie.
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!!
Great to hear Matthew! Glad you found the article useful.
nice! now my homepage won't render and i f*ed up my whole app!
lol jk. got it working. thanks!
very useful, I switched from CRA too and already seeing the benefits
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
Great to hear it helped Malin. 👍
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.
I'm afraid I wouldn't be able to help without looking at the project. Is it open source?
Have you tried #3 under the Troubleshooting section?
Cathal Mac Donnacha Yep, and I know that worked because I can see the root div, there's just nothing in it. IntelliJ also isn't happy about the /src/index.tsx, it thinks it doesn't exist and I think it's trying to look from the public folder. IntelliJ stops complaining when I change it to src/index.tsx, but the page is still blank.
Also the link you added to the troubleshooting docs is broken.
Our app is not open source and I can't make it open source :/ I knew this might be a long shot, but its hard to debug when there's no error messages or anything...
Alex Sweeney No worries. I updating the link to the troubleshooting docs, thanks for that!
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".
Excellent thanks. This wasn't available at the time of writing so happy to see that!
Cathal Mac Donnacha, I just found the same thing after searching around Vite docs. Maybe you could just update your post to mention it? Thanks for the helpful post!
Thanks Jan Paepke. I still see it as a disadvantage since it's not built into Vite itself. However, I've mentioned it as an option. 👍
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
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?
Hey Malin, I think this question would be best placed on Stack Overflow as it will be difficult to help without code examples, screenshots etc.
Cathal Mac Donnacha Thank you, fully understand!