DEV Community

Migrating from create-react-app to Vite: A Quick and Easy Guide

Henrique Jensen on July 20, 2023

In recent times, React has shifted its recommendation from using create-react-app (CRA) as the starting point for new projects. Instead, it now enc...
Read full post
Collapse
 
dmikester1 profile image
Mike Dodge •

Thank you for a great write-up! This helped a lot for converting over a fairly large React app.
That being said, there were a few "gotchas" I encountered that were not mentioned. Like in a few other comments, I had to remove all occurrences of %PUBLIC_URL% from the index.html file. I had to convert over about 95% of my .js files to .jsx. I was having an issue importing a .m4v video file into a couple of my components. I learned I had to add this 'assetsInclude' line to vite.config.ts:
export default defineConfig({
assetsInclude: ['**/*.m4v'],
...
Lastly, I had to rename my env vars in my .env file from REACT_APP_ABC to VITE_ABC and then wherever I used them in my code I had to change process.env.REACT_APP_ABC to import.meta.env.VITE_ABC. Also remember the current running environment(production, development, etc) is now at import.meta.env.MODE.

Collapse
 
osama_malik_5ac9ea2cb8ee7 profile image
Osama Malik •

for bigger codebase where you dont want to convert all the files from .js to .jsx at once, then this may help:

github.com/vitejs/vite/discussions...

Collapse
 
mezieb profile image
Okoro chimezie bright •

Well done 👍

Collapse
 
nelwhix profile image
Nelwhix • • Edited

Nice article, I followed this and got an Internal URI malformed error on the browser. then on the terminal I got that I have to rename every file in my project that uses jsx to a .jsx extension and I am trying to migrate a larger codebase with tons of files. Please any help?

Collapse
 
miionu profile image
Rospars Quentin • • Edited

You only need to remove the %PUBLIC_URL% in the index.html file. It worked for me :)

Collapse
 
yousefzw profile image
yousefZw •

I replaced %PUBLIC_URL% to public. E.g.

<link rel="icon" href="/public/favicon.ico" />

It works now.

Collapse
 
briandesousa1 profile image
Brian De Sousa •

Nice work!

If you want to keep index.html under src, you could also create the vite.config.ts under src and change the start script in step 6 to vite serve src to serve the code from an alternate directory.

Collapse
 
parth_thummar_e81e560821b profile image
Parth Thummar •

X [ERROR] Using a string as a module namespace identifier name is not supported in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari14" + 2 overrides)

node_modules/@mosaic/mad-configurability-ui/dist/esm/en-TH35BLPJ.js:151:70:
  151 │ ...antWidgetConfiguratorDetails_save_errorMessageNoFieldsVisible as "tenantWidgetConfiguratorDetails.save.errorMessageNoFieldsVisible", 
      ╵
Enter fullscreen mode Exit fullscreen mode

I am getting this error, can someone help me to fix this error. I appreciate every responses.

Collapse
 
yuval1982 profile image
yuval1982 •

Great guide, thanks!

However, I needed 2 more changes to make my app work (our service is served as a framework in our company's platform):

  1. change build.outDir in vite.config.js to 'build' - vite's default is 'dist', and our platform is looking for the manifest file inside 'build'.
  2. since our url is relative to the platform, i changed homepage in package.json from './' to './wlmvmc' (that's our service' name) and the base in vite.config.js to './', so the correct paths will be injected to index.html
Collapse
 
honeyman22 profile image
Nishan Bhattarai •

I have done all above mantioned steps but got this error

$ npm start

tsreact@0.1.0 start
vite

node:internal/modules/cjs/loader:1327
return process.dlopen(module, path.toNamespacedPath(filename));
^

Error: The specified module could not be found.
\?\D:\My Folder (AITC OFFICE)\aitc-admin-panel\node_modules\@rollup\rollup-win32-x64-msvc\rollup.win32-x64-msvc.node
at Module._extensions..node (node:internal/modules/cjs/loader:1327:18)
at Module.load (node:internal/modules/cjs/loader:1091:32)
at Module._load (node:internal/modules/cjs/loader:938:12)
at Module.require (node:internal/modules/cjs/loader:1115:19)
at require (node:internal/modules/helpers:130:18)
at Object. (D:\My Folder (AITC OFFICE)\aitc-admin-panel\node_modules\rollup\dist\native.js:60:48)
at Module._compile (node:internal/modules/cjs/loader:1241:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1295:10)
at Module.load (node:internal/modules/cjs/loader:1091:32)
at Module._load (node:internal/modules/cjs/loader:938:12) {
code: 'ERR_DLOPEN_FAILED'
}

Node.js v20.9.0

Collapse
 
osama_malik_5ac9ea2cb8ee7 profile image
Osama Malik •

if you have a bigger codebase and dont want to convert all the files from .js to .jsx at once, then this may help: github.com/vitejs/vite/discussions...