I migrated from Create React App to Vite and took these steps

This week, I migrated an old React 15 Create React App (CRA) project from 2017 to Vite. Here’s what I learned along the way.

1. Outdated React Version (React 15)

Vite auto-installs React 19, but my app was still on React 15. I was concerned that I’d need to incrementally upgrade to React 17+ before migrating.

Solution:

Downgrading Vite’s React version to 15 before migration was straightforward. I simply removed node_modules and replaced createRoot with the older ReactDOM.render.

2. Removing Create React App

The first step was to remove CRA. Since my project was using CRA’s built-in Webpack and Babel settings, I ejected the configuration:

npx react-scripts eject

This exposed Webpack and Babel configs, making it easier to transition to Vite.

3. Module Import Errors (Cannot use import statement outside a module)

Vite uses ES Modules (ESM), while CRA relied on CommonJS, causing import issues.

Solution:

• Added "type": "module" to package.json.
• Updated <script src> tags in index.html to include type="module".

4. Dependency Vulnerabilities and Security Issues

Running npm audit revealed vulnerabilities in dependencies like postcss and node-fetch.

Solution:

• Removed outdated packages.
• Ran:

  npm audit fix --force

5. Handling Ejected Configuration Files

Ejecting CRA exposed Webpack and Babel configurations that Vite didn’t need.

Solution:

Deleted those files to prevent conflicts with Vite.

Watch the livestream to see this migration LIVE - https://www.youtube.com/live/fcXwlXEXuwA