Migrate webpack to RSPack

Author: camd

.circleci/config.yml

@@ -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 [email protected] --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 +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

.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/

.yarnrc

@@ -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"
       }
     ]
   ]

babel.config.json

@@ -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 [email protected] --activate && pnpm install && pnpm start --host 0.0.0.0"
     volumes:
       - .:/app
     ports:

docker-compose.yml

@@ -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 [email protected] --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 [email protected]
-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 && \

docker/Dockerfile

@@ -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:
 

docs/backend_tasks.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)