[graphiql] Syntax highlighting and auto completion is broken

[glenngijsberts]

Is there an existing issue for this?

• I have searched the existing issues

Current Behavior

The syntax highlighting and auto completion is not working.

Expected Behavior

Should work like previous versions (@graphiql/react@0.37.3 and @graphiql/plugin-explorer@5.1.1).

Steps To Reproduce

1. Use @graphiql/react@0.37.4 and @graphiql/plugin-explorer@5.1.2
2. Open GraphiQL
3. Verify syntax highlighting and completion is not working

Environment

• GraphiQL Version: latest
• OS: MacOS
• Browser: Chrome
• Bundler: esm
• react Version: 19.1.0
• graphql Version: 16.11.0

    <script type="importmap">
        {
          "imports": {
            "react": "https://esm.sh/react@19.1.0",
            "react/": "https://esm.sh/react@19.1.0/",

            "react-dom": "https://esm.sh/react-dom@19.1.0",
            "react-dom/": "https://esm.sh/react-dom@19.1.0/",

            "react-icons/": "https://esm.sh/react-icons@5.5.0/",
            "react-world-flags": "https://esm.sh/react-world-flags@1.6.0/",

            "graphiql": "https://esm.sh/graphiql?standalone&external=react,react-dom,@graphiql/react,graphql",
            "graphiql/": "https://esm.sh/graphiql/",
            "@graphiql/plugin-explorer": "https://esm.sh/@graphiql/plugin-explorer@5.1.1?standalone&external=react,@graphiql/react,graphql",
            "@graphiql/react": "https://esm.sh/@graphiql/react@0.37.3?standalone&external=react,react-dom,graphql,@graphiql/toolkit,@emotion/is-prop-valid",

            "@graphiql/toolkit": "https://esm.sh/@graphiql/toolkit?standalone&external=graphql",
            "graphql": "https://esm.sh/graphql@16.11.0",
            "@emotion/is-prop-valid": "data:text/javascript,"
          }
        }
    </script>

Anything else?

This error originates from Monaco Editor (which GraphiQL uses internally). It happens when code tries to call monaco.languages.setTokensProvider('json', ...) or monaco.languages.registerHoverProvider('json', ...) before Monaco has registered the json language — i.e., before the Monaco JSON language worker is initialized.

[trevor-scheer]

Thanks for the report @glenngijsberts. I've confirmed this is only affecting the CDN example and not other paths which use a bundler. For now, folks can use the version that came right before the latest change here:

https://github.com/graphql/graphiql/blob/cc8888f5757f33751add27112557c8c0f1c89636/examples/graphiql-cdn/index.html

This is probably a result of changes we've made to peerDependencies, sideEffects, and how esm.sh handles them. I'll look into it and revert the example update for now.

[trevor-scheer]

Please see the PR description from #4304 if you're looking to resolve this issue right away.

[trevor-scheer]

I've been exploring a revert with no luck. My current suspicion is that esm.sh actually made a breaking change at some point within the last 6 months such that any release on our end would've broken folks who copied the example.

For now, pinning to the older versions should work, but the only way I can "unbreak" unpinned examples in the wild is to revert the latest tag and never move it which isn't a good option.

So currently (AFAICT):

• unpinned examples are permanently broken and will remain that way
• updating unpinned examples to the pinned (older) versions from ~6mos ago (mentioned above in linked PR) works.
• we can't continue using esm.sh going forward unless we get something fixed on their side

Will follow up with more info.