try esm.sh

Author: dimaMachina

.changeset/soft-cars-notice.md

@@ -1,7 +1,7 @@
 ---
 'graphiql': major
 '@graphiql/react': minor
-'monaco-graphql': major
+'monaco-graphql': minor
 ---
 
 replace Codemirror editor with Monaco editor and Monaco GraphQL

packages/graphiql-react/package.json

@@ -50,7 +50,7 @@
     "react-dom": "^18 || ^19"
   },
   "dependencies": {
-    "monaco-editor": "^0.52.2",
+    "monaco-editor": "^0.47",
     "monaco-graphql": "^1.6.1",
     "jsonc-parser": "^3.3.1",
     "prettier": "^3.5.3",

packages/graphiql/index.html

@@ -33,28 +33,23 @@
       src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"
     ></script>
     <script type="module">
-      /**
-       * Setup workers for GraphiQL UMD bundle
-       */
-      function getWorkerUrl(label) {
-        switch (label) {
-          case 'json':
-            return '/dist/workers/json.worker.js';
-          case 'graphql':
-            return '/dist/workers/graphql.worker.js';
-        }
-        return '/dist/workers/editor.worker.js';
-      }
+      import createJSONWorker from 'https://esm.sh/monaco-editor@0.47/esm/vs/language/json/json.worker.js?worker'
+      import createGraphQLWorker
+        from 'https://esm.sh/monaco-graphql@2.0.0-canary-1ba7d921.0/esm/graphql.worker.js?worker'
+      import createEditorWorker from 'https://esm.sh/monaco-editor@0.47/esm/vs/editor/editor.worker.js?worker'
 
       globalThis.MonacoEnvironment = {
-        // `MonacoEnvironment.getWorkerUrl` throws Uncaught SyntaxError: Unexpected token 'export',
-        // we use` MonacoEnvironment getWorker` instead
         getWorker(_workerId, label) {
-          console.log('setup workers in cdn');
-          const url = new URL(getWorkerUrl(label), import.meta.url);
-          return new Worker(url, { type: 'module' });
-        },
-      };
+          console.log({ label })
+          switch (label) {
+            case 'json':
+              return createJSONWorker({ name: 'json.worker' })
+            case 'graphql':
+              return createGraphQLWorker({ name: 'graphql.worker' })
+          }
+          return createEditorWorker({ name: 'editor.worker' })
+        }
+      }
     </script>
     <script src="/dist/index.umd.js"></script>
     <script type="module" src="/dist/e2e.js"></script>

packages/graphiql/src/cdn.ts

@@ -9,7 +9,6 @@ import * as GraphiQLReact from '@graphiql/react';
 import { createGraphiQLFetcher, createLocalStorage } from '@graphiql/toolkit';
 import * as GraphQL from 'graphql';
 import { GraphiQL } from './GraphiQL';
-import './setup-workers/vite';
 
 const majorVersion = parseInt(version.slice(0, 2), 10);
 

packages/graphiql/vite.config.mts

@@ -63,16 +63,6 @@ const umdConfig = defineConfig({
       },
     },
   },
-  worker: {
-    format: 'es',
-    rollupOptions: {
-      output: {
-        entryFileNames: 'workers/[name].js',
-        // Just to group worker assets, add shared/internal chunks too
-        chunkFileNames: 'workers/[name].js',
-      },
-    },
-  },
 });
 
 const esmConfig = defineConfig({

yarn.lock

@@ -14487,7 +14487,7 @@ monaco-editor-webpack-plugin@^7.0.1:
   dependencies:
     loader-utils "^2.0.2"
 
-monaco-editor@0.47.0, monaco-editor@^0.39.0, monaco-editor@^0.52.2:
+monaco-editor@0.47.0, monaco-editor@^0.39.0, monaco-editor@^0.47, monaco-editor@^0.52.2:
   version "0.47.0"
   resolved "https://registry.yarnpkg.com/monaco-editor/-/monaco-editor-0.47.0.tgz#39865d67e0c9fb8c6b49e760bf9caf6a6650d28e"
   integrity sha512-VabVvHvQ9QmMwXu4du008ZDuyLnHs9j7ThVFsiJoXSOQk18+LF89N4ADzPbFenm0W4V2bGHnFBztIRQTgBfxzw==