Repository navigation
Upgrade react-scripts 3.0.1 to 5.x so the frontend builds on a current Node #18
Copy link
Copy link
Open
Labels
enhancementNew feature or requestNew feature or request
Description
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:
- Bump pinned Node 12 (EOL) to a current LTS in pom.xml and CI #15 — Node cannot leave 12: webpack 4 hashes with MD4 through Node's
crypto, and OpenSSL 3 (Node ≥ 17) refuses it. Measured: Node 20 fails witherror:0308010C:digital envelope routines::unsupported, Node 16 builds but is EOL. Only webpack ≥ 5.61 fixes this, and only react-scripts 5 ships it. - Sanitize every HTML sink of the frontend, starting with the announce fetched from GitHub antoinevalentinHA/studio#58 —
markedhas to be imported asmarked/lib/marked.umd.jsbecause CRA 3's jest hands the.cjsmain to its catch-all file transform and refuses any config override without ejecting. - Dependencies frozen since 2019-2020, no update visibility #3 — the whole npm tree behind react-scripts 3 is 2019-era; Dependabot (Add Dependabot config for Maven, npm and GitHub Actions #14) will start proposing updates that a 2019 webpack cannot take.
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
web-ui/javascript/package.json,yarn.lock—react-scripts,markedimport back to'marked'insrc/utils/html.js(after Sanitize every HTML sink of the frontend, starting with the announce fetched from GitHub antoinevalentinHA/studio#58 is merged)web-ui/pom.xml:24-25—node.version→ v20.x LTS,yarn.version→ 1.22.x.github/workflows/ci.yml:82—node-version: '20'web-ui/javascript/src/**— whatever webpack 5 breaks (below)TESTING.md— the test-count row and the Node version, if either is stated
Plan d'implementation
- Branch from master, bump
react-scriptsalone, runyarn install && yarn test && yarn buildunder Node 20. Do not touch anything else until the breakage is known. - 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-clientandvertx3-eventbus-clientare the candidates; fix by adding the polyfill packages only for what actually fails, not blanketresolve.fallback(CRA 5 has no config file, so a failing import surfaces as a build error naming the module). - jest 27:
testEnvironmentdefaults change — CRA 5 keeps jsdom, but thewindow.localStorageredefinition instorage.test.js(Keep the frontend up when storage, a dropped payload or an uploaded archive misbehaves antoinevalentinHA/studio#63) and thereact-domrendering inErrorBoundary.test.jsneed re-checking under the newer jsdom. - eslint 8 /
react-appconfig: new rules become warnings, andCI=trueturns warnings into build failures. Fix the code, do not disable rules. @projectstorm/react-diagrams6.0.1-beta.6,@emotion10,mathjs6: old but pure JS; expected to survive, to be verified.browserslist: run theupdate-browserslistscript already inpackage.json.
- Node core polyfills: webpack 5 no longer shims
- Node 20 in the pom and CI; full
mvn packagelocally so the frontend-maven-plugin path (download + install + build) is exercised, which the PR workflow skips on purpose. - Restore
import { marked } from 'marked'inhtml.jsand delete the comment that explains the wart. git diff --exit-codeafter the build: a regeneratedyarn.lockis committed on purpose, nothing else may move.- 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-scripts5.x, React still 16.x -
web-ui/pom.xmlandci.ymlon the same Node 20 LTS; no--openssl-legacy-provideranywhere -
yarn testgreen (same 67 tests or more),yarn buildgreen underCI=true -
mvn packageproduces a working bundle, verified by launching it once -
markedimported 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.
Reactions are currently unavailable
Metadata
Metadata
Assignees
Labels
enhancementNew feature or requestNew feature or request
Activity