Modules are not being found when migrating from CRA to Vite

Question

I am trying to migrate my application from create react app to Vite. I followed this tutorial article on how to do it. So far, I have deleted the node_modules folder, made the following changes:

changes to package.json:

then ran npm i , then made these changes to

I actually had to replace "start" with "dev" for this one to get it to work:

I then moved public/index.html to index.html (project root folder).

changes to index.html:

changes to index.html:

I added this vite.config.jsx file:

Lastly I replaced all.js file extensions with.jsx. But now when I enter npm run dev it is telling me it can't find multiple different modules. I get a message like this:

Error [ERR_MODULE_NOT_FOUND]: Cannot find package '/Users/gtrman97/Documents/code/coding-projects/project/node_modules/esbuild/' imported from /Users/gtrman97/Documents/code/coding-projects/project/node_modules/vite/dist/node/cli.js

Out of curiosity, I commented out the import 'esbuild'; line in the cli.js file but got the same error with a different module:

Error [ERR_MODULE_NOT_FOUND]: Cannot find package '/Users/gtrman97/Documents/code/coding-projects/project/node_modules/resolve/' imported from /Users/gtrman97/Documents/code/coding-projects/project/node_modules/vite/dist/node/cli.js

Answer 1

The easiest way to migrate from CRA to vite, for me, is to create a vite app and copy all the components I created and install all of the dependencies I have on the CRA app. And boom, it just works. At least for my typescript CRA project. (And by examing git diffs, not surprisingly, only the package.json file changed.)