Avoid two monaco-editor instances on CDN bundlers

.changeset/fix-cdn-monaco-instance.md

@@ -0,0 +1,9 @@
+---
+'@graphiql/react': patch
+---
+
+Fix syntax highlighting and autocompletion when GraphiQL is loaded from a CDN such as esm.sh.
+
+The monaco store previously imported `monaco-graphql/esm/monaco-editor.js`, a re-export module that both registers monaco-editor language contributions and re-exports the lean monaco-editor namespace. Some CDN bundlers (esm.sh's `?standalone` mode in particular) split that file in a way that leaves the consumer with two monaco-editor instances: one with the `graphql` and `json` languages registered, and one without. The lazily-loaded json/graphql tokenization runs against the unregistered instance and throws `Cannot set tokens provider for unknown language json`, breaking syntax highlighting and completion.
+
+The store now imports the language contribution side effects and the lean monaco-editor entry directly, so there is no re-export module for the bundler to split. Behavior is unchanged for npm-installed consumers using a bundler (Vite, webpack, Rollup, Next.js); module deduplication already produced a single instance there.

.changeset/fix-language-service-server-types.md

@@ -0,0 +1,5 @@
+---
+'graphql-language-service-server': patch
+---
+
+Point the package's `types` field at `dist/index.d.ts`, matching the CJS build output. The previous `typings: esm/index.d.ts` referenced the ESM build's output, which is emitted by a separate tsgo invocation that doesn't coordinate with the CJS project reference graph dependents rely on. `tsc` tolerated the misaligned path by falling back to `dist/index.d.ts` next to `main`; `tsgo` resolves project references more strictly and surfaced the misalignment as a "Could not find a declaration file" error during cold builds.

.changeset/pre.json

@@ -0,0 +1,34 @@
+{
+  "mode": "pre",
+  "tag": "alpha",
+  "initialVersions": {
+    "example-graphiql-vite": "0.0.0",
+    "example-graphiql-vite-react-router": "1.0.0",
+    "example-graphiql-webpack": "0.0.0",
+    "example-monaco-graphql-nextjs": "0.0.0",
+    "example-monaco-graphql-react-vite": "0.0.0",
+    "example-monaco-graphql-webpack": "0.0.0",
+    "cm6-graphql": "0.2.1",
+    "codemirror-graphql": "2.2.6",
+    "graphiql": "5.2.3",
+    "@graphiql/plugin-code-exporter": "5.1.2",
+    "@graphiql/plugin-doc-explorer": "0.4.2",
+    "@graphiql/plugin-explorer": "5.1.2",
+    "@graphiql/plugin-history": "0.4.2",
+    "@graphiql/react": "0.37.5",
+    "@graphiql/toolkit": "0.12.0",
+    "graphql-language-service": "5.5.1",
+    "graphql-language-service-cli": "3.5.0",
+    "graphql-language-service-server": "2.14.9",
+    "monaco-graphql": "1.8.0",
+    "vscode-graphql": "0.13.5",
+    "vscode-graphql-execution": "0.3.5",
+    "vscode-graphql-syntax": "1.3.11"
+  },
+  "changesets": [
+    "fix-cdn-monaco-instance",
+    "fix-language-service-server-types",
+    "revert-css-side-effect",
+    "revert-react-compiler-runtime-peer"
+  ]
+}

.changeset/revert-css-side-effect.md

@@ -0,0 +1,5 @@
+---
+'@graphiql/react': patch
+---
+
+Revert the `*.css` entry from `sideEffects` (added in #4211). The unbounded glob landed in the same release where esm.sh's `?standalone` builder started emitting a much larger preload stub that fragments `monaco-editor` into two instances and breaks syntax highlighting on CDN consumers (#4303). Removing it narrows the package.json delta between the last working version (0.37.3) and the first broken one (0.37.4). A more narrowly-scoped form may return in a follow-up if the webpack tree-shaking issue from #4211 recurs.

.changeset/revert-react-compiler-runtime-peer.md

@@ -0,0 +1,7 @@
+---
+'@graphiql/plugin-doc-explorer': patch
+'@graphiql/plugin-history': patch
+'@graphiql/react': patch
+---
+
+Move `react-compiler-runtime` back to `peerDependencies` (revert of #4140). The earlier move to `dependencies` landed in 0.37.4 alongside esm.sh's `?standalone` builder starting to emit a 115-line preload stub that fragments `monaco-editor` into two instances on CDN consumers (#4303). Putting the dependency back in `peerDependencies` narrows the package.json delta between the last-working `0.37.3` and the first-broken `0.37.4`.

examples/graphiql-vite-react-router/package.json

@@ -11,11 +11,11 @@
     "start": "react-router-serve dist/server/index.js"
   },
   "dependencies": {
-    "@graphiql/react": "^0.37.5",
+    "@graphiql/react": "^0.37.6-alpha.2",
     "@react-router/fs-routes": "^7",
     "@react-router/node": "^7",
     "@react-router/serve": "^7",
-    "graphiql": "^5.2.3",
+    "graphiql": "^5.2.4-alpha.0",
     "isbot": "^5",
     "react": "^19",
     "react-dom": "^19",

examples/graphiql-vite/package.json

@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "private": true,
   "dependencies": {
-    "graphiql": "^5.2.3",
+    "graphiql": "^5.2.4-alpha.0",
     "graphql": "^16",
     "react": "^19",
     "react-dom": "^19"

examples/graphiql-webpack/package.json

@@ -9,11 +9,11 @@
     "start": "NODE_ENV=development webpack-cli serve"
   },
   "dependencies": {
-    "@graphiql/plugin-code-exporter": "^5.1.2",
-    "@graphiql/plugin-explorer": "^5.1.2",
-    "@graphiql/react": "^0.37.5",
+    "@graphiql/plugin-code-exporter": "^5.1.3-alpha.0",
+    "@graphiql/plugin-explorer": "^5.1.3-alpha.0",
+    "@graphiql/react": "^0.37.6-alpha.2",
     "@graphiql/toolkit": "^0.12.0",
-    "graphiql": "^5.2.3",
+    "graphiql": "^5.2.4-alpha.0",
     "graphql": "^16",
     "graphql-ws": "^5",
     "react": "^19",

packages/graphiql-plugin-code-exporter/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @graphiql/plugin-code-exporter
 
+## 5.1.3-alpha.0
+
+### Patch Changes
+
+- Updated dependencies [[`5f44a27`](https://github.com/graphql/graphiql/commit/5f44a27ae0ff370b4f9eaffe8f92975091bfeb89)]:
+  - @graphiql/react@0.37.6-alpha.0
+
 ## 5.1.2
 
 ### Patch Changes

packages/graphiql-plugin-code-exporter/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graphiql/plugin-code-exporter",
-  "version": "5.1.2",
+  "version": "5.1.3-alpha.0",
   "sideEffects": [
     "*.css"
   ],
@@ -38,13 +38,13 @@
     "graphiql-code-exporter": "^3.0.3"
   },
   "peerDependencies": {
-    "@graphiql/react": "^0.37.0",
+    "@graphiql/react": "^0.37.6-alpha.0",
     "graphql": "^15.5.0 || ^16.0.0 || ^17.0.0-alpha.2",
     "react": "^18 || ^19",
     "react-dom": "^18 || ^19"
   },
   "devDependencies": {
-    "@graphiql/react": "^0.37.4",
+    "@graphiql/react": "^0.37.6-alpha.0",
     "@vitejs/plugin-react": "^4.4.1",
     "graphql": "^16.9.0",
     "react": "^19.1.0",

packages/graphiql-plugin-doc-explorer/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @graphiql/plugin-doc-explorer
 
+## 0.4.3-alpha.1
+
+### Patch Changes
+
+- [#4308](https://github.com/graphql/graphiql/pull/4308) [`598ffa3`](https://github.com/graphql/graphiql/commit/598ffa3de00f28fe66edc25527a3fc65e119c2d1) Thanks [@trevor-scheer](https://github.com/trevor-scheer)! - Move `react-compiler-runtime` back to `peerDependencies` (revert of #4140). The earlier move to `dependencies` landed in 0.37.4 alongside esm.sh's `?standalone` builder starting to emit a 115-line preload stub that fragments `monaco-editor` into two instances on CDN consumers (#4303). Putting the dependency back in `peerDependencies` narrows the package.json delta between the last-working `0.37.3` and the first-broken `0.37.4`.
+
+## 0.4.3-alpha.0
+
+### Patch Changes
+
+- Updated dependencies [[`5f44a27`](https://github.com/graphql/graphiql/commit/5f44a27ae0ff370b4f9eaffe8f92975091bfeb89)]:
+  - @graphiql/react@0.37.6-alpha.0
+
 ## 0.4.2
 
 ### Patch Changes

packages/graphiql-plugin-doc-explorer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graphiql/plugin-doc-explorer",
-  "version": "0.4.2",
+  "version": "0.4.3-alpha.1",
   "sideEffects": [
     "*.css"
   ],
@@ -38,18 +38,18 @@
     "test": "vitest run"
   },
   "peerDependencies": {
-    "@graphiql/react": "^0.37.0",
+    "@graphiql/react": "^0.37.6-alpha.0",
     "graphql": "^15.5.0 || ^16.0.0 || ^17.0.0",
     "react": "^18 || ^19",
+    "react-compiler-runtime": "19.1.0-rc.1",
     "react-dom": "^18 || ^19"
   },
   "dependencies": {
     "@headlessui/react": "^2.2",
-    "react-compiler-runtime": "19.1.0-rc.1",
     "zustand": "^5"
   },
   "devDependencies": {
-    "@graphiql/react": "^0.37.4",
+    "@graphiql/react": "^0.37.6-alpha.2",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",

packages/graphiql-plugin-explorer/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @graphiql/plugin-explorer
 
+## 5.1.3-alpha.0
+
+### Patch Changes
+
+- Updated dependencies [[`5f44a27`](https://github.com/graphql/graphiql/commit/5f44a27ae0ff370b4f9eaffe8f92975091bfeb89)]:
+  - @graphiql/react@0.37.6-alpha.0
+
 ## 5.1.2
 
 ### Patch Changes

packages/graphiql-plugin-explorer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graphiql/plugin-explorer",
-  "version": "5.1.2",
+  "version": "5.1.3-alpha.0",
   "sideEffects": [
     "*.css"
   ],
@@ -37,13 +37,13 @@
     "graphiql-explorer": "^0.9.0"
   },
   "peerDependencies": {
-    "@graphiql/react": "^0.37.0",
+    "@graphiql/react": "^0.37.6-alpha.0",
     "graphql": "^15.5.0 || ^16.0.0 || ^17.0.0-alpha.2",
     "react": "^18 || ^19",
     "react-dom": "^18 || ^19"
   },
   "devDependencies": {
-    "@graphiql/react": "^0.37.4",
+    "@graphiql/react": "^0.37.6-alpha.0",
     "@vitejs/plugin-react": "^4.4.1",
     "graphql": "^16.9.0",
     "react": "^19.1.0",

packages/graphiql-plugin-history/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @graphiql/plugin-history
 
+## 0.4.3-alpha.1
+
+### Patch Changes
+
+- [#4308](https://github.com/graphql/graphiql/pull/4308) [`598ffa3`](https://github.com/graphql/graphiql/commit/598ffa3de00f28fe66edc25527a3fc65e119c2d1) Thanks [@trevor-scheer](https://github.com/trevor-scheer)! - Move `react-compiler-runtime` back to `peerDependencies` (revert of #4140). The earlier move to `dependencies` landed in 0.37.4 alongside esm.sh's `?standalone` builder starting to emit a 115-line preload stub that fragments `monaco-editor` into two instances on CDN consumers (#4303). Putting the dependency back in `peerDependencies` narrows the package.json delta between the last-working `0.37.3` and the first-broken `0.37.4`.
+
+## 0.4.3-alpha.0
+
+### Patch Changes
+
+- Updated dependencies [[`5f44a27`](https://github.com/graphql/graphiql/commit/5f44a27ae0ff370b4f9eaffe8f92975091bfeb89)]:
+  - @graphiql/react@0.37.6-alpha.0
+
 ## 0.4.2
 
 ### Patch Changes

packages/graphiql-plugin-history/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graphiql/plugin-history",
-  "version": "0.4.2",
+  "version": "0.4.3-alpha.1",
   "sideEffects": [
     "*.css"
   ],
@@ -37,17 +37,17 @@
     "test": "vitest run"
   },
   "peerDependencies": {
-    "@graphiql/react": "^0.37.0",
+    "@graphiql/react": "^0.37.6-alpha.0",
     "react": "^18 || ^19",
+    "react-compiler-runtime": "19.1.0-rc.1",
     "react-dom": "^18 || ^19"
   },
   "dependencies": {
     "@graphiql/toolkit": "^0.12.0",
-    "react-compiler-runtime": "19.1.0-rc.1",
     "zustand": "^5"
   },
   "devDependencies": {
-    "@graphiql/react": "^0.37.4",
+    "@graphiql/react": "^0.37.6-alpha.2",
     "@testing-library/react": "^16.1.0",
     "@vitejs/plugin-react": "^4.4.1",
     "babel-plugin-react-compiler": "19.1.0-rc.1",

packages/graphiql-react/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @graphiql/react
 
+## 0.37.6-alpha.2
+
+### Patch Changes
+
+- [#4308](https://github.com/graphql/graphiql/pull/4308) [`598ffa3`](https://github.com/graphql/graphiql/commit/598ffa3de00f28fe66edc25527a3fc65e119c2d1) Thanks [@trevor-scheer](https://github.com/trevor-scheer)! - Move `react-compiler-runtime` back to `peerDependencies` (revert of #4140). The earlier move to `dependencies` landed in 0.37.4 alongside esm.sh's `?standalone` builder starting to emit a 115-line preload stub that fragments `monaco-editor` into two instances on CDN consumers (#4303). Putting the dependency back in `peerDependencies` narrows the package.json delta between the last-working `0.37.3` and the first-broken `0.37.4`.
+
+## 0.37.6-alpha.1
+
+### Patch Changes
+
+- [#4308](https://github.com/graphql/graphiql/pull/4308) [`8ac17d1`](https://github.com/graphql/graphiql/commit/8ac17d13f8d82537d4f8c4b5539448d6515d5daf) Thanks [@trevor-scheer](https://github.com/trevor-scheer)! - Revert the `*.css` entry from `sideEffects` (added in #4211). The unbounded glob landed in the same release where esm.sh's `?standalone` builder started emitting a much larger preload stub that fragments `monaco-editor` into two instances and breaks syntax highlighting on CDN consumers (#4303). Removing it narrows the package.json delta between the last working version (0.37.3) and the first broken one (0.37.4). A more narrowly-scoped form may return in a follow-up if the webpack tree-shaking issue from #4211 recurs.
+
+## 0.37.6-alpha.0
+
+### Patch Changes
+
+- [#4308](https://github.com/graphql/graphiql/pull/4308) [`5f44a27`](https://github.com/graphql/graphiql/commit/5f44a27ae0ff370b4f9eaffe8f92975091bfeb89) Thanks [@trevor-scheer](https://github.com/trevor-scheer)! - Fix syntax highlighting and autocompletion when GraphiQL is loaded from a CDN such as esm.sh.
+
+  The monaco store previously imported `monaco-graphql/esm/monaco-editor.js`, a re-export module that both registers monaco-editor language contributions and re-exports the lean monaco-editor namespace. Some CDN bundlers (esm.sh's `?standalone` mode in particular) split that file in a way that leaves the consumer with two monaco-editor instances: one with the `graphql` and `json` languages registered, and one without. The lazily-loaded json/graphql tokenization runs against the unregistered instance and throws `Cannot set tokens provider for unknown language json`, breaking syntax highlighting and completion.
+
+  The store now imports the language contribution side effects and the lean monaco-editor entry directly, so there is no re-export module for the bundler to split. Behavior is unchanged for npm-installed consumers using a bundler (Vite, webpack, Rollup, Next.js); module deduplication already produced a single instance there.
+
 ## 0.37.5
 
 ### Patch Changes

packages/graphiql-react/package.json

@@ -1,9 +1,8 @@
 {
   "name": "@graphiql/react",
-  "version": "0.37.5",
+  "version": "0.37.6-alpha.2",
   "sideEffects": [
-    "dist/setup-workers/*",
-    "*.css"
+    "dist/setup-workers/*"
   ],
   "repository": {
     "type": "git",
@@ -47,6 +46,7 @@
   "peerDependencies": {
     "graphql": "^15.5.0 || ^16.0.0 || ^17.0.0",
     "react": "^18 || ^19",
+    "react-compiler-runtime": "19.1.0-rc.1",
     "react-dom": "^18 || ^19"
   },
   "dependencies": {
@@ -64,7 +64,6 @@
     "monaco-editor": "0.52.2",
     "monaco-graphql": "^1.8.0",
     "prettier": "^3.5.3",
-    "react-compiler-runtime": "19.1.0-rc.1",
     "set-value": "^4.1.0",
     "zustand": "^5"
   },

packages/graphiql-react/src/env.d.ts

@@ -4,6 +4,10 @@ declare namespace globalThis {
   var __MONACO: typeof monaco;
 }
 
+declare module 'monaco-editor/esm/vs/editor/edcore.main.js' {
+  export * from 'monaco-editor';
+}
+
 declare module 'monaco-editor/esm/vs/editor/common/standalone/standaloneEnums.js' {
   export { KeyCode } from 'monaco-graphql/monaco-editor';
 }

packages/graphiql-react/src/stores/monaco.ts

@@ -70,8 +70,18 @@ export const monacoStore = createStore<MonacoStoreType>((set, get) => ({
       if (isInitialized) {
         return;
       }
-      const [monaco, { initializeMode }] = await Promise.all([
-        import('monaco-graphql/esm/monaco-editor.js'),
+      // Import monaco-editor's `graphql` and `json` contributions directly
+      // rather than via `monaco-graphql/esm/monaco-editor.js`. That re-export
+      // module trips up esm.sh's standalone bundler into emitting two monaco
+      // instances (one bundled, one lazily fetched), which produces
+      // "Cannot set tokens provider for unknown language json" at runtime on
+      // CDN setups. See https://github.com/graphql/graphiql/issues/4303.
+      const [, , monaco, { initializeMode }] = await Promise.all([
+        import('monaco-editor/esm/vs/basic-languages/graphql/graphql.contribution.js'),
+        import('monaco-editor/esm/vs/language/json/monaco.contribution.js'),
+        import('monaco-editor/esm/vs/editor/edcore.main.js') as Promise<
+          typeof import('monaco-editor')
+        >,
         import('monaco-graphql/esm/lite.js'),
       ]);
       globalThis.__MONACO = monaco;

packages/graphiql/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Change Log
 
+## 5.2.4-alpha.0
+
+### Patch Changes
+
+- Updated dependencies [[`5f44a27`](https://github.com/graphql/graphiql/commit/5f44a27ae0ff370b4f9eaffe8f92975091bfeb89)]:
+  - @graphiql/react@0.37.6-alpha.0
+  - @graphiql/plugin-doc-explorer@0.4.3-alpha.0
+  - @graphiql/plugin-history@0.4.3-alpha.0
+
 ## 5.2.3
 
 ### Patch Changes

packages/graphiql/package.json

@@ -1,6 +1,6 @@
 {
   "name": "graphiql",
-  "version": "5.2.3",
+  "version": "5.2.4-alpha.0",
   "sideEffects": [
     "dist/setup-workers/*",
     "*.css"
@@ -50,9 +50,9 @@
     "test": "vitest run"
   },
   "dependencies": {
-    "@graphiql/plugin-doc-explorer": "^0.4.2",
-    "@graphiql/plugin-history": "^0.4.2",
-    "@graphiql/react": "^0.37.4",
+    "@graphiql/plugin-doc-explorer": "^0.4.3-alpha.0",
+    "@graphiql/plugin-history": "^0.4.3-alpha.0",
+    "@graphiql/react": "^0.37.6-alpha.0",
     "react-compiler-runtime": "19.1.0-rc.1"
   },
   "peerDependencies": {