fix(front): set up Monaco workers for GraphQL playground (#21620)
## Problem The GraphQL API playground (`/settings/playground/graphql/core`) crashes with: ``` Uncaught Error: Cannot read properties of undefined (reading 'toUrl') at FileAccessImpl.toUri (monaco-editor) at WorkerManager.getLanguageServiceWorker (graphqlMode) at DiagnosticsAdapter._doValidate (graphqlMode) ``` ## Root cause GraphiQL 5 (adopted in the React 19 migration, #21531) renders its editors with **Monaco** instead of CodeMirror. Monaco spawns web workers for GraphQL validation/autocomplete and needs a `globalThis.MonacoEnvironment.getWorker` factory. None was ever configured, so Monaco fell back to a main-thread worker whose URL resolves to `undefined` → the `toUrl` crash. ## Why not the official helper GraphiQL ships `@graphiql/react/setup-workers/vite`, but its bundled `?worker` imports are incompatible with our rolldown-based Vite setup: - **pre-bundled** (in `optimizeDeps`): esbuild's optimizer can't process `?worker` → the dep 504s and the page fails to load the chunk. - **excluded** from `optimizeDeps`: rolldown tries to load `editor.worker.js?worker` as a literal path → `UNLOADABLE_DEPENDENCY`, crashing the dev server. ## Fix - Register `MonacoEnvironment.getWorker` in **app source** (`setupGraphiqlMonacoWorkers.ts`), where Vite's worker plugin handles `?worker` reliably, and side-effect import it from `GraphQLPlayground.tsx` before GraphiQL mounts. - Align `monaco-editor` to `0.52.2` and add `monaco-graphql@1.8.0` as direct deps so the workers run on the **same deduped Monaco instance** GraphiQL uses on the main thread (a version mismatch would break the worker protocol). ## Verification Ran the playground locally against the dev server: - Editor renders, syntax highlighting works, operation name parses (GraphQL language service alive). - All three worker files (`editor`, `json`, `graphql`) load `200` and instantiate as module workers. - Console is free of `toUrl` / `Cannot read` errors and the "must define MonacoEnvironment.getWorker" warning. - `oxlint`, `oxfmt`, and `nx typecheck twenty-front` pass. <!-- This is an auto-generated description by cubic. --> <a href="https://cubic.dev/pr/twentyhq/twenty/pull/21620?utm_source=github" target="_blank" rel="noopener noreferrer" data-no-image-dialog="true"><picture><source media="(prefers-color-scheme: dark)" srcset="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"><source media="(prefers-color-scheme: light)" srcset="https://www.cubic.dev/buttons/review-in-cubic-light.svg"><img alt="Review in cubic" src="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"></picture></a> <!-- End of auto-generated description by cubic. -->
This commit is contained in:
@@ -1,3 +1,4 @@
|
||||
import '@/settings/playground/utils/setupGraphiqlMonacoWorkers';
|
||||
import {
|
||||
isPlaygroundApiKeyFresh,
|
||||
playgroundApiKeyState,
|
||||
|
||||
+22
@@ -0,0 +1,22 @@
|
||||
import { type Environment } from 'monaco-editor';
|
||||
import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker.js?worker';
|
||||
import JsonWorker from 'monaco-editor/esm/vs/language/json/json.worker.js?worker';
|
||||
import GraphqlWorker from 'monaco-graphql/esm/graphql.worker.js?worker';
|
||||
|
||||
// GraphiQL 5's Monaco editors need a worker factory; without it Monaco throws "Cannot read properties of undefined (reading 'toUrl')".
|
||||
const monacoEnvironment: Environment = {
|
||||
getWorker: (_workerId, label) => {
|
||||
switch (label) {
|
||||
case 'json':
|
||||
return new JsonWorker();
|
||||
case 'graphql':
|
||||
return new GraphqlWorker();
|
||||
default:
|
||||
return new EditorWorker();
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
(
|
||||
globalThis as unknown as { MonacoEnvironment?: Environment }
|
||||
).MonacoEnvironment = monacoEnvironment;
|
||||
Reference in New Issue
Block a user