Is there another way to call the initialize function from vscode/services of the monaco-vscode-editor-api

I am implementing a web IDE with rust and i started following a tutorial that implements embedding monaco-editor in a web broswer here, the tutorial is not using react but pointed to this example in the official documentation of monaco-editor that uses react.

I am following the tutorial and adapting it step by step to the react implementation I have but I hit a blocker.

In the non react example, there is an index.html and a main.ts that is linked to it, this is the content of main.ts at point where i got stuck

// main.ts import './style.css' import * as monaco from 'monaco-editor'; // importing installed services import { initialize } from 'vscode/services' import getLanguagesServiceOverride from "@codingame/monaco-vscode-languages-service-override"; import getThemeServiceOverride from "@codingame/monaco-vscode-theme-service-override"; import getTextMateServiceOverride from "@codingame/monaco-vscode-textmate-service-override"; // adding worker export type WorkerLoader = () => Worker; const workerLoaders: Partial<Record<string, WorkerLoader>> = { TextEditorWorker: () => new Worker(new URL('monaco-editor/esm/vs/editor/editor.worker.js', import.meta.url), { type: 'module' }) }) } window.MonacoEnvironment = { getWorker: function (_workerId, label) { const workerFactory = workerLoaders[label] if (workerFactory != null) { return workerFactory() } throw new Error(`Worker ${label} not found`) } } // adding services await initialize({     ...getTextMateServiceOverride(),     ...getThemeServiceOverride(),     ...getLanguagesServiceOverride(), }); monaco.editor.create(document.getElementById('editor')!, { value: "print('Hello world!')", language: "python" }); 

According to the tutorial this will not give any error but i am getting an error in my react implementation

This is my App.jsx

import * as monaco from "monaco-editor"; import { useRef, useEffect } from "react"; function App() { const monacoEl = useRef(null); const editorRef = useRef(null); useEffect(() => { if (monacoEl.current && !editorRef.current) { console.log("Creating editor..."); editorRef.current = monaco.editor.create(monacoEl.current, { value: "", language: "rust", theme: "vs-dark", }); } return () => { if (editorRef.current) { editorRef.current.dispose(); editorRef.current = null; } }; }, []); return <div style={{ width: "100vw", height: "100vh" }} ref={monacoEl}></div>; } export default App; 

This is my main.jsx

import { StrictMode } from "react"; import { createRoot } from "react-dom/client"; import "./index.css"; import "./worker.js"; import App from "./App.jsx"; createRoot(document.getElementById("root")).render( <StrictMode> <App /> </StrictMode> ); 

My worker.js is where I am loading the editor worker and where i want to initialize the vscode/services but after I add the bit of initialize my editor stopped showing and there is an error in my console.

My worker.js

import editorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker"; import textMateWorker from "@codingame/monaco-vscode-textmate-service-override/worker?worker"; import { initialize } from "vscode/services"; import getLanguagesServiceOverride from "@codingame/monaco-vscode-languages-service-override"; import getThemeServiceOverride from "@codingame/monaco-vscode-theme-service-override"; import getTextMateServiceOverride from "@codingame/monaco-vscode-textmate-service-override"; window.MonacoEnvironment = { getWorker: function (_moduleId, label) { if (label === "TextEditorWorker") { return new editorWorker(); } if (label === "TextMateWorker") { return new textMateWorker(); } throw new Error(`No worker found for label: ${label}`); }, }; await initialize({ ...getTextMateServiceOverride(), ...getThemeServiceOverride(), ...getLanguagesServiceOverride(), }); 

This is the error I am getting

vscode_services.js?v=34450706:87108 Uncaught TypeError: Cannot read properties of undefined (reading 'classList') at updateRootClasses (vscode_services.js?v=34450706:87108:41) at AccessibilityService2.initReducedMotionListeners (vscode_services.js?v=34450706:87111:5) at new AccessibilityService2 (vscode_services.js?v=34450706:87096:10) at _InstantiationService._createInstance (vscode_services.js?v=34450706:88484:20) at _InstantiationService._createServiceInstance (vscode_services.js?v=34450706:88586:27) at _InstantiationService._createServiceInstanceWithOwner (vscode_services.js?v=34450706:88577:19) at _InstantiationService._createAndCacheServiceInstance (vscode_services.js?v=34450706:88567:33) at _InstantiationService._safeCreateAndCacheServiceInstance (vscode_services.js?v=34450706:88521:19) at _InstantiationService._getOrCreateServiceInstance (vscode_services.js?v=34450706:88509:19) at Object.get (vscode_services.js?v=34450706:88437:31) await in startup (anonymous) @ worker.js:24 

Is there another way I can call the initialize function so that it stops throwing the error.