microsoft/monaco-editor · warning · Error

already initialized

Error message

already initialized

What it means

Thrown by the main runner's initialize() when monacoPromise is already defined, i.e. the runner iframe has already been initialized in its current lifetime. The main runner loads Monaco once, injects CSS/HTML, and evals the playground JS; a second initialize would re-load Monaco and re-eval, so the guard rejects the duplicate 'initialize' message. The runner is designed to be reloaded, not re-initialized in place.

Source

Thrown at website/src/runner/index.ts:32

		console.error("not in sandbox");
		return;
	}*/
	const e = event.data as IMessageToRunner | { kind: undefined };
	if (e.kind === "initialize") {
		initialize(e.state);
	} else if (e.kind === "update-css") {
		const style = document.getElementById(
			"custom-style"
		) as HTMLStyleElement;
		style.innerHTML = e.css; // CodeQL [SM03712] This is safe because the runner runs in an isolated iframe.
	}
});

let monacoPromise: Promise<any> | undefined = undefined;

async function initialize(state: IPreviewState) {
	if (monacoPromise) {
		throw new Error("already initialized");
	}

	const loadingContainerDiv = document.createElement("div");
	loadingContainerDiv.className = "loader-container";
	const loadingDiv = document.createElement("div");
	loadingDiv.className = "loader";
	loadingContainerDiv.appendChild(loadingDiv);
	document.body.appendChild(loadingContainerDiv);

	monacoPromise = loadMonaco(state.monacoSetup);
	await monacoPromise;

	loadingContainerDiv.remove();

	const style = document.createElement("style");
	style.id = "custom-style";
	style.innerHTML = state.css; // CodeQL [SM03712] This is safe because the runner runs in an isolated iframe. This feature is essential to the functionality of the playground. // CodeQL [SM02688] This is safe because the runner runs in an isolated iframe. This feature is essential to the functionality of the playground.
	document.body.appendChild(style);

View on GitHub (pinned to ca1b42dc89)

Solutions

1. Send 'initialize' to the runner exactly once per iframe load; use 'update-css' for CSS-only changes.
2. For a full re-init, reload the iframe (reset src or location.reload()) before posting initialize.
3. Guard the postMessage call with a ref/flag on the host so re-renders don't duplicate it.
4. Disable StrictMode double-invoke for the initializing effect, or make the effect idempotent by checking iframe readiness.

Example fix

// before — posts initialize on every render
useEffect(() => {
  iframe.contentWindow.postMessage({ kind: 'initialize', state }, '*');
});
// after
const sent = useRef(false);
useEffect(() => {
  if (sent.current) return;
  iframe.contentWindow.postMessage({ kind: 'initialize', state }, '*');
  sent.current = true;
}, [state]);

// host-side: post initialize exactly once per iframe load
const initialized = useRef(false);
useEffect(() => {
  if (initialized.current) return;
  iframeRef.current!.contentWindow!.postMessage({ kind: 'initialize', state }, '*');
  initialized.current = true;
}, [state]);
// for a fresh start, reset iframe.src and clear the flag

function shouldInitialize(hasInitialized: boolean): boolean {
  return !hasInitialized;
}

When it happens

Trigger: Parent window sends a second 'initialize' message to the same runner iframe without reloading it; an effect that re-posts initialize on every render; HMR replaying the message; the playground host dispatching initialize when only an update-css was needed.

Common situations: React/Vue host that posts initialize inside an effect without a guard; StrictMode double-invoke; state-management code that re-runs the full init flow on unrelated state changes.

Related errors

• already initialized
• monaco is not loaded yet
• one parameter must be defined
• You must define a function MonacoEnvironment.getWorkerUrl or
• Invalid language id: ${this._languageId}

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