From 596b9edc386b58ad9bac310f070d013d4c45a89b Mon Sep 17 00:00:00 2001
From: Nate Kelley <nate@buster.so>
Date: Wed, 3 Sep 2025 15:36:46 -0600
Subject: [PATCH] Update imports for workers

---
 apps/web-tss/package.json                     |  2 +-
 .../ui/inputs/AppCodeEditor/AppCodeEditor.tsx | 19 ++++++++++++++++--
 .../AppCodeEditor/setupMonacoWebWorker.ts     | 20 +++++++++----------
 apps/web-tss/vite.config.ts                   |  3 +++
 4 files changed, 31 insertions(+), 13 deletions(-)

diff --git a/apps/web-tss/package.json b/apps/web-tss/package.json
index 027cb0901..6d00df3f7 100644
--- a/apps/web-tss/package.json
+++ b/apps/web-tss/package.json
@@ -13,7 +13,7 @@
     "deploy:wrangler": "npx wrangler deploy .output/server/index.mjs --assets .output/public",
     "build": "cross-env NODE_OPTIONS=--max-old-space-size=8192 vite build -- --typecheck",
     "build:local": "cross-env NODE_OPTIONS=--max-old-space-size=8192 vite build -- --typecheck --local",
-    "build:no-typecheck": "vite build",
+    "build:no-typecheck": "cross-env NODE_OPTIONS=--max-old-space-size=8192 vite build",
     "build:fix": "pnpm build:no-typecheck && pnpm run build:fix-react-symlink",
     "build:fix-react-symlink": "npx tsx scripts/fix-react-symlink.ts",
     "serve": "vite preview",
diff --git a/apps/web-tss/src/components/ui/inputs/AppCodeEditor/AppCodeEditor.tsx b/apps/web-tss/src/components/ui/inputs/AppCodeEditor/AppCodeEditor.tsx
index e9f645fe5..bb44b4021 100644
--- a/apps/web-tss/src/components/ui/inputs/AppCodeEditor/AppCodeEditor.tsx
+++ b/apps/web-tss/src/components/ui/inputs/AppCodeEditor/AppCodeEditor.tsx
@@ -4,13 +4,15 @@
 import type { EditorProps, OnMount } from '@monaco-editor/react';
 import { ClientOnly } from '@tanstack/react-router';
 import type React from 'react';
-import { forwardRef, lazy, Suspense, useCallback, useMemo } from 'react';
+import { forwardRef, lazy, Suspense, useCallback, useEffect, useMemo } from 'react';
+import { useMount } from '@/hooks/useMount';
 import { cn } from '@/lib/utils';
 import { LoadingCodeEditor } from './LoadingCodeEditor';
 import { setupMonacoWebWorker } from './setupMonacoWebWorker';
 import { configureMonacoToUseYaml } from './yamlHelper';
 
 const isServer = typeof window === 'undefined';
+let hasSetupMonacoWebWorker = false;
 
 //https://github.com/brijeshb42/monaco-ace-tokenizer
 
@@ -103,9 +105,22 @@ export const AppCodeEditor = forwardRef<AppCodeEditorHandle, AppCodeEditorProps>
       };
     }, [language, readOnly, readOnlyMessage, monacoEditorOptions]);
 
+    useMount(async () => {
+      if (hasSetupMonacoWebWorker || isServer) return;
+      try {
+        const setupMonacoWebWorker = await import('./setupMonacoWebWorker').then(
+          (mod) => mod.setupMonacoWebWorker
+        );
+        setupMonacoWebWorker();
+      } catch (error) {
+        console.error('Error setting up Monaco web worker:', error);
+      } finally {
+        hasSetupMonacoWebWorker = true;
+      }
+    });
+
     const onMountCodeEditor: OnMount = useCallback(
       async (editor, monaco) => {
-        // setupMonacoWebWorker();
         const isYaml = language === 'yaml';
 
         const [GithubLightTheme, NightOwlTheme] = await Promise.all([
diff --git a/apps/web-tss/src/components/ui/inputs/AppCodeEditor/setupMonacoWebWorker.ts b/apps/web-tss/src/components/ui/inputs/AppCodeEditor/setupMonacoWebWorker.ts
index d6fb140d1..45023c1dd 100644
--- a/apps/web-tss/src/components/ui/inputs/AppCodeEditor/setupMonacoWebWorker.ts
+++ b/apps/web-tss/src/components/ui/inputs/AppCodeEditor/setupMonacoWebWorker.ts
@@ -1,20 +1,20 @@
-'use client';
+// Import workers as URLs using Vite's ?worker&url syntax
+import editorWorkerUrl from 'monaco-editor/esm/vs/editor/editor.worker?worker&url';
+import jsonWorkerUrl from 'monaco-editor/esm/vs/language/json/json.worker?worker&url';
+import yamlWorkerUrl from 'monaco-yaml/yaml.worker?worker&url';
+import { isServer } from '@/lib/window';
 
-export const setupMonacoWebWorker = () => {
-  if (typeof window !== 'undefined') {
+export const setupMonacoWebWorker = (): void => {
+  if (!isServer) {
     window.MonacoEnvironment = {
       getWorker(_moduleId, label) {
         switch (label) {
           case 'editorWorkerService':
-            return new Worker(
-              new URL('monaco-editor/esm/vs/editor/editor.worker', import.meta.url)
-            );
+            return new Worker(editorWorkerUrl);
           case 'json':
-            return new Worker(
-              new URL('monaco-editor/esm/vs/language/json/json.worker', import.meta.url)
-            );
+            return new Worker(jsonWorkerUrl);
           case 'yaml':
-            return new Worker(new URL('monaco-yaml/yaml.worker', import.meta.url));
+            return new Worker(yamlWorkerUrl);
           default:
             throw new Error(`Unknown label ${label}`);
         }
diff --git a/apps/web-tss/vite.config.ts b/apps/web-tss/vite.config.ts
index 6864003da..6af21374d 100644
--- a/apps/web-tss/vite.config.ts
+++ b/apps/web-tss/vite.config.ts
@@ -42,6 +42,9 @@ const config = defineConfig(({ command, mode }) => {
           })
         : undefined,
     ],
+    worker: {
+      format: 'es',
+    },
     build: {
       chunkSizeWarningLimit: 850,
       rollupOptions: {