GraphiQL playground broken — esm.sh serves graphiql@5.x which has unfixable multi-instance module issues

[bart-secretninjas]

Bug description

The GraphiQL playground at /cp/graphiql is broken in Statamic v6.20.0. The graphiql/graphiql.blade.php view loads packages from esm.sh without version pins. esm.sh now serves graphiql@5.2.3 as the latest, which switched from CodeMirror to Monaco editor. This causes the playground to fail with Monaco initialization errors that cannot be resolved via importmap configuration.

Summary
The GraphiQL playground at /cp/graphiql is broken in Statamic v6.20.0. The graphiql/graphiql.blade.php view loads packages from esm.sh without version pins. esm.sh now serves graphiql@5.2.3 as the latest, which switched from CodeMirror to Monaco editor. This causes the playground to fail with Monaco initialization errors that cannot be resolved via importmap configuration.

Error

Uncaught (in promise) Error: Cannot set tokens provider for unknown language json
    at Object.setTokensProvider (standaloneLanguages.js:275:15)
    at registerProviders (jsonMode.js:2682:59)
    at setupMode (jsonMode.js:2712:3)
    at monaco.contribution.js:102:33

Root cause
esm.sh builds each Monaco sub-module (edcore.main.mjs, monaco.contribution.mjs, etc.) as a self-contained fat bundle. Each bundle inlines its own copy of Monaco's internal registries. Because monaco-graphql and @graphiql/react import Monaco from different esm.sh sub-paths, they each get a separate Monaco instance with separate language registries — monaco.languages.json set in one instance is invisible to the other.

This is not fixable by adjusting the importmap. Every configuration attempted (version pinning, ?external=, ?deps=, ?standalone, explicit JSON contribution imports, separate <script> tags) hits the same fundamental wall: esm.sh cannot serve Monaco as a shared singleton across its own bundle boundaries.

Fix
The importmap approach needs either:

Option A — Pin graphiql to 3.x (CodeMirror, no Monaco): The importmap was originally written for graphiql@3.x which uses CodeMirror. Pin the versions:

"graphiql": "https://esm.sh/graphiql@3.7.1?...",
"@graphiql/react": "https://esm.sh/@graphiql/react@0.26.2?...",
Note: [graphiql@3.x](mailto:graphiql@3.x) requires React ^16-18, so the importmap React version must also be downgraded to 18.x.

Option B — Switch to a pre-built UMD bundle (simplest, most robust):

<script src="https://unpkg.com/react@18.3.1/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/graphiql@2.4.7/graphiql.min.js"></script>

A single pre-built bundle sidesteps all CDN module-splitting issues entirely.

Option C — Pin graphiql@5.x versions in the importmap: If graphiql@5.x is preferred, all packages must be pinned AND Monaco must somehow be deduplicated. This is not achievable via esm.sh's standard import mechanisms.

How to reproduce

Install Statamic v6.20.0
Enable GraphQL (STATAMIC_GRAPHQL_ENABLED=true)
Visit /cp/graphiql
Open browser console → see Monaco error

Logs

Environment

Environment
Laravel Version: 12.61.0
PHP Version: 8.4.21
Composer Version: 2.9.5
Environment: local
Debug Mode: ENABLED
Maintenance Mode: OFF
Timezone: UTC
Locale: en

Cache
Config: NOT CACHED
Events: NOT CACHED
Routes: NOT CACHED
Views: CACHED

Drivers
Broadcasting: log
Cache: file
Database: mysql
Logs: stack / single
Mail: smtp
Queue: sync
Session: file

Storage
public/storage: NOT LINKED

Locales
Installed: cs, da, de, en, nb, nl, nn
LaravelLang\Actions\Plugin: 1.13.1
LaravelLang\Attributes\Plugin: 2.16.3
LaravelLang\HttpStatuses\Plugin: 3.13.1
LaravelLang\Lang\Plugin: 15.31.1
LaravelLang\MoonShine\Plugin: INCORRECT
LaravelLang\StarterKits\Plugin: 1.14.1
Locales Version: 2.11.0
Protected: en
Publisher Version: 16.8.0

Statamic
Addons: 6
License Key: Not set
Sites: 2 (Nederlands, Deutsch)
Stache Watcher: Enabled (auto)
Static Caching: Disabled
Version: 6.20.0 PRO

Statamic Addons
jacksleight/statamic-bard-texstyle: 4.1.0
statamic/eloquent-driver: 5.9.0
stillat/relationships: 2.4.0
studio1902/statamic-peak-commands: 10.6.0
studio1902/statamic-peak-seo: 11.2.0
studio1902/statamic-peak-tools: 9.1.0

Statamic Eloquent Driver
Addon Settings: file
Asset Containers: file
Assets: eloquent
Blueprints: file
Collection Trees: eloquent
Collections: file
Entries: eloquent
Fieldsets: file
Form Submissions: eloquent
Forms: file
Global Sets: file
Global Variables: eloquent
Navigation Trees: eloquent
Navigations: file
Revisions: file
Sites: file
Taxonomies: file
Terms: eloquent
Tokens: eloquent

Installation

Fresh statamic/statamic site via CLI

Additional details

No response