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...
For further actions, you may consider blocking this person and/or reporting abuse
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.m4vvideo 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_ABCtoVITE_ABCand then wherever I used them in my code I had to changeprocess.env.REACT_APP_ABCtoimport.meta.env.VITE_ABC. Also remember the current running environment(production, development, etc) is now atimport.meta.env.MODE.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...
Well done 👍
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?
You only need to remove the %PUBLIC_URL% in the index.html file. It worked for me :)
I replaced %PUBLIC_URL% to public. E.g.
<link rel="icon" href="/public/favicon.ico" />
It works now.
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 srcto serve the code from an alternate directory.I have done all above mantioned steps but got this error
$ npm start
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
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):
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)
I am getting this error, can someone help me to fix this error. I appreciate every responses.
What to do about all svg imports?
You need to install some variant of SVGR. This variant worked for me (actually using React Router v7 framework, but I imagine it works in plain old vite as well).:
npmjs.com/package/vite-plugin-svgr
The syntax is slightly better than what I was using under CRA, but it does require changes.
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...