Skip to content

Bump frontend deps to latest major: React 19, MUI 9, react-router 8 #4348

Description

@imnasnainaec

Major-version bump for the frontend dependencies that can move together. Verified with a real
npm install --package-lock-only --prefer-dedupe resolution (no --force, no --legacy-peer-deps): the set below
installs cleanly with a single deduped copy of react / @mui / i18next in the tree.

Versions to bump together

  • react 18.3.1 → 19.2.8
  • react-dom 18.3.1 → 19.2.8
  • @types/react 18.3.31 → 19.2.17
  • @types/react-dom 18.3.7 → 19.2.3
  • @mui/material 6.5.0 → 9.2.0
  • @mui/icons-material 6.4.12 → 9.2.0
  • @mui/x-date-pickers 7.29.4 → 9.10.1
  • react-router 7.18.1 → 8.3.0
  • react-toastify 9.1.3 → 11.1.0
  • i18next 25.10.10 → 26.3.6
  • react-i18next 16.6.6 → 17.0.11 (requires i18next >= 26.2.0, so these two move in lockstep)
  • i18next-http-backend 3.0.6 → 4.0.0
  • @microsoft/signalr 9.0.6 → 10.0.0
  • @redux-devtools/extension 3.3.0 → 4.0.0
  • @testing-library/jest-dom 6.9.1 → 7.0.0
  • globals 16.5.0 → 17.8.0

Also in scope:

  • volta.node 22.17.0 → latest 22.x — react-router@8.3.0 has engines: node >=22.22.0 and currently emits
    EBADENGINE. (CI is unaffected; frontend.yml uses node-version: [22].)
  • @loadable/component ~5.16.4~5.16.7 — 5.16.4 peers only react ^16.3 || ^17 || ^18; 5.16.7 adds ^19. The
    ~ range already picks it up, so pin it deliberately rather than by accident.
  • Add @mui/system ~9.2.0 as an explicit dependency — it is imported in 2 source files but not declared, and
    @mui/x-date-pickers@9 lists it as a required (non-optional) peer.

Code changes required

  • Grid2Grid — MUI v9 exports Grid only; there is no Grid2 and no GridLegacy. 45 files,
    255 occurrences.
  • PickersDayPickerDay, PickersDayPropsPickerDayProps — renamed in @mui/x-date-pickers v9
    (package/PickersDay/package/PickerDay/). Mainly
    src/components/ProjectSettings/ProjectSchedule/ProjectPickersDay.tsx and its consumers (19 refs).
  • react-toastify CSS import path — v11 ships only dist/ReactToastify.css; there is no .min.css.
    src/components/Toast/UpperRightToastContainer.tsx:4 imports react-toastify/dist/ReactToastify.min.css,
    which will break the build. Change to react-toastify/ReactToastify.css.
  • JSX.ElementReactElement@types/react@19 removes the global JSX namespace.
    src/utilities/testingLibraryUtilities.tsx:35.
  • Component.defaultProps — removed for function components in React 19.
    src/i18n/tests/reactI18nextMock.ts:14.
  • Smoke-test material-react-table against MUI 9. Its peer range (@mui/material >=6) is satisfied, but
    MRT 3.2.1 is built and tested against MUI v6. Its bundle only uses per-component subpaths plus
    @mui/material/styles and @mui/material/utils — no Grid/Grid2 — and all of those still exist in 9.2.0,
    so this is expected to work but is not covered by the peer graph.
  • Smoke-test mui-language-picker against MUI 9. Its package.json misspells the key as lowercase
    peerdependencies, so npm performs no peer check at all. It is built against @mui/material ^6.5.0 and
    its dist does require("@mui/material") plus require("@mui/material/{Button,Dialog,DialogActions, DialogContent,DialogContentText,DialogTitle,TextField}") and require("@mui/icons-material/{BorderColor, Clear,Info,Settings}"). MUI 9 still ships CJS, so the requires resolve — but nothing upstream has validated
    this component set against v9. Highest-uncertainty item here.
  • Typecheck fallout from @types/react@19 reaching @types/loadable__component, @types/react-modal, and
    @types/react-beautiful-dnd (each depends on @types/react: *).
  • npm run license-report-frontend

Verified as not needing changes

  • react-router v8 keeps every API in use — createBrowserRouter, RouterProvider, Routes, Route,
    MemoryRouter, Navigate, Outlet, useNavigate, useLocation, useParams, RouteObject.
  • Every other @mui/material root import survives v9: SxProps, Theme, ThemeProvider, createTheme,
    responsiveFontSizes, PaletteOptions, StyledEngineProvider, SelectChangeEvent, TextFieldProps,
    TypographyProps, PopoverOrigin, AutocompleteCloseReason. Only Grid2 is gone.
  • src/index.tsx already uses react-dom/client / createRoot, so there is no React 19 entry-point migration.

Deliberately excluded — blocked upstream

These do not resolve with the set above and each needs its own issue:

  • eslint 9.38.0 → 10.8.0eslint-plugin-react@7.37.5 (latest) peers eslint up to ^9.7, and
    eslint-plugin-import@2.32.0 (latest) peers up to ^9. Neither has an ESLint 10 release; both next dist-tags
    are older, not newer. The rest of the lint stack (typescript-eslint, eslint-plugin-react-hooks,
    eslint-plugin-unused-imports, eslint-import-resolver-typescript) already allows ^10. Way forward:
    eslint-plugin-importeslint-plugin-import-x@4.17.1, plus a decision on eslint-plugin-react (only
    react/jsx-boolean-value is used). Note globals@17 is not blocked by this and is included above.
  • typescript 5.9.3 → 7.0.2typescript-eslint peers typescript >=4.8.4 <6.1.0 on both latest and
    canary. Independently, tsc@7.0.2 run against our tsconfig.json fails on three removed options: baseUrl
    (TS5102), downlevelIteration (TS5102), and moduleResolution=node10 (TS5108). Dropping baseUrl means
    reworking the absolute imports to paths.
  • babel-plugin-transform-import-meta 2.3.3 → 3.0.0 — peers @babel/core ^8.0.1, which pulls in a full
    Babel 7 → 8 migration (preset-env, preset-react, preset-typescript,
    plugin-transform-private-property-in-object all to v8, all requiring node ^22.18.0 || >=24.11.0).
    @parcel/transformer-babel@2.16.4 declares no @babel/core dependency and Parcel's behaviour under Babel 8 is
    unvalidated.

Out of scope per request: @types/node, dotenv, dotenv-expand, ts-key-enum.

Metadata

Metadata

Assignees

No one assigned

    Labels

    dependenciesPull requests that update a dependency filefrontendjavascriptPull requests that update Javascript codemaintenanceIssue that makes it difficult to maintain the software or to upgrade installations post-release.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions