deps: Upgrade to Node 22 (#2274)

- Upgrades build to use Node 22
- Adds version matrix to GH workflow to test compatibility with 20

.github/workflows/frontend-build-prepare.yaml

@@ -10,6 +10,9 @@ on:
 jobs:
   setup-and-build:
     runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node: [20, 22]
 
     steps:
       # Setup:
@@ -21,7 +24,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v4
         with:
-          node-version: '18'
+          node-version: ${{ matrix.node }}
           cache: 'yarn'
           cache-dependency-path: frontend/yarn.lock
 

.github/workflows/ui-tests-playwright.yml

@@ -25,7 +25,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v4
         with:
-          node-version: '20'
+          node-version: '22'
           cache: 'yarn'
           cache-dependency-path: frontend/yarn.lock
 

.github/workflows/weblate-reformat.yaml

@@ -27,7 +27,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v4
         with:
-          node-version: '18'
+          node-version: '22'
           cache: 'yarn'
           cache-dependency-path: frontend/yarn.lock
       - name: Install dependencies

frontend/.yarnrc

@@ -1 +0,0 @@
-ignore-engines true

frontend/Dockerfile

@@ -1,5 +1,5 @@
 # syntax=docker/dockerfile:1.4
-FROM --platform=$BUILDPLATFORM docker.io/library/node:18 as build_deps
+FROM --platform=$BUILDPLATFORM docker.io/library/node:22 as build_deps
 
 WORKDIR /app
 COPY .yarnrc yarn.lock package.json ./

frontend/docs/docs/develop/frontend-dev.md

@@ -10,7 +10,7 @@ Instead of rebuilding the entire frontend image to view your UI changes, you can
 
 The frontend development server requires an existing backend that has been deployed locally or is in production. See [Deploying Browsertrix](../deploy/index.md).
 
-### 2. Node.js ≥18
+### 2. Node.js ≥20
 
 To check if you already have Node.js installed, run the following command in your command line terminal:
 
@@ -18,7 +18,7 @@ To check if you already have Node.js installed, run the following command in you
 node --version
 ```
 
-You should see a version number like `v18.12.1`. If you see a command line error instead of a version number, [install Node.js](https://nodejs.org/en/download/package-manager) before continuing.
+You should see a version number like `v20.17.0`. If you see a command line error instead of a version number, [install Node.js](https://nodejs.org/en/download/package-manager) before continuing.
 
 ??? question "What if my other project requires a different version of Node.js?"
 

frontend/package.json

@@ -138,7 +138,7 @@
     }
   },
   "engines": {
-    "node": ">=18"
+    "node": ">=20 <23"
   },
   "resolutions": {
     "**/playwright": "1.49.0",

frontend/tailwind.config.js

@@ -1,10 +1,10 @@
-const theme = require("@webrecorder/hickory/tokens/tailwind");
+import theme from "@webrecorder/hickory/tokens/tailwind";
-const { tailwindTransform } = require("postcss-lit");
+import { tailwindTransform } from "postcss-lit";
 
-const attributes = require("./config/tailwind/plugins/attributes");
+import attributes from "./config/tailwind/plugins/attributes";
-const containPlugin = require("./config/tailwind/plugins/contain");
+import containPlugin from "./config/tailwind/plugins/contain";
-const contentVisibilityPlugin = require("./config/tailwind/plugins/content-visibility");
+import contentVisibilityPlugin from "./config/tailwind/plugins/content-visibility";
-const cssPartsPlugin = require("./config/tailwind/plugins/parts");
+import cssPartsPlugin from "./config/tailwind/plugins/parts";
 
 /**
  * Merge Shoelace and hickory themes