Skip to content

Playground editor fails to load: duplicate @codemirror/state versions from esm.sh #25381

@Mossaka

Description

@Mossaka

Bug

The gh-aw Playground editor fails to initialize the CodeMirror editors. The page loads but shows "Loading..." indefinitely with no editor content.

Console Error

Unrecognized extension value in extension set ([object Object]).
This sometimes happens because multiple instances of @codemirror/state are loaded, breaking instanceof checks.

at editor.js:119 (new EditorView({...}))

Root Cause

docs/public/editor/editor.js pins specific old versions of CodeMirror packages:

import { EditorView, basicSetup } from 'https://esm.sh/codemirror@6.0.2';
import { EditorState, Compartment } from 'https://esm.sh/@codemirror/state@6.5.4';
import { keymap } from 'https://esm.sh/@codemirror/view@6.39.14';
import { indentUnit } from 'https://esm.sh/@codemirror/language@6.12.1';

However, esm.sh resolves transitive dependencies to the latest matching semver. For example:

  • @codemirror/view@6.41.0 (resolved by codemirror@6.0.2 via ^6.0.0) depends on @codemirror/state@^6.6.0
  • This pulls in @codemirror/state@6.6.0 as a separate module from the pinned @codemirror/state@6.5.4

Two instances of @codemirror/state are loaded simultaneously, which breaks instanceof checks used internally by CodeMirror.

Observed duplicate versions (from network requests)

Package Pinned (editor.js) Transitive (esm.sh)
@codemirror/state 6.5.4 6.6.0
@codemirror/view 6.39.14 6.41.0
@codemirror/language 6.12.1 6.12.3

Suggested Fix

Update the pinned versions in docs/public/editor/editor.js to match the latest versions that transitive deps resolve to:

import { EditorState, Compartment } from 'https://esm.sh/@codemirror/state@6.6.0';
import { keymap } from 'https://esm.sh/@codemirror/view@6.41.0';
import { indentUnit } from 'https://esm.sh/@codemirror/language@6.12.3';

This will break again over time as esm.sh resolves newer transitive versions. A more durable fix would be to either:

  1. Use esm.sh import maps or ?deps= params to force version alignment
  2. Bundle the editor with a proper package manager instead of relying on esm.sh CDN resolution

Metadata

Metadata

Labels

No labels
No labels

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions