[graphiql] Live demo shows " Cannot read properties of undefined (reading 'schemas')"

[clement911]

Is there an existing issue for this?

• [x] I have searched the existing issues

Current Behavior

It seems the live demo encounters issues:

https://graphql.org/swapi-graphql/

We have integrated GraphiQL in our app and are seeing the same error. It seems to be an issue with web workers not initializing properly?

[omacranger]

Looks like the newest version of monaco-editor isn't compatible with monaco-graphql (see PR here where versions were pinned).

Although the dependency was pinned in the package.json for monaco-graphql no changeset was created so the version was not actually bumped to include that change.

You can get around it by instantiating the workers manually until a new version of the package is deployed by replacing

import 'graphiql/setup-workers/esm.sh';

with

    import JsonWorker from 'https://esm.sh/[email protected]/esm/vs/language/json/json.worker.js?worker';
    // Specifically, the below line where we pin the dependency to 0.52.2 by using ?deps=
    import GraphQLWorker from 'https://esm.sh/[email protected]/esm/graphql.worker.js?worker&[email protected]';
    import EditorWorker from 'https://esm.sh/[email protected]/esm/vs/editor/editor.worker.js?worker';

    globalThis.MonacoEnvironment = {
      getWorker(_workerId, label) {
        // eslint-disable-next-line no-console
        console.info('setup-workers/esm.sh', { label });
        switch (label) {
          case 'json':
            return new JsonWorker();
          case 'graphql':
            return new GraphQLWorker();
        }
        return new EditorWorker();
      },
    };

in the example / usage. See here for what that script is doing / comparing what's changed to fix it.

[leonardehrenfried]

I'm using the CDN example: https://github.com/graphql/graphiql/blob/main/examples/graphiql-cdn/index.html and I get a CORS error when applying your fix, @omacranger.

I'm a Java developer and pretty clueless about loading JS modules. Does the import statement need to go into the importmap?

[dimaMachina]

cc @benjie can you review this one? https://github.com/graphql/swapi-graphql/pull/249

[lukasbash]

Would it be possible to support the latest version of monaco? I also ran into several issues when upgrading monaco but it has tons of improvements in the latest version.