Colab Spike: Investigate Moving GWE from Using Nextjs to Vite

[PhotoNomad0]

Determine what it will take to convert GWE from Using Nextjs to Vite. See if that improves/accelerates development.

[PhotoNomad0]

Notes

• Attempted:

  • Failed: tried using latest Vite 5 and then had to switch to node 18 and react 18. But we had to problems with older material UI. Went back to Vite 4.5 and node 16 and react 16 - now making progress. Maybe it is just the react version that caused problems

• Steps:

  • Created a clean vite app and copied over config files and dependencies to GWE
  • Removed next dependency and all usages
  • Renamed files that have jsx elements from *.js to *.jsx (typically components and custom hooks)
  • Changed references to process.env to use import.meta.env
    • also have to rename any environment variables you want to share with app and add VITE_ to the start of the name
  • Removed next dependencies in code
    • Replaced useRouter with state
  • make a tweak to single-scripture-rcl - moved the exported types definition from useScriptureAlignmentEdit.tsx to types/index.ts

• Setting up vitest:

  • version 1.0.0 requires vite 5.0.0 and node 18
  • trying vitest 0.34.6

• Still do do:

  • Fix jest to work with Vite
    • do we remove babel compiler?
  • Fix page changing
    • Settings page
    • Error page
    • Feedback page
  • fix feedback API

[larsgson]

Maybe this s.o. thread is of help re. using babel, or not:
https://stackoverflow.com/questions/72344723/is-it-required-babel-configuration-when-i-use-vite-in-place-of-webpack

I think it would be good to remove babel in order to reduce complexity... or what would be the benefit of keeping it?

Would this maybe be of help for jest migration:
https://vitest.dev/guide/migration.html#migrating-from-jest

[larsgson]

Re downgrading vite, node and react

• ok, this is probably a different issue in the code somewhere, so better to delay such upgrades to later and get vite to work as a first step.

[abelpz]

@larsgson it was @material-ui's ThemeProvider it was generating all sort of compatibility issues

[PhotoNomad0]

Would this maybe be of help for jest migration: https://vitest.dev/guide/migration.html#migrating-from-jest

@larsgson - It looks like what we want, but looks like it could be significant work converting from jest to vitest.

[PhotoNomad0]

Would this maybe be of help for jest migration: https://vitest.dev/guide/migration.html#migrating-from-jest

@larsgson - It looks like what we want, but looks like it could be significant work converting from jest to vitest.

OK, was able to get it working for now.

[elsylambert]

Note: Test by deploying to Netlify to a new site(for testing)