Migrating from Create React App (CRA) to Vite

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.

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!!

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

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".

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

Excellent migration guide from CRA to Vite 👌

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

Worked wonders, thanks!

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

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

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 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.

Great article! The only think that kept it from working after following this guide was lack of proxying, which can easily be added in defineConfig. You might wanna add something about this since I assume(?) most people use it. I my case, I had to change it to this:

export default defineConfig({
  plugins: [react(), viteTsconfigPaths(), svgrPlugin()],
  server: {
    port: 3000,
    proxy: {
      "/api": {
        target: "http:[double-slash]localhost:8080",
        changeOrigin: true,
      },
      '/ws': {
        target: 'ws:[double-slash]localhostt:8080',
        ws: true,
      },
    },
  },
});

where [double-slash] is an awkward way to get around the fact that I'm not allowed to post "links".

Vite is a lot faster. 💨

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

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

Is there a step required if my project uses craco ?

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?