fix(build): make Node.js scripts work with Node.js 20

.github/workflows/codeql.yml

@@ -9,7 +9,7 @@
 # the `language` matrix defined below to confirm you have the correct set of
 # supported CodeQL languages.
 #
-name: "CodeQL"
+name: 'CodeQL'
 
 on:
   schedule:
@@ -27,45 +27,44 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        language: [ 'javascript', 'python' ]
+        language: ['javascript', 'python']
         # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ]
         # Use only 'java' to analyze code written in Java, Kotlin or both
         # Use only 'javascript' to analyze code written in JavaScript, TypeScript or both
         # Learn more about CodeQL language support at https://aka.ms/codeql-docs/language-support
 
     steps:
-    - name: Checkout repository
-      uses: actions/checkout@v3
+      - name: Checkout repository
+        uses: actions/checkout@v4
 
-    # Initializes the CodeQL tools for scanning.
-    - name: Initialize CodeQL
-      uses: github/codeql-action/init@v2
-      with:
-        languages: ${{ matrix.language }}
-        # If you wish to specify custom queries, you can do so here or in a config file.
-        # By default, queries listed here will override any specified in a config file.
-        # Prefix the list here with "+" to use these queries and those in the config file.
+      # Initializes the CodeQL tools for scanning.
+      - name: Initialize CodeQL
+        uses: github/codeql-action/init@v2
+        with:
+          languages: ${{ matrix.language }}
+          # If you wish to specify custom queries, you can do so here or in a config file.
+          # By default, queries listed here will override any specified in a config file.
+          # Prefix the list here with "+" to use these queries and those in the config file.
 
-        # Details on CodeQL's query packs refer to : https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
-        # queries: security-extended,security-and-quality
+          # Details on CodeQL's query packs refer to : https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
+          # queries: security-extended,security-and-quality
 
+      # Autobuild attempts to build any compiled languages  (C/C++, C#, Go, or Java).
+      # If this step fails, then you should remove it and run the build manually (see below)
+      - name: Autobuild
+        uses: github/codeql-action/autobuild@v2
 
-    # Autobuild attempts to build any compiled languages  (C/C++, C#, Go, or Java).
-    # If this step fails, then you should remove it and run the build manually (see below)
-    - name: Autobuild
-      uses: github/codeql-action/autobuild@v2
+      # ℹ️ Command-line programs to run using the OS shell.
+      # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
 
-    # ℹ️ Command-line programs to run using the OS shell.
-    # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
+      #   If the Autobuild fails above, remove it and uncomment the following three lines.
+      #   modify them (or add more) to build your code if your project, please refer to the EXAMPLE below for guidance.
 
-    #   If the Autobuild fails above, remove it and uncomment the following three lines.
-    #   modify them (or add more) to build your code if your project, please refer to the EXAMPLE below for guidance.
+      # - run: |
+      #     echo "Run, Build Application using script"
+      #     ./location_of_script_within_repo/buildscript.sh
 
-    # - run: |
-    #     echo "Run, Build Application using script"
-    #     ./location_of_script_within_repo/buildscript.sh
-
-    - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v2
-      with:
-        category: "/language:${{matrix.language}}"
+      - name: Perform CodeQL Analysis
+        uses: github/codeql-action/analyze@v2
+        with:
+          category: '/language:${{matrix.language}}'

.github/workflows/docker.yml

@@ -10,10 +10,12 @@ jobs:
     # "push" event is not triggered for forks, so need to listen for
     # pull_requests, but only for external ones, so as not to run the action
     # twice
-    if: github.event_name != 'pull_request' || github.event.pull_request.head.repo.fork == true
+    if:
+      github.event_name != 'pull_request' ||
+      github.event.pull_request.head.repo.fork == true
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Prepare
         id: prep
@@ -50,7 +52,7 @@ jobs:
           echo "version=${VERSION}" >> $GITHUB_OUTPUT
           echo "tags=${TAGS}" >> $GITHUB_OUTPUT
           echo "created=$(date -u +'%Y-%m-%dT%H:%M:%SZ')" >> $GITHUB_OUTPUT
-          
+
           # Determine the platforms based on the branch
           PLATFORMS="linux/amd64"
           REF_NAME=$(echo "${GITHUB_REF#refs/*/}")
@@ -60,7 +62,7 @@ jobs:
             PLATFORMS="linux/arm64"
           fi
           echo "platforms=${PLATFORMS}" >> $GITHUB_ENV
-      
+
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@v2
 

.github/workflows/sync-pre-commit.yml

@@ -3,26 +3,26 @@ name: Sync pre-commit hooks
 on:
   schedule:
     # Twice a month, on the 15th and the 29th
-    - cron: "23 23 15,29 * *"
+    - cron: '23 23 15,29 * *'
 
 jobs:
   update:
     runs-on: ubuntu-latest
 
     steps:
       - name: Checkout current repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Checkout pre-commit-tools repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           repository: maxpatiiuk/pre-commit-tools
           path: ./pre-commit-tools
 
       - name: Install Node.JS
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version-file: specifyweb/frontend/js_src/package.json
           cache: npm
           cache-dependency-path: specifyweb/frontend/js_src/package-lock.json
 
@@ -31,10 +31,14 @@ jobs:
         run: npm ci
 
       - name: Sync Local and Global pre-commit configs
-        run: node ./pre-commit-tools/pre-commit-tools/syncConfig.js https://raw.githubusercontent.com/maxpatiiuk/dotfiles/main/git/.pre-commit-config.yaml
+        run:
+          node ./pre-commit-tools/pre-commit-tools/syncConfig.js
+          https://raw.githubusercontent.com/maxpatiiuk/dotfiles/main/git/.pre-commit-config.yaml
 
       - name: Update Local hooks
-        run: node ./pre-commit-tools/pre-commit-tools/updateHooks.js .pre-commit-config.yaml
+        run:
+          node ./pre-commit-tools/pre-commit-tools/updateHooks.js
+          .pre-commit-config.yaml
 
       - name: Commit changes
         uses: EndBug/add-and-commit@v9

.github/workflows/test.yml

@@ -27,10 +27,10 @@ jobs:
       frontend_changes: ${{ steps.filter.outputs.frontend_files }}
 
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
       - name: Find all changed files
-        uses: dorny/paths-filter@v2
+        uses: dorny/paths-filter@v3
         id: filter
         with:
           base: ${{ github.ref }}
@@ -64,10 +64,12 @@ jobs:
           MYSQL_PASSWORD: MasterPassword
           MYSQL_DATABASE: test_SpecifyDB
           MYSQL_ROOT_PASSWORD: password
-        options: --health-cmd="mariadb-admin ping" --health-interval=5s --health-timeout=2s --health-retries=3
+        options:
+          --health-cmd="mariadb-admin ping" --health-interval=5s
+          --health-timeout=2s --health-retries=3
 
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
       - name: Get Specify 6 from cache
         id: cache-specify6
@@ -82,8 +84,13 @@ jobs:
           wget https://update.specifysoftware.org/6802/Specify_unix_64.sh
           sh Specify_unix_64.sh -q -dir ./Specify6
 
-      - name: Patch Specify datamodel (Sam, you made the Attachment.origFilename too long)
-        run: sed -i 's/name="origFilename" type="java.lang.String"/name="origFilename" type="text"/' ./Specify6/config/specify_datamodel.xml
+      - name:
+          Patch Specify datamodel (Sam, you made the Attachment.origFilename too
+          long)
+        run:
+          sed -i 's/name="origFilename"
+          type="java.lang.String"/name="origFilename" type="text"/'
+          ./Specify6/config/specify_datamodel.xml
 
       - name: Install ubuntu dependencies
         run: |
@@ -111,7 +118,9 @@ jobs:
           echo "DATABASE_PORT = ${{ job.services.mariadb.ports[3306] }}" >> specifyweb/settings/local_specify_settings.py
 
       - name: Need these files to be present
-        run: make specifyweb/settings/build_version.py specifyweb/settings/secret_key.py
+        run:
+          make specifyweb/settings/build_version.py
+          specifyweb/settings/secret_key.py
 
       - name: Verify MariaDB connection
         env:
@@ -130,7 +139,6 @@ jobs:
       #   run: |
       #     mysql -h 127.0.0.1 -P $PORT -u MasterUser -p'MasterPassword' -e 'DROP DATABASE IF EXISTS test_SpecifyDB;';
       #     mysql -h 127.0.0.1 -P $PORT -u MasterUser -p'MasterPassword' -e 'SHOW DATABASES;'
-
       - name: Run test suite
         run: ./ve/bin/python manage.py test --verbosity=3 --keepdb
         # run: ./ve/bin/python manage.py test --verbosity=3 --noinput
@@ -142,18 +150,18 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         with:
           fetch-depth: 0
           # Using a Personal Access Token from an admin account to bypass branch
           # protection rules and allow direct pushes to production. Inspirited
           # by: https://github.com/community/community/discussions/13836
           token: ${{ secrets.TESTS_PUSH_TO_GITHUB }}
 
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
-          node-version: 20
-          cache: "npm"
+          node-version-file: specifyweb/frontend/js_src/package.json
+          cache: 'npm'
           cache-dependency-path: specifyweb/frontend/js_src/package-lock.json
 
       - name: Build frontend
@@ -172,7 +180,9 @@ jobs:
 
       - name: Clone branch that stores localization strings
         # Listen for changes to production branch
-        if: github.ref == format('refs/heads/{0}', github.event.repository.default_branch)
+        if:
+          github.ref == format('refs/heads/{0}',
+          github.event.repository.default_branch)
         id: weblate
         uses: actions/checkout@v3
         with:
@@ -186,7 +196,9 @@ jobs:
           npm run localizationTests -- --emit ../../../weblate-localization/strings
 
       - name: Sync localization strings with Weblate (only on production branch)
-        if: github.ref == format('refs/heads/{0}', github.event.repository.default_branch)
+        if:
+          github.ref == format('refs/heads/{0}',
+          github.event.repository.default_branch)
         working-directory: weblate-localization
         run: |
           git add strings
