-
Notifications
You must be signed in to change notification settings - Fork 4
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Migrate from Create React App to Vite #158
Conversation
- Add vite.config.mjs to configure Vite - Remove react-scripts and react-app-rewired - Rename env vars to be VITE_ and switch from proces.env. to import.meta. - Move index.html file to root (out of public/) - Remove %PUBLIC_URL% in index.html file - Add script to src/index.jsx - Remove homepage property from package.json (now managed in vite config) - Remove eslint-config-react-app and reconfigure ESLint with plugins - Add dist/ folder to ignore files since that's Vite's default - Remove serve-build.js script in favor of vite preview - Remove serviceWorker code (from CRA) - Add empty stub for packages that Vite should not try to load (e.g. fs-extra) - Switch to React 17 - Switch to Node 20 - Regenerate package-lock.json Note: tests are still not working. Coming soon!
- Mock fhir/fhir because it takes up a lot of space in prod build - Use full path.resolve in aliases to avoid logged warnings in console - Remove unused dependencies - Move testing dependencies to devDependencies - Polyfill additional node libraries - Remove reference to long deleted image
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I have not tested this yet, but I did a sweep through the code changes. Everything looks pretty awesome. I like it!
I did find one thing that I'm pretty sure needs changing (the deploy action). I also left a few comments and questions -- many of which probably don't require changes.
Thanks for working this all out. I am personally convinced that it will be easier to maintain in the future. So thank you.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The changes looks good.
This works great when I run npm start
.
When I run npm run build
, followed by npm run preview
, however, it doesn't work so well. When I load it in my browser, I get a blank white screen and the following error in my browser console:
vendor-DGUO_56M.js:905 Uncaught TypeError: Object.defineProperty called on non-object
at Function.defineProperty (<anonymous>)
at p5t (vendor-DGUO_56M.js:905:8567)
at vendor-DGUO_56M.js:906:1693
at oW (vendor-DGUO_56M.js:906:1710)
at vendor-DGUO_56M.js:646:1463
at n3t (vendor-DGUO_56M.js:711:1483)
at vendor-DGUO_56M.js:711:5258
at yl (vendor-DGUO_56M.js:711:5294)
at vendor-DGUO_56M.js:711:5473
at vendor-DGUO_56M.js:712:6144
Looking at the first location in the stack, it's trying define __esModule
on something -- but it's hard to tell what that something is due to code minimization. It seems to be somewhere in the package loading code.
@cmoesel - thanks for noticing the build issue. I was able to reproduce it, but I wasn't able to reliable reproduce it. I could run the I also updated a few dependencies that had gotten out of date (899593c), ran an |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thank you, Julia, for this monumental effort. It looks great and works great. Good riddance, CRA!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
hooray for vite!
This PR removes the Create React App framework and migrates to the Vite framework. This will (hopefully) make maintenance going forward easier to manage with a lighter weight, currently maintained framework. There were quite a few things that changed and I tried to keep them in relatively separate commits, but I've included a brief summary of the changes here:
AppRouter
out ofutils
since it didn't really make sense as a util.jsx
filesreact-scripts
,react-app-rewired
, and the serviceWorker code since they are CRA specificvite.config.mjs
fileindex.html
and updated it for Viteimport.meta
in place ofprocess.env
bitly
dependency and just make the two calls we need withfetch
directlyTo test this, you should
npm install
(it might be good to first deletenode_modules
if you have it to start fresh)package-lock.json
a few times to make sure it was up to date, so make sure there are no changes after you do an installnpm start
to run the development servernpm run build
to build a static, production build (this will be indist
now, notbuild
, since that's the Vite default)npm run preview
to serve the static build and test this out in the same way as abovenpm test
to make sure the tests run and passnpm run lint
andnpm run prettier
to ensure the updated configuration works as expectedTwo other things to note:
base
property in thevite.config.mjs
file properly so that the deployment will work, but if anyone notices anything that might specifically be off there, please let me know.