deps: Upgrade to Node 22 (#2274)

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

Author: SuaYoo

.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,15 +10,15 @@ 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:
 
 ```sh
 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");
-const { tailwindTransform } = require("postcss-lit");
+import theme from "@webrecorder/hickory/tokens/tailwind";
+import { tailwindTransform } from "postcss-lit";
 
-const attributes = require("./config/tailwind/plugins/attributes");
-const containPlugin = require("./config/tailwind/plugins/contain");
-const contentVisibilityPlugin = require("./config/tailwind/plugins/content-visibility");
-const cssPartsPlugin = require("./config/tailwind/plugins/parts");
+import attributes from "./config/tailwind/plugins/attributes";
+import containPlugin from "./config/tailwind/plugins/contain";
+import contentVisibilityPlugin from "./config/tailwind/plugins/content-visibility";
+import cssPartsPlugin from "./config/tailwind/plugins/parts";
 
 /**
  * Merge Shoelace and hickory themes