graphql / graphql/graphiql

[monaco-graphql] Cannot use the monaco-editor-webpack features toggle

Open
#3,383 11 comments 0 reactions 0 assignees View on GitHub
bug graphiql
Dominant language
TypeScript
Stars
16.9k
Forks
1.9k
Avg merge
22h 45m
Merged PRs (30d)
70

Description

### Is there an existing issue for this?

- [X] I have searched the existing issues

### Current Behavior

I'm trying to use the [monaco-editor-webpack-plugin ](https://www.npmjs.com/package/monaco-editor-webpack-plugin) in combination with `monaco-graphql` and I am trying to disable some features using the new `features` flag.

However, the disabling of the flag does not work.

Here is my webpack config

```ts
new MonacoWebpackPlugin({
languages: ['json', 'typescript', 'graphql'],
features: ['!readOnlyMessage'],
customLanguages: [
{
entry: undefined,
label: 'graphql',
worker: {
id: 'graphql',
entry: require.resolve('monaco-graphql/esm/graphql.worker.js'),
},
},
],
}),
```

I traced the issue and it turns out that `monaco-graphql` imports `edcore.main` [here](https://github.com/graphql/graphiql/blob/main/packages/monaco-graphql/src/monaco-editor.ts#L22) which in turns imports all the features by default through `editor.all.js`

### Expected Behavior

the features flag should be respected.

I think the solution is to only import from `monaco-editor/esm/vs/editor/editor.api` anywhere in `monaco-graphql`.

Especially in `initializeMode.ts`. It should be possible since the only thing we need is `language`

Edit: importing from `monaco-editor/esm/vs/editor/editor.api` is actually what the doc recommends/requires when using the webpack plugin.

Anything else (features, language workers, etc) should be imported/initialized by the developer in their own project through import 'monaco-editor`.

### Steps To Reproduce

_No response_

### Environment

* GraphiQL Version:
* OS:
* Browser:
* Bundler:
* `react` Version:
* `graphql` Version:

### Anything else?

_No response_

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.