Bump React to v19.

apps/lockfile-explorer-web/package.json

@@ -12,19 +12,19 @@
     "_phase:test": "heft run --only test -- --clean"
   },
   "dependencies": {
-    "@reduxjs/toolkit": "~1.8.6",
+    "@reduxjs/toolkit": "~2.11.2",
     "@rushstack/rush-themed-ui": "workspace:*",
     "prism-react-renderer": "~2.4.1",
-    "react-dom": "~17.0.2",
-    "react-redux": "~8.0.4",
-    "react": "~17.0.2",
-    "redux": "~4.2.0",
+    "react-dom": "~19.2.3",
+    "react-redux": "~9.2.0",
+    "react": "~19.2.3",
+    "redux": "~5.0.1",
     "tslib": "~2.8.1"
   },
   "devDependencies": {
     "@rushstack/heft": "workspace:*",
-    "@types/react": "17.0.74",
-    "@types/react-dom": "17.0.25",
+    "@types/react": "19.2.7",
+    "@types/react-dom": "19.2.3",
     "eslint": "~9.37.0",
     "local-web-rig": "workspace:*",
     "typescript": "5.8.2"

apps/lockfile-explorer-web/src/App.tsx

@@ -18,7 +18,7 @@ import { ConnectionModal } from './components/ConnectionModal';
 /**
  * This React component renders the application page.
  */
-export const App = (): JSX.Element => {
+export const App = (): React.ReactElement => {
   const dispatch = useAppDispatch();
 
   useEffect(() => {

apps/lockfile-explorer-web/src/components/ConnectionModal/index.tsx

@@ -10,7 +10,7 @@ import appStyles from '../../App.scss';
 import { checkAliveAsync } from '../../helpers/lfxApiClient';
 import type { ReactNull } from '../../types/ReactNull';
 
-export const ConnectionModal = (): JSX.Element | ReactNull => {
+export const ConnectionModal = (): React.ReactElement | ReactNull => {
   const [isAlive, setIsAlive] = useState(true);
   const [checking, setChecking] = useState(false);
   const [manualChecked, setManualChecked] = useState(false);

apps/lockfile-explorer-web/src/containers/BookmarksSidebar/index.tsx

@@ -11,7 +11,7 @@ import { useAppDispatch, useAppSelector } from '../../store/hooks';
 import type { LfxGraphEntry } from '../../packlets/lfx-shared';
 import { clearStackAndPush, removeBookmark } from '../../store/slices/entrySlice';
 
-export const BookmarksSidebar = (): JSX.Element => {
+export const BookmarksSidebar = (): React.ReactElement => {
   const bookmarks = useAppSelector((state) => state.entry.bookmarkedEntries);
   const dispatch = useAppDispatch();
 

apps/lockfile-explorer-web/src/containers/LockfileEntryDetailsView/index.tsx

@@ -32,7 +32,7 @@ interface IInfluencerType {
   type: DependencyType;
 }
 
-export const LockfileEntryDetailsView = (): JSX.Element | ReactNull => {
+export const LockfileEntryDetailsView = (): React.ReactElement | ReactNull => {
   const selectedEntry = useAppSelector(selectCurrentEntry);
   const specChanges = useAppSelector((state) => state.workspace.specChanges);
   const dispatch = useAppDispatch();
@@ -67,12 +67,12 @@ export const LockfileEntryDetailsView = (): JSX.Element | ReactNull => {
   }, [selectedEntry]);
 
   const selectResolvedEntry = useCallback(
-    (dependencyToTrace) => () => {
+    (dependencyToTrace: LfxGraphDependency) => () => {
       if (inspectDependency && inspectDependency.entryId === dependencyToTrace.entryId) {
         if (dependencyToTrace.resolvedEntry) {
           dispatch(pushToStack(dependencyToTrace.resolvedEntry));
         } else {
-          logDiagnosticInfo('No resolved entry for dependency:', dependencyToTrace);
+          logDiagnosticInfo('No resolved entry for dependency:', dependencyToTrace.entryId);
         }
       } else if (selectedEntry) {
         // eslint-disable-next-line no-console
@@ -81,7 +81,7 @@ export const LockfileEntryDetailsView = (): JSX.Element | ReactNull => {
 
         // Check if we need to calculate influencers.
         // If the current dependencyToTrace is a peer dependency then we do
-        if (dependencyToTrace.dependencyType !== LfxDependencyKind.Peer) {
+        if (dependencyToTrace.dependencyKind !== LfxDependencyKind.Peer) {
           return;
         }
 
@@ -153,14 +153,14 @@ export const LockfileEntryDetailsView = (): JSX.Element | ReactNull => {
   );
 
   const selectResolvedReferencer = useCallback(
-    (referrer) => () => {
+    (referrer: LfxGraphEntry) => () => {
       dispatch(pushToStack(referrer));
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [selectedEntry]
   );
 
-  const renderDependencyMetadata = (): JSX.Element | ReactNull => {
+  const renderDependencyMetadata = (): React.ReactElement | ReactNull => {
     if (!inspectDependency) {
       return ReactNull;
     }
@@ -202,7 +202,7 @@ export const LockfileEntryDetailsView = (): JSX.Element | ReactNull => {
     );
   };
 
-  const renderPeerDependencies = (): JSX.Element | ReactNull => {
+  const renderPeerDependencies = (): React.ReactElement | ReactNull => {
     if (!selectedEntry) return ReactNull;
     const peerDeps = selectedEntry.dependencies.filter((d) => d.dependencyKind === LfxDependencyKind.Peer);
     if (!peerDeps.length) {

apps/lockfile-explorer-web/src/containers/LockfileViewer/index.tsx

@@ -22,11 +22,11 @@ interface ILockfileEntryGroup {
   versions: LfxGraphEntry[];
 }
 
-const LockfileEntryLi = ({ group }: { group: ILockfileEntryGroup }): JSX.Element => {
+const LockfileEntryLi = ({ group }: { group: ILockfileEntryGroup }): React.ReactElement => {
   const selectedEntry = useAppSelector(selectCurrentEntry);
   const activeFilters = useAppSelector((state) => state.entry.filters);
   const dispatch = useAppDispatch();
-  const fieldRef = useRef() as React.MutableRefObject<HTMLDivElement>;
+  const fieldRef = useRef<HTMLDivElement | null>(null);
   const clear = useCallback(
     (entry: LfxGraphEntry) => () => {
       dispatch(pushToStack(entry));
@@ -36,7 +36,7 @@ const LockfileEntryLi = ({ group }: { group: ILockfileEntryGroup }): JSX.Element
 
   useEffect(() => {
     if (selectedEntry && selectedEntry.entryPackageName === group.entryName) {
-      fieldRef.current.scrollIntoView({
+      fieldRef.current?.scrollIntoView({
         behavior: 'smooth'
       });
     }
@@ -91,7 +91,7 @@ const multipleVersions = (entries: LfxGraphEntry[]): boolean => {
   return false;
 };
 
-export const LockfileViewer = (): JSX.Element | ReactNull => {
+export const LockfileViewer = (): React.ReactElement | ReactNull => {
   const dispatch = useAppDispatch();
   const [projectFilter, setProjectFilter] = useState('');
   const [packageFilter, setPackageFilter] = useState('');

apps/lockfile-explorer-web/src/containers/LogoPanel/index.tsx

@@ -5,7 +5,7 @@ import React from 'react';
 
 import styles from './styles.scss';
 
-export const LogoPanel = (): JSX.Element => {
+export const LogoPanel = (): React.ReactElement => {
   // TODO: Add a mechanism to keep this in sync with the @rushstack/lockfile-explorer
   // package version.
   const appPackageVersion: string = window.appContext.appVersion;

apps/lockfile-explorer-web/src/containers/PackageJsonViewer/CodeBox.tsx

@@ -59,7 +59,7 @@ export type PrismLanguage =
   | 'json'
   | 'webmanifest';
 
-export const CodeBox = (props: { code: string; language: PrismLanguage }): JSX.Element => {
+export const CodeBox = (props: { code: string; language: PrismLanguage }): React.ReactElement => {
   return (
     <Highlight theme={themes.vsLight} code={props.code} language={props.language}>
       {({ className, style, tokens, getLineProps, getTokenProps }) => (

apps/lockfile-explorer-web/src/containers/PackageJsonViewer/index.tsx

@@ -23,7 +23,7 @@ const PackageView: { [key: string]: string } = {
   PARSED_PACKAGE_JSON: 'PARSED_PACKAGE_JSON'
 };
 
-export const PackageJsonViewer = (): JSX.Element => {
+export const PackageJsonViewer = (): React.ReactElement => {
   const dispatch = useAppDispatch();
   const [packageJSON, setPackageJSON] = useState<IPackageJson | undefined>(undefined);
   const [parsedPackageJSON, setParsedPackageJSON] = useState<IPackageJson | undefined>(undefined);
@@ -76,7 +76,7 @@ export const PackageJsonViewer = (): JSX.Element => {
   }, [dispatch, selectedEntry]);
 
   const renderDep =
-    (name: boolean): ((dependencyDetails: [string, string]) => JSX.Element) =>
+    (name: boolean): ((dependencyDetails: [string, string]) => React.ReactElement) =>
     (dependencyDetails) => {
       const [dep, version] = dependencyDetails;
       if (specChanges.has(dep)) {
@@ -155,7 +155,7 @@ export const PackageJsonViewer = (): JSX.Element => {
       }
     };
 
-  const renderFile = (): JSX.Element | null => {
+  const renderFile = (): React.ReactElement | null => {
     switch (selection) {
       case PackageView.PACKAGE_JSON:
         if (!packageJSON)

apps/lockfile-explorer-web/src/containers/SelectedEntryPreview/index.tsx

@@ -15,7 +15,7 @@ import {
   selectCurrentEntry
 } from '../../store/slices/entrySlice';
 
-export const SelectedEntryPreview = (): JSX.Element => {
+export const SelectedEntryPreview = (): React.ReactElement => {
   const selectedEntry = useAppSelector(selectCurrentEntry);
   const isBookmarked = useAppSelector((state) =>
     selectedEntry ? state.entry.bookmarkedEntries.includes(selectedEntry) : false
@@ -39,7 +39,7 @@ export const SelectedEntryPreview = (): JSX.Element => {
     dispatch(forwardStack());
   }, [dispatch]);
 
-  const renderButtonRow = (): JSX.Element => {
+  const renderButtonRow = (): React.ReactElement => {
     return (
       <div className={styles.NavigationButtonRow}>
         <Button disabled={entryStack.length <= 1} onClick={pop}>

apps/lockfile-explorer-web/src/start.tsx

@@ -2,17 +2,16 @@
 // See LICENSE in the project root for license information.
 
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+import * as ReactDOM from 'react-dom/client';
 import { Provider } from 'react-redux';
 
 import { App } from './App';
 import './start.css';
 import { store } from './store';
 
 const rootDiv: HTMLElement = document.getElementById('root') as HTMLElement;
-ReactDOM.render(
+ReactDOM.createRoot(rootDiv).render(
   <Provider store={store}>
     <App />
-  </Provider>,
-  rootDiv
+  </Provider>
 );

apps/lockfile-explorer-web/tsconfig.json

@@ -1,3 +1,8 @@
 {
-  "extends": "./node_modules/local-web-rig/profiles/app/tsconfig-base.json"
+  "extends": "./node_modules/local-web-rig/profiles/app/tsconfig-base.json",
+  "compilerOptions": {
+    // prism-react-renderer uses old React types that don't exist in the newer versions. Specifically,
+    // the `JSX` namespace
+    "skipLibCheck": true
+  }
 }

apps/lockfile-explorer/package.json

@@ -33,7 +33,7 @@
   "scripts": {
     "build": "heft build --clean",
     "start": "heft start",
-    "serve": "node ./lib/start.js --debug",
+    "serve": "node ./lib/start-explorer.js --debug",
     "test": "heft test",
     "_phase:build": "heft run --only build -- --clean",
     "_phase:test": "heft run --only test -- --clean"

build-tests-samples/heft-web-rig-app-tutorial/package.json

@@ -11,15 +11,15 @@
   },
   "dependencies": {
     "heft-web-rig-library-tutorial": "workspace:*",
-    "react": "~17.0.2",
-    "react-dom": "~17.0.2",
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
     "tslib": "~2.8.1"
   },
   "devDependencies": {
     "@rushstack/heft": "workspace:*",
     "@rushstack/heft-web-rig": "workspace:*",
-    "@types/react": "17.0.74",
-    "@types/react-dom": "17.0.25",
+    "@types/react": "19.2.7",
+    "@types/react-dom": "19.2.3",
     "@types/webpack-env": "1.18.8",
     "eslint": "~9.37.0",
     "local-eslint-config": "workspace:*"

build-tests-samples/heft-web-rig-app-tutorial/src/start.tsx

@@ -2,11 +2,11 @@
 // See LICENSE in the project root for license information.
 
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+import * as ReactDOM from 'react-dom/client';
 
 import { ExampleApp } from './ExampleApp';
 
 import './start.css';
 
-const rootDiv: HTMLElement = document.getElementById('root') as HTMLElement;
-ReactDOM.render(<ExampleApp />, rootDiv);
+const rootDiv: HTMLElement = document.getElementById('root')!;
+ReactDOM.createRoot(rootDiv).render(<ExampleApp />);

build-tests-samples/heft-web-rig-library-tutorial/package.json

@@ -13,15 +13,15 @@
     "_phase:test": "heft run --only test -- --clean"
   },
   "dependencies": {
-    "react": "~17.0.2",
-    "react-dom": "~17.0.2",
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
     "tslib": "~2.8.1"
   },
   "devDependencies": {
     "@rushstack/heft-web-rig": "workspace:*",
     "@rushstack/heft": "workspace:*",
-    "@types/react-dom": "17.0.25",
-    "@types/react": "17.0.74",
+    "@types/react-dom": "19.2.3",
+    "@types/react": "19.2.7",
     "@types/webpack-env": "1.18.8",
     "eslint": "~9.37.0",
     "local-eslint-config": "workspace:*"

build-tests-samples/heft-webpack-basic-tutorial/package.json

@@ -10,8 +10,8 @@
     "_phase:test": "heft run --only test -- --clean"
   },
   "dependencies": {
-    "react-dom": "~17.0.2",
-    "react": "~17.0.2",
+    "react-dom": "~19.2.3",
+    "react": "~19.2.3",
     "tslib": "~2.8.1"
   },
   "devDependencies": {
@@ -21,8 +21,8 @@
     "@rushstack/heft-webpack5-plugin": "workspace:*",
     "@rushstack/heft": "workspace:*",
     "@types/heft-jest": "1.0.1",
-    "@types/react": "17.0.74",
-    "@types/react-dom": "17.0.25",
+    "@types/react": "19.2.7",
+    "@types/react-dom": "19.2.3",
     "@types/webpack-env": "1.18.8",
     "css-loader": "~6.6.0",
     "eslint": "~9.37.0",

build-tests-samples/heft-webpack-basic-tutorial/src/index.tsx

@@ -2,11 +2,11 @@
 // See LICENSE in the project root for license information.
 
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+import * as ReactDOM from 'react-dom/client';
 
 import { ExampleApp } from './ExampleApp';
 
 import './index.css';
 
-const rootDiv: HTMLElement = document.getElementById('root') as HTMLElement;
-ReactDOM.render(<ExampleApp />, rootDiv);
+const rootDiv: HTMLElement = document.getElementById('root')!;
+ReactDOM.createRoot(rootDiv).render(<ExampleApp />);

build-tests/heft-sass-test/package.json

@@ -21,17 +21,17 @@
     "@rushstack/webpack4-module-minifier-plugin": "workspace:*",
     "@types/heft-jest": "1.0.1",
     "@types/node": "20.17.19",
-    "@types/react-dom": "17.0.25",
-    "@types/react": "17.0.74",
+    "@types/react-dom": "19.2.3",
+    "@types/react": "19.2.7",
     "@types/webpack-env": "1.18.8",
     "autoprefixer": "~10.4.2",
     "css-loader": "~5.2.7",
     "eslint": "~9.37.0",
     "html-webpack-plugin": "~4.5.2",
     "postcss-loader": "~4.1.0",
     "postcss": "~8.4.6",
-    "react-dom": "~17.0.2",
-    "react": "~17.0.2",
+    "react-dom": "~19.2.3",
+    "react": "~19.2.3",
     "style-loader": "~2.0.0",
     "typescript": "~5.8.2",
     "webpack": "~4.47.0"

build-tests/heft-sass-test/src/index.tsx

@@ -2,9 +2,9 @@
 // See LICENSE in the project root for license information.
 
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+import * as ReactDOM from 'react-dom/client';
 
 import { ExampleApp } from './ExampleApp';
 
-const rootDiv: HTMLElement = document.getElementById('root') as HTMLElement;
-ReactDOM.render(<ExampleApp />, rootDiv);
+const rootDiv: HTMLElement = document.getElementById('root')!;
+ReactDOM.createRoot(rootDiv).render(<ExampleApp />);

common/changes/@rushstack/eslint-config/bump-react_2025-12-27-00-23.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@rushstack/eslint-config",
+      "comment": "",
+      "type": "none"
+    }
+  ],
+  "packageName": "@rushstack/eslint-config"
+}

common/changes/@rushstack/lockfile-explorer/bump-react_2025-12-27-00-23.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@rushstack/lockfile-explorer",
+      "comment": "Bump React to v19.",
+      "type": "minor"
+    }
+  ],
+  "packageName": "@rushstack/lockfile-explorer"
+}