Install & Compatibility
Where this runs
No compatibility data collected yet for this library.
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
initializeMode
✓ import { initializeMode } from 'monaco-graphql/initializeMode'
✗ import { initializeMode } from 'monaco-graphql'
initializeMode is not a default export; it must be imported from the subpath 'initializeMode'. The root package export does not include it.
GraphQLWorker
✓ import GraphQLWorker from 'worker-loader!monaco-graphql/esm/graphql.worker'
✗ import GraphQLWorker from 'monaco-graphql/esm/graphql.worker'
The worker requires a webpack worker-loader or vite's ?worker suffix. Direct import without loader will not work.
monaco-graphql (side-effect import)
✓ import 'monaco-graphql'
✗ import * as monacoGraphql from 'monaco-graphql'
For lazy initialization, importing the module as a side-effect registers the language mode. Named exports from this import do not exist.
Sets up a Monaco editor instance with GraphQL language support including schema-driven autocomplete and validation.
import * as monaco from 'monaco-editor';
import { initializeMode } from 'monaco-graphql/initializeMode';
import { buildSchema } from 'graphql';
// Build a schema (you can also fetch it from a URL)
const schema = buildSchema(`
type Query {
hello: String
}
`);
// Initialize the mode with the schema
const MonacoGraphQLAPI = initializeMode({
schemas: [{
schema,
uri: 'https://example.com/schema.graphql',
fileMatch: ['**/*.graphql'],
}],
});
// Create the editor
monaco.editor.create(document.getElementById('editor'), {
value: 'query { hello }',
language: 'graphql',
});
Debug
Known issues
deprecatedImporting from 'monaco-graphql/esm/initializeMode' is deprecated; use 'monaco-graphql/initializeMode' instead.fixChange import to 'monaco-graphql/initializeMode'
affects: <=1.7.0
breakingThe 'languageSelector' option was removed in v1.2.0; use 'fileMatch' with picomatch patterns instead.fixReplace 'languageSelector' with 'fileMatch' in schema configuration.
affects: >=1.2.0
gotchaMonaco Editor version must be >= 0.20.0 and < 0.53. Version 0.53+ is not supported due to breaking changes in Monaco's internal APIs.fixDowngrade monaco-editor to ^0.52.0 or use a compatible version range.
affects: >=0.53.0 (Monaco Editor)
gotchaThe GraphQL worker must be registered with the correct label 'graphql' in MonacoEnvironment.getWorker. Using a different label may cause silent failures.fixEnsure that getWorker returns a worker instance when label === 'graphql'.
affects: all
deprecatedThe default export 'monaco-graphql' (importing without subpath) has been deprecated since version 1.5.0. It will be removed in a future release.fixUse side-effect import 'import "monaco-graphql"' or import specific APIs from subpaths.
affects: >=1.5.0
Errors
Common errors & fixes
Module not found: Error: Can't resolve 'monaco-graphql/esm/graphql.worker'
The worker file is not resolved directly; it requires a webpack worker-loader or equivalent bundler plugin.
fixUse 'worker-loader!monaco-graphql/esm/graphql.worker' for webpack, or add '?worker' suffix for Vite.
TypeError: Cannot destructure property 'schemas' of 'options' as it is undefined.
Calling 'initializeMode()' without passing an options object.
fixPass an object with a 'schemas' array to 'initializeMode({ schemas: [...] })'. Error: Schema must be an instance of GraphQLSchema. Got: undefined
The 'schema' property in the schema configuration was not provided or is undefined.
fixEnsure each schema configuration has a 'schema' field that is a valid GraphQLSchema object (e.g., built with 'buildSchema').
Audit
Dependencies
graphqlrequiredCore GraphQL dependency for schema validation and language features.
monaco-editorrequiredRequired for the Monaco Editor API and worker infrastructure.
prettieroptionalUsed for formatting GraphQL files.