Migrate webpack to RSPack

camd · camd · commit c4ab610619a6 · 2025-12-06T12:57:36.000-08:00
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -100,21 +100,24 @@ 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.
+      tag: '22'
     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: 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:coverage
           name: Run Jest tests
       - codecov/upload
 
@@ -123,10 +126,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
diff --git a/.markdownlintignore b/.markdownlintignore
@@ -1,2 +1,4 @@
 docs/index.md
-node_modules
+node_modules
+venv
+CLAUDE.md
diff --git a/.npmrc b/.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
diff --git a/.yarnrc b/.yarnrc
diff --git a/docker-compose.yml b/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:
diff --git a/docker/Dockerfile b/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 && \
diff --git a/docs/backend_tasks.md b/docs/backend_tasks.md
@@ -16,8 +16,8 @@ docker-compose run backend bash
 
 ...which saves having to wait for docker-compose to spin up for every test run.
 
-`yarn build` will generate a `.build` directory which will be seen within the `backend` container.
-If you don't have `yarn` working on your host you can run this instead `docker-compose run frontend sh -c "yarn && yarn build"`
+`pnpm build` will generate a `.build` directory which will be seen within the `backend` container.
+If you don't have `pnpm` working on your host you can run this instead `docker-compose run frontend sh -c "corepack enable && pnpm install && pnpm build"`
 
 Then run the individual tools within that shell, like so:
 
