Skip to content

Upgrade to React 18 and react-router-dom 7 - #334

Draft
rthaut wants to merge 1 commit into
masterfrom
react-18-router-7
Draft

rthaut wants to merge 1 commit into
masterfrom
react-18-router-7

Conversation

@rthaut

@rthaut rthaut commented Oct 13, 2026 •

Copy link
Copy Markdown
Owner

Clears the open react-router Dependabot alerts (#134, #136), which are fixed in react-router 7.18.0. react-router-dom 7 requires React 18 or later, so this also moves React and react-dom from 17 to 18. That's why this can't be a router-only change.

Changes:

  • react 17.0.2 -> 18.3.1, react-dom 17.0.2 -> 18.3.1. Supersedes Bump react-dom from 17.0.2 to 18.3.1 #329 (Dependabot only bumped react-dom, which would leave react on 17).
  • react-router-dom 6.30.6 -> 7.18.4 (react-router 7.18.4).
  • manage.jsx and create-filters.jsx use createRoot from react-dom/client instead of ReactDOM.render, which React 18 deprecates.

The router code didn't need changes. The app only uses HashRouter, Routes, Route, NavLink, and useLocation, and those work the same in v7. It still imports from react-router-dom, which v7 keeps as a re-export of react-router.

The rest of the UI stack (MUI 5, @material-table/core 6.2, notistack 2, material-ui-confirm 3, react-dropzone 14) already supports React 18, so it stays as is. The uuid alert (#121) needs @material-table/core 8 and React 19. That's in the stacked follow-up, #335.

Checks

  • npm test passes: lint (same 2 existing unused-directive warnings in menus.js), unit tests (2/2), Chrome/Edge/Firefox builds, manifest smoke test, zips, and web-ext lint (0 errors).
  • npm ls reports no invalid or missing peer dependencies.
  • Smoke test of the built .output/chrome-mv3 loaded as an unpacked extension in Playwright Chromium. 14/14 checks passed:
    • The dashboard renders.
    • The sidebar goes to #/users, #/keywords, and back to #/, and a deep link to #/keywords renders.
    • User filters: adding smoke-test-user shows the row, updates the count, and writes to storage.local. An invalid name (bad name!) shows the pattern hint and isn't stored. Deleting the row removes it from storage.
    • Keyword filters: adding a keyword shows the row and stores it.
    • Importing a JSON file through the dropzone input works.
    • The dark mode switch changes the theme.
    • create-filters.html renders its dialog.
    • Neither page logged a console error, console warning, or page error.
  • I also ran the same smoke test against a development-mode build. The only console output was library dev warnings: defaultProps deprecation warnings from @material-table/core 6 under React 18.3, and an MUI anchorEl warning. Both go away in Upgrade to React 19, MUI 9, and @material-table/core 8 #335.

Manual test list

  • Load the Chrome build and the Firefox build. Open the management page and click through Dashboard, User Filters, and Keyword Filters.
  • Add, edit, and delete a user filter and a keyword filter, including the wildcard toggle. Check that "delete all" asks for confirmation.
  • Import a filters JSON file on the dashboard, and export the filters.
  • On deviantart.com, use the context menu to create filters from a deviation, and check that the modal opens and creates them.
  • Toggle dark mode, then reload the page and check that the setting is kept.

react-router-dom 7 needs React 18 or later, so both move together.
The entry points switch from ReactDOM.render to createRoot.

This branch has not been deployed

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant