Use JSDOM alternative for deploying to Vercel

.eslintrc.cjs

@@ -1,6 +1,9 @@
 /** @type {import('@typescript-eslint/utils').TSESLint.Linter.Config} */
 const config = {
   extends: ['upleveled'],
+  globals: {
+    NodeJS: true,
+  },
 };
 
 module.exports = config;

.vscode/settings.json

@@ -1,4 +1,14 @@
 {
-  "typescript.tsdk": "./node_modules/typescript/lib",
-  "typescript.enablePromptUseWorkspaceTsdk": true
+  // Enable Stylelint in javascript and typescriptreact (for CSS-in-JS) and scss
+  "css.lint.unknownAtRules": "ignore",
+  // Ignore unknown CSS at rules for Tailwind CSS
+  "stylelint.validate": [
+    "css",
+    "scss",
+    "postcss",
+    "javascript",
+    "typescriptreact"
+  ],
+  "typescript.enablePromptUseWorkspaceTsdk": true,
+  "typescript.tsdk": "./node_modules/typescript/lib"
 }

app/LinkIfNotCurrent.tsx

@@ -2,12 +2,14 @@
 
 import Link, { LinkProps } from 'next/link';
 import { usePathname } from 'next/navigation';
+import { ReactNode } from 'react';
 
 export default function LinkIfNotCurrent<RouteType>({
   matchParentSegment,
   ...props
 }: LinkProps<RouteType> & {
   matchParentSegment?: boolean;
+  children: ReactNode;
 }) {
   const pathname = usePathname();
 

app/example-6-cross-site-scripting/solution-2/page.tsx

@@ -1,5 +1,5 @@
 import DOMPurify from 'dompurify';
-import { JSDOM } from 'jsdom';
+import { JSDOM } from 'jsdom-napi-rs-canvas';
 import { notFound } from 'next/navigation';
 import { getBlogPostById } from '../../../database/blogPosts';
 import Common from '../common';

database/connect.ts

@@ -1,9 +1,8 @@
-import { config } from 'dotenv-safe';
-import postgres from 'postgres';
+import { setEnvironmentVariables } from '../ley.config.mjs';
 
 // This loads all environment variables from a .env file
 // for all code after this line
-if (!process.env.FLY_IO) config();
+setEnvironmentVariables();
 
 // Type needed for the connection function below
 declare module globalThis {
@@ -15,6 +14,7 @@ declare module globalThis {
 function connectOneTimeToDatabase() {
   if (!globalThis.postgresSqlClient) {
     globalThis.postgresSqlClient = postgres({
+      ssl: !!process.env.POSTGRES_URL,
       transform: {
         ...postgres.camel,
         undefined: null,

ley.config.mjs

@@ -0,0 +1,42 @@
+import fs from 'node:fs';
+import dotenv from 'dotenv';
+
+export function setEnvironmentVariables() {
+  if (process.env.NODE_ENV === 'production' || process.env.CI) {
+    // Set standard environment variables for Postgres.js from Vercel environment variables
+    if (process.env.POSTGRES_URL) {
+      process.env.PGHOST = process.env.POSTGRES_HOST;
+      process.env.PGDATABASE = process.env.POSTGRES_DATABASE;
+      process.env.PGUSERNAME = process.env.POSTGRES_USER;
+      process.env.PGPASSWORD = process.env.POSTGRES_PASSWORD;
+    }
+    return;
+  }
+
+  // Replacement for unmaintained dotenv-safe package
+  // https://github.com/rolodato/dotenv-safe/issues/128#issuecomment-1383176751
+  //
+  // TODO: Remove this and switch to dotenv/safe if this proposal gets implemented:
+  // https://github.com/motdotla/dotenv/issues/709
+  dotenv.config();
+
+  const unconfiguredEnvVars = Object.keys(
+    dotenv.parse(fs.readFileSync('./.env.example')),
+  ).filter((exampleKey) => !process.env[exampleKey]);
+
+  if (unconfiguredEnvVars.length > 0) {
+    throw new Error(
+      `.env.example environment ${
+        unconfiguredEnvVars.length > 1 ? 'variables' : 'variable'
+      } ${unconfiguredEnvVars.join(', ')} not configured in .env file`,
+    );
+  }
+}
+
+setEnvironmentVariables();
+
+const options = {
+  ssl: !!process.env.POSTGRES_URL,
+};
+
+export default options;

next.config.js

@@ -3,7 +3,7 @@ const nextConfig = {
   reactStrictMode: true,
   experimental: {
     appDir: true,
-    serverComponentsExternalPackages: ['canvas', 'jsdom'],
+    serverComponentsExternalPackages: ['jsdom-napi-rs-canvas'],
     typedRoutes: true,
   },
   eslint: {

package.json

@@ -6,26 +6,24 @@
     "build": "next build",
     "dev": "next dev",
     "lint": "next lint",
-    "migrate": "dotenv -- ley --require tsm",
+    "migrate": "ley --require tsm",
     "start": "next start"
   },
   "dependencies": {
     "@types/cookie": "0.5.1",
-    "@types/dotenv-safe": "8.1.2",
     "bcrypt": "5.1.0",
-    "canvas": "2.11.2",
     "cookie": "0.5.0",
-    "dompurify": "3.0.3",
-    "dotenv-cli": "7.2.1",
-    "dotenv-safe": "8.2.0",
-    "jsdom": "22.1.0",
+    "dompurify": "3.0.4",
+    "dotenv": "^16.3.1",
+    "jsdom-napi-rs-canvas": "^19.0.0",
     "ley": "0.8.1",
     "next": "13.4.7",
     "postgres": "3.3.5",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-markdown": "8.0.7",
     "sass": "1.63.6",
+    "server-only": "^0.0.1",
     "sharp": "0.32.1",
     "tsm": "2.3.0",
     "zod": "3.21.4"
@@ -34,15 +32,14 @@
     "@ts-safeql/eslint-plugin": "1.1.4",
     "@types/bcrypt": "5.0.0",
     "@types/dompurify": "3.0.2",
-    "@types/jsdom": "21.1.1",
     "@types/node": "18.16.3",
     "@types/react": "18.2.14",
     "@types/react-dom": "18.2.6",
     "eslint": "8.43.0",
-    "eslint-config-upleveled": "4.7.2",
+    "eslint-config-upleveled": "5.0.0",
     "libpg-query": "15.0.2",
     "stylelint": "15.9.0",
     "stylelint-config-upleveled": "^1.0.2",
-    "typescript": "5.1.3"
+    "typescript": "5.1.6"
   }
 }