Migrating from CRA to Vite

Create React App is unmaintained, and in a large app it slowly becomes a trap: react-scripts (and Craco on top) can’t be upgraded cleanly, so every other upgrade gets stuck behind it. I moved a large trading app from CRA to Vite in 2026, and it was one of the most useful pieces of plumbing work I’ve done.

Why bother

• Upgrades unblock. The framework, component library and charting libraries can move again.
• Speed. Faster builds, faster hot reload, faster dev server start-up.
• Bundles you control. CRA ships one heavy bundle by default; Vite makes code splitting straightforward, and the bundle shrinks before you even start splitting.

Strategy

• Don’t eject. Swap the build tool only (react-scripts → Vite) and leave the router alone. Router changes (TanStack Router, React Router v7) are a separate migration with a separate risk profile.
• Chunk deliberately. Split pre-login code from post-login code and big feature areas; a target of roughly 500 kB per chunk is a good forcing function.
• Promote the build artefact through environments instead of rebuilding at each stage.

Gotchas

• “Element type is invalid” errors from icon libraries usually mean a default import that should be a named import.
• Vite pre-bundles dependencies, and a bad import can make modules run earlier than before, for example reading local storage before the app has initialised.
• Base paths: absolute in dev, relative in the build, especially when a reverse proxy rewrites the app’s path.
• Legacy peer-dependency mismatches show up immediately; fix them rather than forcing installs.

The unexpected bonus: migrating the build is one of the fastest ways to learn how an unfamiliar app actually loads. It’s progressive overload for a codebase: one bounded change that makes the next ones possible.

Related: Finding React Re-render and Memory Leaks · Web Accelerator