diff --git a/docs/code_style.md b/docs/code_style.md
@@ -8,8 +8,8 @@ Javascript in the [Installation section](installation.md#validating-javascript))
 
 Prettier is also used to format JSON/CSS/HTML/Markdown/YAML. However these are not supported
 by ESLint, so instead are validated using Prettier's CLI. To manually check their formatting
-(as well as that of JS/JSX) using Prettier, run `yarn format:check`, or to apply formatting
-fixes run `yarn format`.
+(as well as that of JS/JSX) using Prettier, run `pnpm format:check`, or to apply formatting
+fixes run `pnpm format`.
 
 However we recommend that you instead
 [add Prettier to your editor/IDE](https://prettier.io/docs/en/editors.html)
diff --git a/docs/common_tasks.md b/docs/common_tasks.md
@@ -18,12 +18,12 @@ The docs will then be available at: <http://localhost:8000>
 
 ## Updating package.json
 
-- Always use `yarn` to make changes, not `npm`, so that `yarn.lock` remains in sync.
-- Add new packages using `yarn add <PACKAGE>` (`yarn.lock` will be automatically updated).
-- After changes to `package.json` use `yarn install` to install them and automatically update `yarn.lock`.
-- For more details see the [Yarn documentation].
+- Always use `pnpm` to make changes, not `npm`, so that `pnpm-lock.yaml` remains in sync.
+- Add new packages using `pnpm add <PACKAGE>` (`pnpm-lock.yaml` will be automatically updated).
+- After changes to `package.json` use `pnpm install` to install them and automatically update `pnpm-lock.yaml`.
+- For more details see the [pnpm documentation].
 
-[yarn documentation]: https://yarnpkg.com/en/docs/usage
+[pnpm documentation]: https://pnpm.io/cli/add
 
 ## Debugging Tools
 
diff --git a/docs/installation.md b/docs/installation.md
@@ -28,9 +28,9 @@ From here on, linting checks will be executed every time you commit.
 
 To get started:
 
-- Install [Node.js] and [Yarn] (see [package.json] for known compatible versions, listed under `engines`).
-- Run `yarn install` to install all dependencies.
-- Run `yarn build` to build necessary files.
+- Install [Node.js] and [pnpm] (see [package.json] for known compatible versions, listed under `engines` and `packageManager`).
+- Run `pnpm install` to install all dependencies.
+- Run `pnpm build` to build necessary files.
 
 ### Running the standalone development server
 
@@ -40,7 +40,7 @@ production site. You do not need to set up the Docker environment unless making
 - Start the development server by running:
 
   ```bash
-  yarn start
+  pnpm start
   ```
 
   <!-- prettier-ignore -->
@@ -54,7 +54,7 @@ production site. You do not need to set up the Docker environment unless making
   To run the unminified UI with data from the staging site instead of the production site, type:
 
   ```bash
-  yarn start:stage
+  pnpm start:stage
   ```
 
 ## Server and Full-stack Development
@@ -81,7 +81,7 @@ export those env variables in the shell first or inline with the command below.
 
 - Visit <http://localhost:5000> in your browser (NB: not port 8000).
 
-Both Django's runserver and webpack-dev-server will automatically refresh every time there's a change in the code.
+Both Django's runserver and rspack-dev-server will automatically refresh every time there's a change in the code.
 Proceed to [Running the ingestion tasks](#running-the-ingestion-tasks) to get data.
 
 ### Using the minified UI
@@ -91,7 +91,7 @@ If you would like to use the minified production version of the UI with the deve
 - Run the build task:
 
   ```bash
-  docker-compose run frontend sh -c "yarn && yarn build"
+  docker-compose run frontend sh -c "corepack enable && pnpm install && pnpm build"
   ```
 
 - Start Treeherder's backend:
@@ -102,7 +102,7 @@ If you would like to use the minified production version of the UI with the deve
 
 - Visit <http://localhost:8000> (NB: port 8000, unlike above)
 
-Requests to port 8000 skip webpack-dev-server, causing Django's runserver to serve the
+Requests to port 8000 skip rspack-dev-server, causing Django's runserver to serve the
 production UI from `.build/` instead. In addition to being minified and using the
 non-debug versions of React, the assets are served with the same `Content-Security-Policy`
 header as production.
@@ -224,6 +224,6 @@ Continue to **Working with the Server** section after looking at the [Code Style
 [git]: https://git-scm.com
 [treeherder repo]: https://github.com/mozilla/treeherder
 [node.js]: https://nodejs.org/en/download/current/
-[yarn]: https://yarnpkg.com/en/docs/install
+[pnpm]: https://pnpm.io/installation
 [package.json]: https://github.com/mozilla/treeherder/blob/master/package.json
 [settings]: https://github.com/mozilla/treeherder/blob/master/treeherder/config/settings.py#L318
diff --git a/docs/testing.md b/docs/testing.md
@@ -13,26 +13,26 @@ does not match the style requirements.
 To run ESLint by itself, you may run the lint task:
 
 ```shell
-yarn lint
+pnpm lint
 ```
 
 Or to automatically fix issues found (where possible):
 
 ```shell
-yarn lint --fix
+pnpm lint --fix
 ```
 
 You can also check against Prettier:
 
 ```shell
-yarn format:check
+pnpm format:check
 ```
 
 and to have it actually fix (to the best of its ability) any format issues,
 just do:
 
 ```shell
-yarn format
+pnpm format
 ```
 
 See the [code style](code_style.md#ui) section for more details.
@@ -44,19 +44,19 @@ The tests are written with react testing library. For the integration tests Poll
 
 Integration tests are useful when testing higher level components that would be hard to setup with fetch mock.
 They use PollyJS because it helps to automatically record and replay requests/responses.
-To refresh the PollyJS recordings (usually when an endpoint response changes), just delete the recordings folder and run `yarn test:integration` again like described below.
+To refresh the PollyJS recordings (usually when an endpoint response changes), just delete the recordings folder and run `pnpm test:integration` again like described below.
 
 To run the tests:
 
-- If you haven't already done so, install local dependencies by running `yarn install` from the project root.
-- For unit tests run `yarn test` to execute the tests.
-- For integration tests run `yarn test:integration` to execute the tests.
+- If you haven't already done so, install local dependencies by running `pnpm install` from the project root.
+- For unit tests run `pnpm test` to execute the tests.
+- For integration tests run `pnpm test:integration` to execute the tests.
 
 While working on the frontend, you may wish to watch JavaScript files and re-run the unit tests
 automatically when files change. To do this, you may run one of the following commands:
 
 ```shell
-yarn test:watch
+pnpm test:watch
 ```
 
 The tests will perform an initial run and then re-execute each time a project file is changed.
diff --git a/package.json b/package.json
@@ -7,9 +7,9 @@
   },
   "license": "MPL-2.0",
   "engines": {
-    "node": "22.11.0",
-    "yarn": "1.22.22"
+    "node": ">=22.0.0"
   },
+  "packageManager": "pnpm@9.15.0",
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "6.7.2",
     "@fortawesome/free-brands-svg-icons": "6.7.2",
@@ -83,14 +83,14 @@
     "@pollyjs/adapter-puppeteer": "6.0.6",
     "@pollyjs/core": "6.0.6",
     "@pollyjs/persister-fs": "6.0.6",
+    "@rspack/cli": "1.6.6",
+    "@rspack/core": "1.6.6",
+    "@rspack/plugin-react-refresh": "1.5.3",
     "@testing-library/dom": "10.4.1",
     "@testing-library/jest-dom": "6.9.1",
     "@testing-library/react": "16.2.0",
     "babel-jest": "29.7.0",
-    "babel-loader": "10.0.0",
     "bootstrap": "5.3.8",
-    "clean-webpack-plugin": "4.0.0",
-    "copy-webpack-plugin": "13.0.1",
     "css-loader": "7.1.2",
     "eslint": "9.32.0",
     "eslint-config-airbnb": "19.0.4",
@@ -102,45 +102,41 @@
     "eslint-plugin-react": "7.37.5",
     "fetch-mock": "9.4.0",
     "html-loader": "5.1.0",
-    "html-webpack-plugin": "5.6.4",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
     "jest-environment-puppeteer": "11.0.0",
     "jest-puppeteer": "11.0.0",
     "markdownlint-cli": "0.43.0",
-    "mini-css-extract-plugin": "2.9.4",
-    "moment-locales-webpack-plugin": "1.2.0",
     "path": "0.12.7",
     "prettier": "2.2.1",
     "puppeteer": "24.2.1",
     "sass": "1.93.2",
     "sass-loader": "16.0.6",
     "setup-polly-jest": "0.11.0",
     "style-loader": "4.0.0",
-    "webpack": "5.97.1",
-    "webpack-cli": "6.0.1",
-    "webpack-dev-server": "5.2.2",
     "webpack-merge": "6.0.1"
   },
   "scripts": {
-    "build": "node ./node_modules/webpack/bin/webpack.js --mode production",
-    "build:dev": "node ./node_modules/webpack/bin/webpack.js --mode development",
-    "format": "node ./node_modules/prettier/bin-prettier.js --write \"**/*.{css,html,js,jsx,json,md,yaml,yml}\"",
-    "format:check": "node ./node_modules/prettier/bin-prettier.js --check \"**/*.{css,html,js,jsx,json,md,yaml,yml}\"",
-    "lint": "node ./node_modules/eslint/bin/eslint.js --report-unused-disable-directives --max-warnings 0 --format codeframe ui/ tests/ui/",
-    "lint-with-cache": "node ./node_modules/eslint/bin/eslint.js --cache --report-unused-disable-directives --max-warnings 0 --format codeframe ui/ tests/ui/",
-    "markdownlint": "node ./node_modules/markdownlint-cli/markdownlint.js -c .markdownlint.json -p .markdownlintignore .",
-    "prettier": "npx prettier --check .",
-    "start": "node ./node_modules/webpack/bin/webpack.js serve --mode development",
-    "start:stage": "BACKEND=https://treeherder.allizom.org node ./node_modules/webpack/bin/webpack.js serve --mode development",
-    "start:local": "BACKEND=http://localhost:8000 node ./node_modules/webpack/bin/webpack.js serve --mode development",
-    "test:coverage": "node ./node_modules/jest/bin/jest -w 1 --silent --coverage",
-    "test": "node ./node_modules/jest/bin/jest",
-    "test:integration": "node node_modules/puppeteer/install.mjs && set TEST_TYPE=integration && node ./node_modules/jest/bin/jest",
-    "test:watch": "node ./node_modules/jest/bin/jest --watch"
+    "build": "rspack build --mode production",
+    "build:dev": "rspack build --mode development",
+    "format": "prettier --write \"**/*.{css,html,js,jsx,json,md,yaml,yml}\"",
+    "format:check": "prettier --check \"**/*.{css,html,js,jsx,json,md,yaml,yml}\"",
+    "lint": "eslint --report-unused-disable-directives --max-warnings 0 --format codeframe ui/ tests/ui/",
+    "lint-with-cache": "eslint --cache --report-unused-disable-directives --max-warnings 0 --format codeframe ui/ tests/ui/",
+    "markdownlint": "markdownlint -c .markdownlint.json -p .markdownlintignore .",
+    "prettier": "prettier --check .",
+    "start": "rspack serve --mode development",
+    "start:stage": "BACKEND=https://treeherder.allizom.org rspack serve --mode development",
+    "start:local": "BACKEND=http://localhost:8000 rspack serve --mode development",
+    "test:coverage": "jest -w 1 --silent --coverage",
+    "test": "jest",
+    "test:integration": "node node_modules/puppeteer/install.mjs && set TEST_TYPE=integration && jest",
+    "test:watch": "jest --watch"
   },
-  "resolutions": {
-    "cacache": "19.0.1",
-    "@mui/styled-engine": "npm:@mui/styled-engine-sc@latest"
+  "pnpm": {
+    "overrides": {
+      "cacache": "19.0.1",
+      "@mui/styled-engine": "npm:@mui/styled-engine-sc@latest"
+    }
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/rspack.config.js b/rspack.config.js
diff --git a/yarn.lock b/yarn.lock
