sillsdev / sillsdev/TheCombine

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

Open
#4,348 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

dependencies frontend javascript maintenance
Dominant language
TypeScript
Stars
22
Forks
10
Avg merge
2d 2h
Merged PRs (30d)
9

Description

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.

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the frontend dependency manifest and the listed migration points, especially ProjectPickersDay.tsx, UpperRightToastContainer.tsx, utilities/testingLibraryUtilities.tsx, and i18n/tests/reactI18nextMock.ts. Update the dependencies and references, then run the stated install resolution, typecheck, smoke tests for material-react-table and mui-language-picker, and npm run license-report-frontend; done means the build and checks pass without excluded upgrades.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
build-system, frontend, testing
Issue type
Refactor
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Clearly specified
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.