build(deps): updates client deps

package.json

@@ -59,7 +59,7 @@
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-modal": "3.16.3",
-    "react-router-dom": "6.27.0",
+    "react-router": "7.1.0",
     "react-transition-group": "4.4.5",
     "regenerator-runtime": "0.14.1",
     "screenfull": "5.2.0",
@@ -111,6 +111,7 @@
     "identity-obj-proxy": "3.0.0",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
+    "jest-fixed-jsdom": "0.0.9",
     "jest-junit": "16.0.0",
     "mini-css-extract-plugin": "2.9.2",
     "postcss": "8.4.49",
@@ -131,7 +132,7 @@
     "url-loader": "4.1.1",
     "webpack": "5.97.1",
     "webpack-bundle-analyzer": "4.10.2",
-    "webpack-cli": "6.0.0",
+    "webpack-cli": "6.0.1",
     "webpack-merge": "6.0.1",
     "workbox-webpack-plugin": "7.3.0"
   },
@@ -209,7 +210,7 @@
     "clearMocks": true,
     "resetMocks": true,
     "restoreMocks": true,
-    "testEnvironment": "<rootDir>/src/client/testUtils/fixJSDOMEnvironment.ts",
+    "testEnvironment": "jest-fixed-jsdom",
     "fakeTimers": {
       "enableGlobally": true
     }

src/client/App.tsx

@@ -1,10 +1,10 @@
 import type { RootState } from './configuration/ReduxStore'
 import type { ReactElement } from 'react'
-import type { Router } from '@remix-run/router'
-import type { Store } from '@reduxjs/toolkit'
 import { useEffect } from 'react'
+import type { Store } from '@reduxjs/toolkit'
+import type { createBrowserRouter } from 'react-router'
+import { RouterProvider } from 'react-router'
 import { Provider } from 'react-redux'
-import { RouterProvider } from 'react-router-dom'
 import { UnhandledError } from './UnhandledError'
 import Modal from 'react-modal'
 import { QueryClientProvider } from '@tanstack/react-query'
