microsoft/monaco-editor · error · Error

Invalid language id: ${this._languageId}

Error message

Invalid language id: ${this._languageId}

What it means

Thrown by the CSS worker constructor when the language id passed via createData.languageId is not one of 'css', 'less', or 'scss'. The worker maps the id to the matching vscode-css-languageservice factory (getCSSLanguageService / getLESSLanguageService / getSCSSLanguageService); an unknown id has no language service to instantiate, so it throws during worker initialization. The id originates from cssDefaults/scssDefaults/lessDefaults.languageId and is forwarded by workerManager.

Source

Thrown at src/languages/features/css/cssWorker.ts:48

			}
		}
		const lsOptions: cssService.LanguageServiceOptions = {
			customDataProviders,
			useDefaultDataProvider
		};

		switch (this._languageId) {
			case 'css':
				this._languageService = cssService.getCSSLanguageService(lsOptions);
				break;
			case 'less':
				this._languageService = cssService.getLESSLanguageService(lsOptions);
				break;
			case 'scss':
				this._languageService = cssService.getSCSSLanguageService(lsOptions);
				break;
			default:
				throw new Error('Invalid language id: ' + this._languageId);
		}
		this._languageService.configure(this._languageSettings);
	}

	// --- language service host ---------------

	async doValidation(uri: string): Promise<cssService.Diagnostic[]> {
		const document = this._getTextDocument(uri);
		if (document) {
			const stylesheet = this._languageService.parseStylesheet(document);
			const diagnostics = this._languageService.doValidation(document, stylesheet);
			return Promise.resolve(diagnostics);
		}
		return Promise.resolve([]);
	}
	async doComplete(
		uri: string,
		position: cssService.Position

View on GitHub (pinned to ca1b42dc89)

Solutions

  1. Use one of the three built-in language ids ('css', 'less', 'scss') for the model and the matching defaults (cssDefaults/scssDefaults/lessDefaults).
  2. If you need a custom CSS dialect, map it to the closest built-in service (e.g. route 'sass' through getSCSSLanguageService) by extending the switch and rebuilding the worker.
  3. Verify the language registered with `monaco.languages.register` matches the languageId on the defaults passed to setupMode.
  4. Check that you didn't pass the wrong defaults object (e.g. cssDefaults for a scss model) when calling setupMode.

Example fix

// before — custom dialect routed to CSS worker with unsupported id
monaco.languages.register({ id: 'sass' });
// ...setupMode called with sassDefaults whose languageId='sass' -> worker throws
// after — map the dialect to an existing service or extend the worker switch
// in cssWorker.ts switch: case 'sass': this._languageService = cssService.getSCSSLanguageService(lsOptions); break;
Defensive patterns

Strategy: type-guard

Validate before calling

const SUPPORTED_CSS_LANG_IDS = new Set(['css', 'less', 'scss']);
function validateCssLanguageId(id: string) {
  if (!SUPPORTED_CSS_LANG_IDS.has(id)) {
    throw new Error(`Unsupported CSS language id '${id}'. Use one of: css, less, scss.`);
  }
}
validateCssLanguageId(defaults.languageId);

Type guard

function isCssLanguageId(id: string): id is 'css' | 'less' | 'scss' {
  return id === 'css' || id === 'less' || id === 'scss';
}

Prevention

When it happens

Trigger: Constructing a custom LanguageServiceDefaults with a languageId outside the allowed set (e.g. 'sass' or 'stylus') and wiring it into setupMode; manually instantiating the CSS worker with createData.languageId set to an unsupported value; registering the CSS worker against a model whose language was changed to something else.

Common situations: Developer forks the CSS integration to support another CSS-like language and forgets to extend the switch; misconfiguration where the model's language id and the worker's createData disagree; passing the wrong defaults object to setupMode.

Related errors


AI-assisted analysis of microsoft/monaco-editor@ca1b42dc89 (2026-08-13). Data as JSON: /api/errors/06365f0c5b17d59e. Report an issue: GitHub.