Fix dependency conflicts, upgrade nx & vite

[sam-schu]

ℹ️ Issue

We were having an issue where adding a new dependency would work fine locally but would cause the CI to fail.

📝 Description

TL;DR: Updated package.json dependency resolutions to avoid conflicts with aliased packages, and upgraded Nx and Vite to resolve subsequent errors.

I was able to reproduce the issue locally by clearing my node_modules before running yarn install (the CI generates fresh node_modules each time it runs).

On running yarn install with no node_modules, we were getting warnings like the following for strip-ansi, string-width, and wrap-ansi:

warning Pattern ["string-width@4.2.3","string-width@^4.2.0","string-width@^4.2.0","string-width@^4.1.0","string-width@^4.2.0","string-width@^4.1.0","string-width@^4.2.3","string-width@^4.2.3","string-width@^4.2.0","string-width@^4.1.0","string-width@^4.2.3","string-width@^4.2.0","string-width@^4.1.0","string-width@^7.0.0","string-width@^7.0.0","string-width@^5.1.2","string-width@^5.0.1","string-width@^4.1.0"] is trying to unpack in the same destination "/home/runner/.cache/yarn/v6/npm-string-width-cjs-4.2.3-269c7117d27b05ad2e536830a8ec895ef9c6d010-integrity/node_modules/string-width-cjs" as pattern ["string-width-cjs@npm:string-width@^4.2.0"]. This could result in non-deterministic behavior, skipping.

These "is trying to unpack in the same destination" warnings are problematic and mean that multiple versions of a dependency are trying to install in the same location, and so one or more are skipped. Since some were supposed to be accessed directly (string-width) and some through an alias (string-width-cjs), only having the dependency installed through one of the names meant that modules trying to access it through the other name would not be able to find it, causing the error that ultimately caused the yarn install to fail:
Cannot find module 'string-width'

Fixing this meant updating the package.json resolutions to resolve the aliases to the same version as the main package so there wouldn't be a conflict (these are the key changes that resolve the dependency issue):

"strip-ansi": "^6.0.1",
"strip-ansi-cjs": "npm:strip-ansi@^6.0.1",
"string-width": "^4.2.3",
"string-width-cjs": "npm:string-width@^4.2.3",
"wrap-ansi": "^7.0.0",
"wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0"

It's important to note for future reference that, as Swar did for strip-ansi and string-width in her recent dependency fix PR, it's important that the versions we are resolving to are the most recent major versions of these dependencies that still use CommonJS - resolving to an ESM version can cause issues like s.stringWidth is not a function since some dependencies still use CommonJS, and CommonJS modules cannot import ESM modules.

Unfortunately, after this change, serving using nx gave this error:

Failed to process project dependencies with "nx-js-graph-plugin".

Target project does not exist: npm:string-width-cjs@npm:string-width@^4.2.0

This is due to an issue with older versions of Nx that just surfaced after having to add resolutions for the package aliases. As a result, I had to upgrade Nx - pretty much all the other changes in this PR were auto-generated from running the migration script (as well as a few manual changes). To make sure our Vite version was compatible with the new Nx version, I had to remove the Vite resolution we had, which required updating the Vite config to make sure the frontend serve would still work on the new version of Vite.

✔️ Verification

• Current state of PR: Runs locally and passes CI (this isn't new)
• Made a commit that I later reverted to try adding a new dependency (the same one that Justin added in his strict mode PR that failed CI) - verified that this both runs locally and passes CI!

🏕️ (Optional) Future Work / Notes

Direct usage of fetch in the frontend, which there was a ticket last semester to remove in favor of using the ApiClient, now tries to make requests to the frontend rather than the backend (haven't looked into why, but I'd say this is a good thing for making sure it can't sneak back in!). This has broken creating a food request, which still makes an API call using fetch. I'll fix this tomorrow before merging

[dburkhart07]

Waiting fix on the food request form but this looks good to me. tysmmmmm for looking into this. goated tl fr fr fr! 🙏 🧇

[maxn990]

works on my end, lgtm 🥳

[Yurika-Kan]

triple lgtm!