@@ -13,7 +13,7 @@ import { queryClient } from './queryClient'
 interface AppProps {
   readonly appElement: string
   readonly store: Store<RootState>
-  readonly router: Router
+  readonly router: ReturnType<typeof createBrowserRouter>
 }
 
 export function App({ appElement, store, router }: AppProps): ReactElement {

src/client/AppRoutes.tsx

@@ -1,5 +1,4 @@
-import type { Router } from '@remix-run/router'
-import { createBrowserRouter, Navigate } from 'react-router-dom'
+import { createBrowserRouter, Navigate } from 'react-router'
 import { Settings } from './settings/Settings'
 import { TrackingPage } from './settings/tracking/TrackingPage'
 import { FeedPage } from './settings/tracking/FeedPage'
@@ -35,7 +34,7 @@ export enum RoutePaths {
   trackingProjects = '/settings/tracking/:id/projects',
 }
 
-export function appRoutes(): Router {
+export function appRoutes() {
   return createBrowserRouter([
     {
       element: <Nevergreen />,

src/client/NavigationShortcutsHook.ts

@@ -1,11 +1,14 @@
 import { useShortcut } from './common/Keyboard'
-import { useNavigate } from 'react-router-dom'
+import { useNavigate } from 'react-router'
 import { RoutePaths } from './AppRoutes'
 
-export function useNavigationShortcut(keys: string | string[], route: string) {
+export function useNavigationShortcut(
+  keys: string | string[],
+  route: string,
+): void {
   const navigate = useNavigate()
   useShortcut(keys, () => {
-    navigate(route, { replace: true })
+    void navigate(route, { replace: true })
   }, [route, navigate])
 }
 

src/client/Nevergreen.tsx

@@ -18,7 +18,7 @@ import {
 import { useShortcut } from './common/Keyboard'
 import { useCheckForNewVersion } from './CheckForNewVersionHook'
 import { useNavigationShortcuts } from './NavigationShortcutsHook'
-import { Outlet, useOutletContext } from 'react-router-dom'
+import { Outlet, useOutletContext } from 'react-router'
 import { useAppSelector } from './configuration/Hooks'
 import styles from './nevergreen.scss'
 import { PrimaryButton } from './common/forms/Button'

src/client/common/LinkButton.tsx

@@ -1,5 +1,5 @@
 import type { ReactElement } from 'react'
-import { Link, LinkProps } from 'react-router-dom'
+import { Link, LinkProps } from 'react-router'
 import cn from 'classnames'
 import styles from './link-button.scss'
 

src/client/common/forms/Form.tsx

@@ -8,7 +8,7 @@ import { PrimaryButton, SecondaryButton } from './Button'
 import { FormErrors } from './Validation'
 import { ErrorMessages, SuccessMessages } from '../Messages'
 import { errorMessage } from '../Utils'
-import { useNavigate } from 'react-router-dom'
+import { useNavigate } from 'react-router'
 import { LinkButton } from '../LinkButton'
 import { Checkmark } from '../icons/Checkmark'
 import { Cross } from '../icons/Cross'
@@ -68,7 +68,7 @@ export function Form<Fields extends string>({
 
   useEffect(() => {
     if (data?.navigateTo) {
-      navigate(data.navigateTo)
+      void navigate(data.navigateTo)
     }
   }, [data, navigate])
 

src/client/footer/Footer.tsx

@@ -4,7 +4,7 @@ import version from '../../../resources/version.txt'
 import versionMeta from '../../../resources/version_meta.txt'
 import versionName from '../../../resources/version_name.txt'
 import { SubmitAnIssue } from './SubmitAnIssue'
-import { Link } from 'react-router-dom'
+import { Link } from 'react-router'
 import { RoutePaths } from '../AppRoutes'
 import styles from './footer.scss'
 

src/client/header/Header.tsx

@@ -5,7 +5,7 @@ import { triggerShortcut } from '../common/Keyboard'
 import { Display } from '../common/icons/Display'
 import { Question } from '../common/icons/Question'
 import { Cog } from '../common/icons/Cog'
-import { NavLink } from 'react-router-dom'
+import { NavLink } from 'react-router'
 import styles from './header.scss'
 
 interface HeaderProps {

src/client/help/HelpArticle.tsx

@@ -1,6 +1,6 @@
 import type { ReactElement, ReactNode } from 'react'
 import { useEffect, useState } from 'react'
-import { useMatch } from 'react-router-dom'
+import { useMatch } from 'react-router'
 import { matchSorter } from 'match-sorter'
 import { isBlank } from '../common/Utils'
 import isNil from 'lodash/isNil'

src/client/settings/Preview.tsx

@@ -9,7 +9,7 @@ import { Loading } from '../common/Loading'
 import { getSort } from './display/DisplaySettingsReducer'
 import { post } from '../gateways/Gateway'
 import { Banner } from '../Banner'
-import { useNavigate } from 'react-router-dom'
+import { useNavigate } from 'react-router'
 import { useQuery } from '@tanstack/react-query'
 import { RoutePaths } from '../AppRoutes'
 import { createId } from '../common/Utils'
@@ -70,7 +70,7 @@ export function Preview(): ReactElement {
         message="This is a preview showing your current display settings"
         hide={false}
         onDismiss={() => {
-          navigate(RoutePaths.display)
+          void navigate(RoutePaths.display)
         }}
       />
       <div className={styles.projects}>

src/client/settings/Settings.tsx

@@ -1,6 +1,6 @@
 import type { ReactElement } from 'react'
 import cn from 'classnames'
-import { NavLink, Outlet, useNavigation } from 'react-router-dom'
+import { NavLink, Outlet, useNavigation } from 'react-router'
 import { List } from '../common/icons/List'
 import { Display } from '../common/icons/Display'
 import { Bell } from '../common/icons/Bell'

src/client/settings/backup/AddBackupPage.tsx

@@ -19,7 +19,7 @@ import { RoutePaths } from '../../AppRoutes'
 import { useAppDispatch } from '../../configuration/Hooks'
 import { addBackupLocation } from './RemoteLocationsActions'
 import styles from './add-backup.scss'
-import { generatePath } from 'react-router-dom'
+import { generatePath } from 'react-router'
 
 type Fields = 'url' | 'accessToken'
 

src/client/settings/backup/RemoteLocationPage.tsx

@@ -1,7 +1,7 @@
 import type { ReactElement } from 'react'
 import type { RemoteLocation } from './RemoteLocationsReducer'
 import { getBackupLocation } from './RemoteLocationsReducer'
-import { Outlet, useOutletContext, useParams } from 'react-router-dom'
+import { Outlet, useOutletContext, useParams } from 'react-router'
 import { Navigate } from 'react-router'
 import { RoutePaths } from '../../AppRoutes'
 import { useAppSelector } from '../../configuration/Hooks'

src/client/settings/display/DisplaySettingsPage.tsx

@@ -24,7 +24,7 @@ import { Display } from '../../common/icons/Display'
 import { RoutePaths } from '../../AppRoutes'
 import { useAppDispatch, useAppSelector } from '../../configuration/Hooks'
 import styles from './display-settings-page.scss'
-import { Link } from 'react-router-dom'
+import { Link } from 'react-router'
 
 const projectsToShowOptions = [
   { value: MaxProjectsToShow.small, display: 'Small' },

src/client/settings/notifications/NotificationSettingsPage.tsx

@@ -20,7 +20,7 @@ import testAudio from './test_audio_volume.mp3'
 import { playAudio } from '../../common/AudioPlayer'
 import { Note } from '../../common/icons/Note'
 import styles from './notifications-settings.scss'
-import { Link } from 'react-router-dom'
+import { Link } from 'react-router'
 import { RoutePaths } from '../../AppRoutes'
 
 export function NotificationSettingsPage(): ReactElement {

src/client/settings/prognosis/PrognosisSettingsPage.tsx

@@ -12,7 +12,7 @@ import { CardHeading } from '../../common/card/CardHeading'
 import { IconPrognosis } from '../../common/icons/prognosis/IconPrognosis'
 import { Summary } from '../../common/Summary'
 import { LinkButton } from '../../common/LinkButton'
-import { generatePath } from 'react-router-dom'
+import { generatePath } from 'react-router'
 import { RoutePaths } from '../../AppRoutes'
 import { Cog } from '../../common/icons/Cog'
 import { VisuallyHidden } from '../../common/VisuallyHidden'

src/client/settings/tracking/AddFeedPage.test.tsx

@@ -1,3 +1,4 @@
+import type { UserEvent } from '@testing-library/user-event'
 import { AddFeedPage } from './AddFeedPage'
 import { screen, waitFor } from '@testing-library/react'
 import * as SecurityGateway from '../../gateways/SecurityGateway'
@@ -6,7 +7,6 @@ import { AuthTypes, feedsRoot, getFeeds } from './FeedsReducer'
 import { render, waitForLocationToChange } from '../../testUtils/testHelpers'
 import { buildFeed } from '../../testUtils/builders'
 import * as Utils from '../../common/Utils'
-import { UserEvent } from '@testing-library/user-event/setup/setup'
 
 beforeEach(() => {
   jest.spyOn(SecurityGateway, 'encrypt').mockResolvedValue('')

src/client/settings/tracking/FeedCard.tsx

@@ -13,7 +13,7 @@ import { Cog } from '../../common/icons/Cog'
 import { LinkButton } from '../../common/LinkButton'
 import { CheckboxChecked } from '../../common/icons/CheckboxChecked'
 import { VisuallyHidden } from '../../common/VisuallyHidden'
-import { generatePath } from 'react-router-dom'
+import { generatePath } from 'react-router'
 import { RoutePaths } from '../../AppRoutes'
 import { getSelectedProjectsForFeed } from './SelectedReducer'
 

src/client/settings/tracking/FeedPage.tsx

@@ -1,7 +1,7 @@
 import type { ReactElement } from 'react'
 import type { Feed } from './FeedsReducer'
 import { getFeed } from './FeedsReducer'
-import { Navigate, Outlet, useOutletContext, useParams } from 'react-router-dom'
+import { Navigate, Outlet, useOutletContext, useParams } from 'react-router'
 import { RoutePaths } from '../../AppRoutes'
 import { useAppSelector } from '../../configuration/Hooks'
 

src/client/settings/tracking/settings/UpdateConnectionPage.test.tsx

@@ -1,3 +1,4 @@
+import type { UserEvent } from '@testing-library/user-event'
 import { screen, waitFor } from '@testing-library/react'
 import { render, waitForLocationToChange } from '../../../testUtils/testHelpers'
 import { buildFeed } from '../../../testUtils/builders'
@@ -6,7 +7,6 @@ import * as SecurityGateway from '../../../gateways/SecurityGateway'
 import * as ProjectsGateway from '../../../gateways/ProjectsGateway'
 import { UpdateConnectionPage } from './UpdateConnectionPage'
 import { KeepExistingAuth, UpdateExistingAuthTypes } from '../ConnectionForm'
-import { UserEvent } from '@testing-library/user-event/setup/setup'
 
 beforeEach(() => {
   jest.spyOn(SecurityGateway, 'encrypt').mockResolvedValue('')

src/client/testUtils/testHelpers.tsx

@@ -25,14 +25,14 @@ import type { SuccessState } from '../settings/success/SuccessReducer'
 import { successRoot } from '../settings/success/SuccessReducer'
 import type { FeedsState } from '../settings/tracking/FeedsReducer'
 import { feedsRoot } from '../settings/tracking/FeedsReducer'
-import { createBrowserRouter, Outlet } from 'react-router-dom'
+import { createBrowserRouter, Outlet } from 'react-router'
 import type { AppliedMigrationsState } from '../configuration/MigrationsReducer'
 import { migrationsRoot } from '../configuration/MigrationsReducer'
 import { parseISO } from 'date-fns/parseISO'
 import type { RemoteLocationsState } from '../settings/backup/RemoteLocationsReducer'
 import { remoteLocationsRoot } from '../settings/backup/RemoteLocationsReducer'
 import userEvent from '@testing-library/user-event'
-import type { UserEvent } from '@testing-library/user-event/setup/setup'
+import type { UserEvent } from '@testing-library/user-event'
 import { buildState } from './builders'
 import { App } from '../App'
 import type { NotificationsState } from '../settings/notifications/NotificationsReducer'

tsconfig.json

@@ -3,7 +3,7 @@
     "target": "esnext",
     "module": "esnext",
     "jsx": "preserve",
-    "moduleResolution": "node",
+    "moduleResolution": "Bundler",
     "allowJs": true,
     "noEmit": true,
     "strict": true,