From 3a60bdefc73dd643e3bd78213ab930e366607d71 Mon Sep 17 00:00:00 2001 From: Nate Kelley Date: Tue, 2 Sep 2025 11:56:06 -0600 Subject: [PATCH] fixed monaco issue --- .../ui/inputs/AppCodeEditor/AppCodeEditor.tsx | 8 +- .../inputs/AppCodeEditor/MonacoWebWorker.ts | 26 ------ .../AppCodeEditor/setupMonacoWorkers.ts | 25 ++++++ .../metric-store-devtools.tsx | 5 +- .../tanstack-devtools-impl.tsx | 87 ++++++++++++++----- .../tanstack-dev-tools/tanstack-devtools.tsx | 4 +- apps/web-tss/vite.config.ts | 32 ++++++- 7 files changed, 127 insertions(+), 60 deletions(-) delete mode 100644 apps/web-tss/src/components/ui/inputs/AppCodeEditor/MonacoWebWorker.ts create mode 100644 apps/web-tss/src/components/ui/inputs/AppCodeEditor/setupMonacoWorkers.ts 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 aa1328b40..e5c83689b 100644 --- a/apps/web-tss/src/components/ui/inputs/AppCodeEditor/AppCodeEditor.tsx +++ b/apps/web-tss/src/components/ui/inputs/AppCodeEditor/AppCodeEditor.tsx @@ -1,8 +1,6 @@ //https://github.com/popsql/monaco-sql-languages/blob/main/example/src/App.js#L2 //https://dtstack.github.io/monaco-sql-languages/ -import './MonacoWebWorker'; - import { Editor } from '@monaco-editor/react'; import { ClientOnly } from '@tanstack/react-router'; import type { editor } from 'monaco-editor/esm/vs/editor/editor.api'; @@ -101,6 +99,12 @@ export const AppCodeEditor = forwardRef const onMountCodeEditor = useCallback( async (editor: editor.IStandaloneCodeEditor, monaco: typeof import('monaco-editor')) => { + // Setup Monaco web workers (client-side only) + if (typeof window !== 'undefined') { + const { setupMonacoWorkers } = await import('./setupMonacoWorkers'); + await setupMonacoWorkers(); + } + const [GithubLightTheme, NightOwlTheme] = await Promise.all([ (await import('./themes/github_light_theme')).default, (await import('./themes/tomorrow_night_theme')).default, diff --git a/apps/web-tss/src/components/ui/inputs/AppCodeEditor/MonacoWebWorker.ts b/apps/web-tss/src/components/ui/inputs/AppCodeEditor/MonacoWebWorker.ts deleted file mode 100644 index b0df5ca55..000000000 --- a/apps/web-tss/src/components/ui/inputs/AppCodeEditor/MonacoWebWorker.ts +++ /dev/null @@ -1,26 +0,0 @@ -import { loader } from '@monaco-editor/react'; -import { isServer } from '@/lib/window'; - -if (!isServer) { - self.MonacoEnvironment = { - async getWorker(_, label) { - if (label === 'json') { - const jsonWorker = await import('monaco-editor/esm/vs/language/json/json.worker?worker'); - return new jsonWorker.default(); - } - if (label === 'yaml') { - // For YAML, we'll use the JSON worker as it provides similar functionality - const jsonWorker = await import('monaco-editor/esm/vs/language/json/json.worker?worker'); - return new jsonWorker.default(); - } - // Default to editorWorkerService for all other languages - const editorWorker = await import('monaco-editor/esm/vs/editor/editor.worker?worker'); - return new editorWorker.default(); - }, - }; - - const monaco = await import('monaco-editor'); - loader.config({ monaco: monaco.default }); - - loader.init(); -} diff --git a/apps/web-tss/src/components/ui/inputs/AppCodeEditor/setupMonacoWorkers.ts b/apps/web-tss/src/components/ui/inputs/AppCodeEditor/setupMonacoWorkers.ts new file mode 100644 index 000000000..628c595ad --- /dev/null +++ b/apps/web-tss/src/components/ui/inputs/AppCodeEditor/setupMonacoWorkers.ts @@ -0,0 +1,25 @@ +// This file is only imported client-side, so worker imports won't be processed during SSR +export const setupMonacoWorkers = async () => { + if (typeof window === 'undefined') return; + + self.MonacoEnvironment = { + async getWorker(_, label) { + if (label === 'json') { + const { default: Worker } = await import( + 'monaco-editor/esm/vs/language/json/json.worker?worker' + ); + return new Worker(); + } + if (label === 'yaml') { + // For YAML, we'll use the JSON worker as it provides similar functionality + const { default: Worker } = await import( + 'monaco-editor/esm/vs/language/json/json.worker?worker' + ); + return new Worker(); + } + // Default to editorWorkerService for all other languages + const { default: Worker } = await import('monaco-editor/esm/vs/editor/editor.worker?worker'); + return new Worker(); + }, + }; +}; diff --git a/apps/web-tss/src/integrations/tanstack-dev-tools/metric-store-devtools.tsx b/apps/web-tss/src/integrations/tanstack-dev-tools/metric-store-devtools.tsx index d9a77855a..db9e73733 100644 --- a/apps/web-tss/src/integrations/tanstack-dev-tools/metric-store-devtools.tsx +++ b/apps/web-tss/src/integrations/tanstack-dev-tools/metric-store-devtools.tsx @@ -140,7 +140,4 @@ function DevtoolPanel() { ); } -export default { - name: 'Metric Original Store', - render: , -}; +export default DevtoolPanel; diff --git a/apps/web-tss/src/integrations/tanstack-dev-tools/tanstack-devtools-impl.tsx b/apps/web-tss/src/integrations/tanstack-dev-tools/tanstack-devtools-impl.tsx index 0cbb80a51..c24e851d1 100644 --- a/apps/web-tss/src/integrations/tanstack-dev-tools/tanstack-devtools-impl.tsx +++ b/apps/web-tss/src/integrations/tanstack-dev-tools/tanstack-devtools-impl.tsx @@ -1,32 +1,73 @@ -import { TanStackDevtools as TanstackDevtoolsBase } from '@tanstack/react-devtools'; -import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools'; import { ClientOnly } from '@tanstack/react-router'; -import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'; -import type React from 'react'; -import StoreDevtools from './metric-store-devtools'; +import { lazy, Suspense } from 'react'; + +//import StoreDevtools from './metric-store-devtools'; + +const LazyTanstackDevtools = lazy(() => + import('@tanstack/react-devtools').then((mod) => ({ + default: mod.TanStackDevtools, + })) +); + +const LazyReactQueryDevtoolsPanel = lazy(() => + import('@tanstack/react-query-devtools').then((mod) => ({ + default: mod.ReactQueryDevtoolsPanel, + })) +); + +const LazyTanStackRouterDevtoolsPanel = lazy(() => + import('@tanstack/react-router-devtools').then((mod) => ({ + default: mod.TanStackRouterDevtoolsPanel, + })) +); + +const LazyMetricStoreDevtools = lazy(() => + import('./metric-store-devtools').then((mod) => ({ + default: mod.default, + })) +); // The actual devtools component implementation const TanstackDevtoolsImpl: React.FC = () => { + if (import.meta.env.SSR) return null; // never render on SSR + return ( - , - }, - { - name: 'Tanstack Router', - render: , - }, - StoreDevtools, - ]} - /> + + + + + ), + }, + { + name: 'Tanstack Router', + render: ( + + + + ), + }, + { + name: 'Metric Original Store', + render: ( + + + + ), + }, + ]} + /> + ); }; diff --git a/apps/web-tss/src/integrations/tanstack-dev-tools/tanstack-devtools.tsx b/apps/web-tss/src/integrations/tanstack-dev-tools/tanstack-devtools.tsx index af6f080c9..24d3828ce 100644 --- a/apps/web-tss/src/integrations/tanstack-dev-tools/tanstack-devtools.tsx +++ b/apps/web-tss/src/integrations/tanstack-dev-tools/tanstack-devtools.tsx @@ -2,8 +2,10 @@ import { ClientOnly } from '@tanstack/react-router'; import React, { lazy, Suspense, useEffect, useState } from 'react'; import { useHotkeys } from 'react-hotkeys-hook'; import { isDev } from '@/config/dev'; +import { isServer } from '@/lib/window'; -const ENABLE_TANSTACK_PANEL = process.env.VITE_ENABLE_TANSTACK_PANEL === 'true' || isDev; +const ENABLE_TANSTACK_PANEL = + (process.env.VITE_ENABLE_TANSTACK_PANEL === 'true' || isDev) && !isServer; // Lazy load the actual devtools component const LazyTanstackDevtools = lazy(() => diff --git a/apps/web-tss/vite.config.ts b/apps/web-tss/vite.config.ts index 5affe0e2f..6ff4a7986 100644 --- a/apps/web-tss/vite.config.ts +++ b/apps/web-tss/vite.config.ts @@ -15,6 +15,27 @@ const config = defineConfig(({ command, mode }) => { return { server: { port: 3000 }, + ssr: { + // Exclude Monaco Editor and related from SSR bundle + external: (id) => { + // Monaco Editor and related + if ( + id.includes('monaco-editor') || + id.includes('@monaco-editor') || + id.includes('setupMonacoWorkers') + ) { + return true; + } + // TanStack devtools (now handled via dynamic imports, but keep basic exclusions) + if (id.includes('@tanstack/devtools')) { + return true; + } + + return false; + }, + // Exclude Monaco Editor workers specifically + noExternal: ['!**/monaco-editor/**/*worker*'], + }, plugins: [ // this is the plugin that enables path aliases viteTsConfigPaths({ projects: ['./tsconfig.json'] }), @@ -38,9 +59,13 @@ const config = defineConfig(({ command, mode }) => { return true; } // Exclude Monaco Editor from server-side bundle (Cloudflare Workers can't handle it) - // if (id.includes('monaco-editor') || id.includes('@monaco-editor')) { - // return true; - // } + if (id.includes('monaco-editor') || id.includes('@monaco-editor')) { + return true; + } + // Exclude Monaco worker setup file from SSR + if (id.includes('setupMonacoWorkers')) { + return true; + } // Don't externalize React and React DOM - let them be bundled return false; }, @@ -60,7 +85,6 @@ const config = defineConfig(({ command, mode }) => { if (id.includes('zod')) { return 'vendor-zod'; } - // Monaco Editor is externalized, so no need to chunk it if (id.includes('@tanstack')) { return 'vendor-tanstack'; }