graphql-monaco is broken on monaco 0.21+

[djpate]

Trying to install graphql-mocaco using the latest versions of monaco-editor will not work.

Tested broken on 0.22 and 0.21. The version in the example works fine (0.20)

The rest call to the graphql endpoint to do the introspection query does not fire either.

I tried looking at their changelog but could not find something that would be a clear reason why.

[acao]

yes, when the mode fails then the worker is not initialized

this is a known bug, thanks for reporting! i thought i had created a ticket this weekend

[Nishchit14]

I am using monaco-editor@0.27.0 and facing the same issue. @acao any plan to support it in near future? I really appreciate all the work done for monaco-graphql. If I can help anyway then please do let me know.

[Nishchit14]

I am getting the error, monaco is not defined

[acao]

I'm hoping to get to it soon! There are some more urgent matters currently, but this was one of the next known issues to address.

So, here, I am using a pattern borrowed from the monaco examples:

https://github.com/microsoft/monaco-editor/search?q=CompletionItemKind

it must be that previously, monaco 0.20 and older were exporting this globally? I don't know how this worked before hahaha

I can't seem to figure out where to import this enum from now:

https://github.com/microsoft/monaco-editor/blob/a40145a4c9ee7f003e5b7dcbc98c567a8dadc158/typedoc/monaco.d.ts#L5700

here is a sandbox where I tried to import it:

https://codesandbox.io/s/async-flower-nl2kb?file=/src/index.ts

[Nishchit14]

great, thanks for replying quickly @acao. I'll try to help here by debugging it with the above references.

[Nishchit14]

I have cloned this monaco-samples repo and try to debug apis of monaco-editor@0.27.0.

https://github.com/microsoft/monaco-editor-samples/blob/main/browser-esm-webpack-typescript/src/index.ts#L1

import * as monaco from 'monaco-editor';

console.log(
	monaco.languages.CompletionItemKind,
	"monaco.languages.CompletionItemKind"
);

console output is here

Maybe we can access the CompletionItemKind language API directly importing monaco-editor shown in the above code snippet.

The type definition is here https://microsoft.github.io/monaco-editor/api/enums/monaco.languages.completionitemkind.html

I hope it will help someway @acao, please do let me your thoughts on it :)

[acao]

ah nice, of course that would work!

so I think you can just add that line to the top of the file then:

import * as monaco from 'monaco-editor';

[Nishchit14]

@acao done 🚀 , passing to you PR #1952

[Nishchit14]

If I set globalAPI: true in MonacoWebpackPlugin then It works for monaco-editor@0.27.0. This option exposes monaco object globally. do we need to still work on PR #1952? @acao

  new MonacoWebpackPlugin({
      // available options are documented at https://github.com/Microsoft/monaco-editor-webpack-plugin#options
      globalAPI: true,
      publicPath: "/js/",
      filename: "[name].worker.bundle.js",
      languages: [
        'javascript',
        'html',
        'typescript',
        'json'
      ]
    })

[acao]

#1952 is released, and I will soon release #1979 which will resolve other issues