Skip to content

Upgrade react-scripts 3.0.1 to 5.x so the frontend builds on a current Node #18

Open

Description

@lgnap

Contexte

The frontend is built by react-scripts 3.0.1 (2019), i.e. webpack 4 and jest 24. That single pin is what keeps three other things stuck:

This is the item #3 called "coupled with Node, cannot be done separately". It is its own ticket because it is a migration, not a bump.

Description

Move to react-scripts 5.0.1 (the last CRA release; webpack 5, jest 27, eslint 8), keep React 16.8 (CRA 5 supports it — a React upgrade is not part of this), then bump Node to 20 LTS in web-ui/pom.xml and ci.yml in the same PR, since that is the point. Remove the marked UMD wart once jest can load the .cjs main.

Fichiers concernes

Plan d'implementation

  1. Branch from master, bump react-scripts alone, run yarn install && yarn test && yarn build under Node 20. Do not touch anything else until the breakage is known.
  2. Expected breakage, in probable order — each one either fixed or ruled out in the PR description:
    • Node core polyfills: webpack 5 no longer shims buffer, stream, process. jszip, sockjs-client and vertx3-eventbus-client are the candidates; fix by adding the polyfill packages only for what actually fails, not blanket resolve.fallback (CRA 5 has no config file, so a failing import surfaces as a build error naming the module).
    • jest 27: testEnvironment defaults change — CRA 5 keeps jsdom, but the window.localStorage redefinition in storage.test.js (Keep the frontend up when storage, a dropped payload or an uploaded archive misbehaves antoinevalentinHA/studio#63) and the react-dom rendering in ErrorBoundary.test.js need re-checking under the newer jsdom.
    • eslint 8 / react-app config: new rules become warnings, and CI=true turns warnings into build failures. Fix the code, do not disable rules.
    • @projectstorm/react-diagrams 6.0.1-beta.6, @emotion 10, mathjs 6: old but pure JS; expected to survive, to be verified.
    • browserslist: run the update-browserslist script already in package.json.
  3. Node 20 in the pom and CI; full mvn package locally so the frontend-maven-plugin path (download + install + build) is exercised, which the PR workflow skips on purpose.
  4. Restore import { marked } from 'marked' in html.js and delete the comment that explains the wart.
  5. git diff --exit-code after the build: a regenerated yarn.lock is committed on purpose, nothing else may move.
  6. Close Bump pinned Node 12 (EOL) to a current LTS in pom.xml and CI #15 from the PR; note in Dependencies frozen since 2019-2020, no update visibility #3 what is left (Vert.x, Gson).

Criteres d'acceptation

  • react-scripts 5.x, React still 16.x
  • web-ui/pom.xml and ci.yml on the same Node 20 LTS; no --openssl-legacy-provider anywhere
  • yarn test green (same 67 tests or more), yarn build green under CI=true
  • mvn package produces a working bundle, verified by launching it once
  • marked imported by name again
  • Every breakage from step 2 listed in the PR as fixed or ruled out
  • CI green on Ubuntu and Windows, plus the Web UI job

Complexite

M. Mechanical if the polyfill list is short, a day if react-diagrams beta fights back. Not to be split: half-migrated is worse than either state.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions