Uri Error on basic setup

[vivekburman]

Hi I've this below basic code for creating a monaco-editor but keep getting the error added as image below . Any idea what could be wrong

import { useRunJobStats } from "context/runJobStatsContext";
import { useEffect, useRef } from "react";
import * as monaco from "monaco-editor";
import { Paper } from "@mui/material";

const RunLogProcessTrackerComponent = () => {
	const dataContext = useRunJobStats();
	const editorRef = useRef<monaco.editor.IStandaloneCodeEditor | null>(null);
	const containerRef = useRef<HTMLDivElement | null>(null);

	useEffect(() => {
		if (!containerRef.current) return;

		// Create Monaco Editor instance only once
		editorRef.current = monaco.editor.create(containerRef.current, {
			value: dataContext?.logData?.lines.join("\n") || "",
			language: "plaintext",
			readOnly: true,
			automaticLayout: true,
			wordWrap: "bounded",
			minimap: { enabled: true },
		});

		return () => {
			editorRef.current?.dispose();
		};
	}, []);

	useEffect(() => {
		if (editorRef.current && dataContext?.logData?.lines) {
			const editor = editorRef.current;
			const newValue = dataContext.logData.lines.join("\n");
			editor.setValue(newValue);

			// Auto-scroll to bottom
			editor.revealLine(editor.getModel()?.getLineCount() || 1);
		}
	}, [dataContext?.logData?.lines]);

	return (
		<Paper
			className="w-full h-full p-4"
			sx={{ border: "1px solid rgb(230, 235, 241)", borderRadius: "4px" }}
			elevation={0}
		>
			<div ref={containerRef} className="w-full h-full" />
		</Paper>
	);
};

export default RunLogProcessTrackerComponent;