@@ -229,7 +241,7 @@ jobs:
 
           # Convert to array
           IFS=' ' read -r -a split_files <<< "$changed_files"
-          
+
           # Exclude files that were removed
           for file in "${split_files[@]}"; do
               if [ ! -e "$file" ]; then
@@ -240,7 +252,7 @@ jobs:
 
           # Convert back to string
           changed="${split_files[*]}"
-          
+
           echo "Changed front-end files: ${changed}"
           echo "changed=${changed}" >> $GITHUB_OUTPUT
 
@@ -251,7 +263,9 @@ jobs:
         #  - This would have already run on the feature branch by the time code
         #    is pushed into production.
         #  - There shouldn't be many direct pushes to production anyway
-        if: github.ref != format('refs/heads/{0}', github.event.repository.default_branch)
+        if:
+          github.ref != format('refs/heads/{0}',
+          github.event.repository.default_branch)
         working-directory: specifyweb/frontend/js_src
         run: |
           # TODO: Once most errors are fixed remove "set +e" to not ignore errors

specifyweb/frontend/js_src/.prettierignore

@@ -1,4 +1,4 @@
-lib/tests/fixtures/
-lib/tests/ajax/static
-lib/components/DataModel/*.js
-*.snap
+/lib/tests/fixtures/
+/lib/tests/ajax/static
+/lib/components/DataModel/*.js
+*.snap

specifyweb/frontend/js_src/babel.config.js → specifyweb/frontend/js_src/babel.config.cjs

@@ -6,6 +6,11 @@
 
 'use strict';
 
+/*
+ * Not using ESM due to Jest error:
+ * Error while loading config - You appear to be using a native ECMAScript module configuration file, which is only supported when running Babel asynchronously.
+ * May be fixed after updating dependencies
+ */
 module.exports = {
   env: {
     test: {

specifyweb/frontend/js_src/css/workbench.css

@@ -50,8 +50,7 @@
 /* Cell navigation */
 
 .wbs-form
-  :is(.wb-no-match-cell,
-  .wb-modified-cell, .htCommentCell, .wb-search-match-cell),
+  :is(.wb-no-match-cell, .wb-modified-cell, .htCommentCell, .wb-search-match-cell),
 .wb-navigation-section {
   @apply !bg-[color:var(--accent-color)];
 }

specifyweb/frontend/js_src/eslint.config.js

@@ -1,6 +1,6 @@
-const eslintConfig = require('@maxxxxxdlp/eslint-config');
-const eslintConfigReact = require('@maxxxxxdlp/eslint-config-react');
-const globals = require('globals');
+import eslintConfig from '@maxxxxxdlp/eslint-config';
+import eslintConfigReact from '@maxxxxxdlp/eslint-config-react';
+import globals from 'globals';
 
 const testFiles = eslintConfig.find(
   (rules) =>
@@ -24,7 +24,7 @@ const abbreviationsConfig = eslintConfig
 if (abbreviationsConfig === undefined)
   throw new Error('Unable to find unicorn/prevent-abbreviations config');
 
-module.exports = [
+export default [
   ...eslintConfig,
   ...eslintConfigReact,
   {

specifyweb/frontend/js_src/jest.config.ts

@@ -1,7 +1,7 @@
 /**
  * Jest currently has two solutions for running TypeScript files:
  *   - babel-jest
- *   - ts-ject
+ *   - ts-jest
  *
  * ts-jest has great source map support and does TypeChecking
  * It would have been a preferered option, except for the fact that

specifyweb/frontend/js_src/lib/components/Atoms/index.tsx

@@ -94,6 +94,8 @@ export const Key = wrap(
   'bg-gray-200 border-1 dark:border-none dark:bg-neutral-700 rounded-sm mx-1 p-0.5'
 );
 
+const defaultOneRem = 16;
 export const oneRem = Number.parseFloat(
-  getComputedStyle(document.documentElement).fontSize
+  globalThis.getComputedStyle?.(document.documentElement).fontSize ??
+    defaultOneRem
 );

specifyweb/frontend/js_src/lib/components/Core/Entrypoint.tsx

@@ -30,7 +30,7 @@ function entrypoint(): void {
   console.log(entrypointName);
   unlockInitialContext(entrypointName);
 
-  globalThis.window.addEventListener('load', () => {
+  globalThis.addEventListener?.('load', () => {
     const root = document.getElementById('root');
     const portalRoot = document.getElementById('portal-root');
     if (root === null || portalRoot === null)

specifyweb/frontend/js_src/lib/components/Core/OnlineStatus.tsx

@@ -22,12 +22,12 @@ export function OnlineStatus(): JSX.Element | null {
       setShowOnlineStatus(false);
     }
 
-    window.addEventListener('online', handleOnline);
-    window.addEventListener('offline', handleOffline);
+    globalThis.addEventListener('online', handleOnline);
+    globalThis.addEventListener('offline', handleOffline);
 
     return () => {
-      window.removeEventListener('online', handleOnline);
-      window.removeEventListener('offline', handleOffline);
+      globalThis.removeEventListener('online', handleOnline);
+      globalThis.removeEventListener('offline', handleOffline);
     };
   }, []);