Try wrapping the ESM stuff

Author: Perlkonig

lib/nanoid-wrapper.mjs

@@ -0,0 +1,8 @@
+import { customAlphabet } from 'nanoid';
+
+const alphabet = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
+const generate = customAlphabet(alphabet, 5);
+
+export function generateId() {
+  return generate();
+}

lib/svgdom-wrapper.mjs

@@ -0,0 +1,7 @@
+// Pure ESM file
+import { createSVGWindow } from 'svgdom';
+
+export function makeWindow() {
+  const window = createSVGWindow();
+  return window;
+}

tsconfig.json

@@ -31,7 +31,7 @@
     // "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
     // "paths": {},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
     // "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
-    // "typeRoots": [],                                  /* Specify multiple folders that act like './node_modules/@types'. */
+    "typeRoots": ["./types/*"],                                  /* Specify multiple folders that act like './node_modules/@types'. */
     // "types": [],                                      /* Specify type package names to be included without being referenced in a source file. */
     // "allowUmdGlobalAccess": true,                     /* Allow accessing UMD globals from modules. */
     // "moduleSuffixes": [],                             /* List of file name suffixes to search when resolving a module. */

types/types.d.ts

@@ -0,0 +1,9 @@
+// types.d.ts
+declare module '../lib/svgdom-wrapper.mjs' {
+  import type { Window } from 'svgdom';
+  export function makeWindow(): Window;
+}
+
+declare module '../lib/nanoid-wrapper.mjs' {
+  export function generateId(): string;
+}

utils/thumbnails.ts

@@ -51,19 +51,6 @@ type SamplerEntry = {
     completed: ReservoirSampler<GameRec>;
 }
 
-async function makeIdGenerator() {
-  // Dynamically import nanoid
-  const { customAlphabet } = await import('nanoid');
-
-  // Create a generator with your custom alphabet
-  const alphabet = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
-  const length = 5;
-
-  const generate = customAlphabet(alphabet, length);
-
-  return generate;
-}
-
 export const handler: Handler = async (event: any, context?: any) => {
   await (i18n
   .init({
@@ -309,10 +296,11 @@ export const handler: Handler = async (event: any, context?: any) => {
         ["light", contextLight],
         ["dark", contextDark],
     ]);
-    const generateId = await makeIdGenerator();
-    const svgdom = await import('svgdom');
-    const { createSVGWindow } = svgdom;
-    const window = createSVGWindow();
+    // Dynamically import the ESM wrapper
+    const { makeWindow } = await import('../lib/svgdom-wrapper.mjs');
+    // Example: generate an ID using nanoid wrapper
+    const { generateId } = await import('../lib/nanoid-wrapper.mjs');
+    const window = makeWindow();
     const document = window.document;
 
     // register window and document