> ## Documentation Index > Fetch the complete documentation index at: https://docs.equa.cc/llms.txt > Use this file to discover all available pages before exploring further. # Phase 1: Frontend Ecosystem Upgrade > React 18, TypeScript 5.3, modern test toolchain, CI pipeline rebuild, and bundle optimization — March 2026 # Phase 1: Frontend Ecosystem Upgrade > **Completed:** March 29, 2026 | **PRs:** #465, #493, #495, #496, #501, #504, #506, #507, #508, #509, #510 > **Scope:** `equa-web` repository | **Branch:** `staging` ## Overview Phase 1 modernized the equa-web frontend from a 2019-era toolchain to current ecosystem standards, unblocking the Turborepo monorepo consolidation and React 18 concurrent features. The upgrade was executed as 11 focused PRs over two sessions, each independently tested and merged. *** ## Core Upgrades ### React 16 to 18 (PR #506) The single largest prerequisite for monorepo consolidation. Entry point migrated from `ReactDOM.render()` to `createRoot()` from `react-dom/client`. | Package | Before | After | | ------------------ | -------- | ------- | | `react` | ^16.11.0 | ^18.2.0 | | `react-dom` | ^16.11.0 | ^18.2.0 | | `@types/react` | ^16.x | ^18.2.0 | | `@types/react-dom` | ^16.x | ^18.2.0 | ### TypeScript 3.7 to 5.3 (PR #465) Enabled modern type features including template literal types, `satisfies` operator, and improved type narrowing. ### Ecosystem Libraries (PR #508) | Package | Before | After | Why | | -------------------------------- | ------- | ------- | ------------------------------------- | | `styled-components` | ^4.2.0 | ^6.1.0 | React 18 compat, new SSR architecture | | `babel-plugin-styled-components` | ^1.10.6 | ^2.1.4 | Required by styled-components 6 | | `@types/styled-components` | 4.1.8 | ^5.1.26 | Type alignment | | `react-redux` | 7.2.6 | ^8.1.0 | React 18 `useSyncExternalStore` | | `react-select` | ^3.0.4 | ^5.8.0 | React 18 compat | | `react-datepicker` | ^2.10.1 | ^4.25.0 | React 18 compat | | `@testing-library/react` | ^12.1.5 | ^14.0.0 | React 18 `createRoot` testing | ### Build Toolchain (PR #465) | Package | Before | After | | ------------------------ | ------------------------------------------------- | ------------------------------------------- | | TypeScript | 3.7.5 | ^5.3.3 | | Jest | 26 | 29 | | Babel (all packages) | pinned to pre-7.12.0 (110-line resolutions block) | ^7.24.0 (resolutions removed) | | `connected-react-router` | 6.3.2 | Replaced with `redux-first-history` | | `react-recaptcha-google` | legacy | Replaced with `react-google-recaptcha` | | Enzyme | 3.10 | Removed (migrated to React Testing Library) | **Not upgraded (intentionally):** * `react-router` stays at v5 (v6 is a separate initiative) * `react-pdf` stays at v5 (v7 requires ESM, deferred to Phase 2 Vite migration) *** ## Security Fixes ### reCAPTCHA Test Key Removal (PR #493) Removed Google's hardcoded reCAPTCHA test site key (`6LeIxAcT...`) from webpack `DefinePlugin` fallback. `CAPTCHA_SITE_KEY` now requires explicit env var configuration. ### Registration Crash Fix (PR #496) Added early return guard in registration `onSubmit` when required fields are missing (Enter key could bypass the disabled button). Removed raw JS error stack trace rendering from `AppErrorBoundary`. ### Logout Navigation Fix (PR #495) Replaced `withRouter` (which doesn't inject `navigate`) with `withNavigation` wrapper, fixing the blank page on logout. *** ## Infrastructure ### Docker Build Fix (PR #501) Fixed Railway builds failing with `node_modules/.bin/webpack: not found`. Root cause: `yarn install` silently fails to fetch `equa-patternlib` without `GH_PATTERNLIB_TOKEN`, leaving a corrupt `node_modules`. Fix: switched to `npx webpack`, added post-install binary verification, documented `GH_PATTERNLIB_TOKEN` as required. ### Azure Pipelines Removal (PR #507) Removed `azure-pipelines.yml` — a legacy config from the Node 10 / Windows VM era targeting branches (`mvp`, `mvp-staging`, `mvp-prod`) that no longer exist. ### CI Pipeline Rebuild (PR #507, #509) Replaced the 2-job CI (E2E + regression) with a 5-stage tiered pipeline: ``` 1. Lint & Build (ESLint + webpack production build) 2. Unit Tests (Jest 29 + React Testing Library — 52 tests) 3. E2E Smoke (Playwright) 4. Regression Tests 5. Visual Regression Tests (screenshot comparison) ``` ### Bundle Optimization (PR #510) Added granular async vendor chunk splitting and compressed the login background image: | Optimization | Savings | | --------------------------------- | ------------------------------------------ | | pixi.js moved to async chunk | -629 KB from initial load | | Crypto libs moved to async chunk | -18 KB from initial load | | Login background image compressed | -1.84 MB (1.93 MB to 93 KB, 95% reduction) | | **Total initial load reduction** | **\~2.5 MB** | *** ## Bug Fixes ### Organization Create/Edit (PR #504) Wrapped `createOrganization` + address creation in try-catch. Replaced `forEach` with async callback (fire-and-forget) with `for...of` (properly awaited sequential execution). Addresses were silently failing to save. *** ## Verification All PRs passed the same gate before merge: | Check | Result | | ------------------------ | ---------- | | Webpack production build | Pass | | ESLint | 0 errors | | Jest unit tests | 52/52 pass | | Playwright E2E | Pass | *** ## What's Next ### Phase 1 PR 3 (Pending) Deprecated pattern cleanup — 19 remaining issues from the Phase 1 QA audit including legacy lifecycle methods, class component migrations, and deprecated API usage. ### Phase 2 (Planned) * Webpack to Vite migration * `react-pdf` v5 to v7 (ESM) * `react-router` v5 to v6 * Turborepo monorepo consolidation with `equa-patternlib-nextjs`