Skip to content

Conversation

dmacvicar
Copy link
Contributor

Summary

react-scripts is deprecated and its dependencies are a source of vulnerabilities. This PR moves the build to a pure esbuild more in line with other projects. After this change, npm audit goes from 29 vulnerabilities to just 2.

  • replace react-scripts with a custom esbuild toolchain aligned with the other UI projects
  • add ui/scripts/esbuild.{common,build,dev}.mjs to drive production builds and the dev server, copying
    public/ assets into build/
  • wire npm scripts (dev, build, typecheck, test) and Makefile hot-reload target to the new workflow; drop CRA presets from package.json
  • keep Docker packaging unchanged by continuing to emit ui/build/, and add the missing uuid dependency so esbuild can bundle configuration helpers
  • regenerate package-lock.json after the dependency churn; no CRA files remain

Tested:

  • Smoke test with Docker Desktop
  • Hot reload setting EXTRA_CORS_ALLOWED_ORIGINS in the configuration
  • Verified bundled size

Caveats / Follow-ups

  • npm run typecheck now fails on existing MUI component prop typings (ConfirmableButton, Menu). CRA never surfaced these; we should either adjust the types or downgrade the checks before gating CI.

Disclaimer: Codex agent helped heavily here

react-scripts is deprecated and its dependencies are a source of vulnerabilties.

This moves the build to a pure esbuild more in line with other projects.
Copy link
Collaborator

@Pive01 Pive01 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

To work it works as I could build the image and install it in docker desktop successfully.
I've left a few comments on things that I don't think we actually need but didn't verify all the packages changes one by one, which is where I trust your judgment. Let me know if you want me to go over the comments and address them or you wish to do it yourself :)

"esbuild": "^0.19.12",
"esbuild-plugin-clean": "^1.0.1",
"esbuild-plugin-svgr": "^1.0.0",
"eslint": "^8.57.0",
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seems like this eslint version is not compatible with the TS version we are using

Comment on lines 28 to +55
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
"airbnb",
"airbnb/hooks",
"plugin:@typescript-eslint/recommended",
"plugin:jsx-a11y/recommended",
"plugin:react/jsx-runtime",
"prettier"
],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"sourceType": "module",
"ecmaVersion": "latest",
"project": "./tsconfig.json"
},
"plugins": [
"@typescript-eslint"
],
"settings": {
"import/resolver": {
"node": {
"extensions": [
".js",
".jsx",
".ts",
".tsx"
]
},
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

II'm pretty sure most of these are not needed as we already specify in the .eslintrc.js file

"@typescript-eslint/eslint-plugin": "^5.38.1",
"eslint": "^8.24.0",
"@esbuild-plugins/node-modules-polyfill": "^0.1.4",
"@playwright/test": "^1.38.0",
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we want to add this? Given there are no tests atm

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants