5th: Upgrade react-router and related to react-router-dom

.circleci/config.yml

@@ -34,7 +34,7 @@ commands:
     steps:
       - run:
           name: Build Docker image
-          command: docker build -f docker/Dockerfile -t app:build .
+          command: DOCKER_BUILDKIT=1 docker build -f docker/Dockerfile -t app:build .
 
   deploy-to-dockerhub:
     description: "Deploy to Docker Hub"
@@ -100,21 +100,25 @@ jobs:
   javascript-tests:
     executor:
       name: node/default
-      # The Node version here must be kept in sync with that in `package.json`.
-      tag: '22.11.0'
+      # The Node version here should be compatible with `package.json` engines.
+      # Note: cimg/node requires at least a minor version (e.g., '22.0'), not just major version
+      tag: '22.0'
     steps:
       - checkout
-      - node/install-packages:
-          # `yarn install --frozen-lockfile` is run and cache is enabled by default for this orb configuration
-          pkg-manager: yarn
       - run:
-          command: yarn lint
+          name: Install pnpm
+          command: sudo corepack enable && corepack prepare pnpm@9.15.0 --activate
+      - run:
+          name: Install dependencies
+          command: pnpm install --frozen-lockfile
+      - run:
+          command: pnpm lint
           name: Run linting
       - run:
-          command: yarn markdownlint
+          command: pnpm markdownlint
           name: Check markdown linting
       - run:
-          command: yarn test:coverage
+          command: pnpm test:ci
           name: Run Jest tests
       - codecov/upload
 
@@ -123,10 +127,6 @@ jobs:
       - image: 'cimg/python:3.10-node'
     steps:
       - checkout
-      - restore_cache:
-          name: Restore Yarn Package Cache
-          keys:
-            - node-deps-v1-{{ .Branch }}
       - run: pip install tox
       - run:
           command: tox -e docs

.gitignore

@@ -19,6 +19,7 @@ treeherder_backup_*
 
 # Caches
 .eslintcache
+.jest-cache
 # PyCharm
 *.iml
 # Perf sheriffing criteria

.markdownlintignore

@@ -1,2 +1,4 @@
 docs/index.md
-node_modules
+node_modules
+venv
+CLAUDE.md

.npmrc

@@ -0,0 +1,17 @@
+# pnpm configuration for Treeherder
+
+# Equivalent to yarn's ignore-engines - don't check engine compatibility
+engine-strict=false
+
+# Save exact versions instead of ranges when adding packages
+save-exact=true
+
+# Don't run lifecycle scripts during install for security
+ignore-scripts=true
+
+# Hoist all dependencies to node_modules root for compatibility
+# This makes pnpm behavior similar to npm/yarn flat node_modules
+shamefully-hoist=true
+
+# Auto-install peers to avoid peer dependency warnings
+auto-install-peers=true

.prettierignore

@@ -1,5 +1,8 @@
 # Ignore generated directories.
 .*/
+venv/
+node_modules/
+pnpm-lock.yaml
 
 # Ignore our legacy JS since it will be rewritten when converted to React.
 ui/js/

babel.config.json

@@ -18,18 +18,7 @@
     [
       "@babel/preset-react",
       {
-        "development": true,
-        "useSpread": true
-      }
-    ]
-  ],
-  "plugins": [
-    "@babel/plugin-syntax-dynamic-import",
-    "react-hot-loader/babel",
-    [
-      "@babel/plugin-proposal-class-properties",
-      {
-        "loose": true
+        "runtime": "automatic"
       }
     ]
   ]

docker-compose.yml

@@ -60,13 +60,13 @@ services:
     # https://hub.docker.com/_/node
     image: node:23.5.0-alpine3.20
     # Installing JS dependencies at runtime so that they share the `node_modules` from the
-    # host, improving speed (both install and build due to the webpack cache) and ensuring
+    # host, improving speed (both install and build due to the rspack cache) and ensuring
     # the host copy stays in sync (for people that switch back and forth between UI-only
     # and full stack Treeherder development).
     working_dir: /app
     environment:
       BACKEND: http://backend:8000
-    command: sh -c "yarn && yarn start --host 0.0.0.0"
+    command: sh -c "corepack enable && corepack prepare pnpm@9.15.0 --activate && pnpm install && pnpm start --host 0.0.0.0"
     volumes:
       - .:/app
     ports:

docker/Dockerfile

@@ -1,14 +1,16 @@
 ## Frontend stage
-FROM node:22.11.0 AS frontend
+FROM node:22-slim AS frontend
 
 WORKDIR /app
 
+# Install pnpm
+RUN corepack enable && corepack prepare pnpm@9.15.0 --activate
+
 COPY ui/ /app/ui/
-COPY package.json babel.config.json webpack.config.js yarn.lock /app/
+COPY package.json rspack.config.js pnpm-lock.yaml .npmrc /app/
 
-RUN npm install -g --force yarn@1.22.22
-RUN yarn install
-RUN yarn build
+RUN pnpm install --frozen-lockfile
+RUN pnpm build
 
 
 ## Backend stage
@@ -38,7 +40,7 @@ RUN python manage.py collectstatic --noinput
 # WhiteNoise can then serve in preference to the originals. This is required
 # since WhiteNoise's Django storage backend only gzips assets handled by
 # collectstatic, and so does not affect files in the `.build/` directory
-# since they are instead generated by webpack.
+# since they are instead generated by rspack.
 RUN python -m whitenoise.compress .build
 
 RUN groupadd --gid 9500 treeherder && \