Deprecated middleware options

[imnasnainaec]

After starting the frontend in development, a DeprecationWarning briefly appears before being quickly replaced by "Starting the development server...":

(node:78963) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
(Use `node --trace-deprecation ...` to show where the warning was created)
(node:78963) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.

[imnasnainaec]

Related webpack/react-scripts config issue : facebook/create-react-app#11862

[imnasnainaec]

It looks like we need to migrate away from create-react-app/react-scripts: https://www.freecodecamp.org/news/how-to-migrate-from-create-react-app-to-vite/ (...but we should be careful about moving to Vite, which doesn't play well with Jest: https://jestjs.io/docs/getting-started#using-vite)

[imnasnainaec]

A few helpful comparisons:

• https://moiva.io/?npm=@parcel/core+vite
• https://www.linkedin.com/pulse/comprehensive-comparison-webpack-parcel-vite-which
• https://blog.anoopjadhav.in/why-i-switched-from-parcel-to-vite

Vite seems to be the fastest and most popular, but may present difficulties with configuration, jest, and environment variables. If Parcel can handle our bundling needs (specifically with our dictionary files), then it may be the simplest to use and maintain.

[imnasnainaec]

Used react-scripts eject: master...eject

[imnasnainaec]

Trying Parcel: master...parcel

[imnasnainaec]

Trying Parcel atop the eject: eject...eject-parcel

[imnasnainaec]

Parcel + Jest WIP: eject...eject-parcel-jest

As of 3de9d73, the build was twice as fast as master, but also twice as large:

• master: 24MB (one 5MB and the rest under 1MB); vs.
• eject-parcel-jest: 42MB (two 9MB, one 2MB, and the rest under 1MB).
  And the jest tests are about 50% slower than on master.

[imnasnainaec]

Parcel (with i18n files copied over as static files) + Jest (using Babel): master...parcel-babel-jest