The problems in Getting-started-guide

[hbbdmc]

When I study the demo from getting-started-guide, I meet some problems.How to fix this bug?

https://github.com/CodinGame/monaco-vscode-api/wiki/Getting-started-guide
i write the code as bellow:

// 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";
import '@codingame/monaco-vscode-python-default-extension';
import "@codingame/monaco-vscode-theme-defaults-default-extension";
import getConfigurationServiceOverride, { updateUserConfiguration } from '@codingame/monaco-vscode-configuration-service-override'
import { initWebSocketAndStartClient } from './lsp-client'
import { initServices, type VscodeApiConfig } from 'monaco-languageclient/vscode/services';
import "vscode/localExtensionHost";


// import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
export async function useMonacoEditor(monacoEditorRef: HTMLElement | null): Promise<void> {
  if (!monacoEditorRef) {
    console.error('Editor container is not available');
    return;
  }

  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' }),
    TextMateWorker: () => new Worker(new URL('@codingame/monaco-vscode-textmate-service-override/worker', 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`)
    }
  }

  await initServices({
    serviceOverrides: {
      ...getConfigurationServiceOverride(),
      ...getTextMateServiceOverride(),
      ...getThemeServiceOverride(),
      ...getLanguagesServiceOverride(),

    },
    userConfiguration: {
      json: JSON.stringify({
        'workbench.colorTheme': 'Default Dark Modern',
        'editor.guides.bracketPairsHorizontal': 'active',
        'editor.wordBasedSuggestions': 'off',
        'editor.experimental.asyncTokenization': true
      })
    },
  } as VscodeApiConfig,
    {
      htmlContainer: monacoEditorRef,
      // logger:logger
    })
  // },1000)
  initWebSocketAndStartClient('ws://127.0.0.1:5007')

  monaco.editor.create(monacoEditorRef!, {
    value: "print('Hello world!')",
    language: "python"
  });

}

[CGNonofr]

Can you please format your issue properly?

[hbbdmc]

I wrote code like that. But I met some problems. What additional information do I need to provide？

[CGNonofr]

What do you mean? your post is broken, code blocks aren't properly used

Please provide a minimal reproduction repo

[hbbdmc]

This is my repo https://github.com/hbbdmc/minimal-monaco-api-test
It is a simple monaco-vscode-api demo based on Vue3.0.
Could you please help me to fix the bug?

[CGNonofr]

Some dependencies are commonjs, and vite needs to know about it 🤷

you can add include: ['vscode-textmate', 'vscode-oniguruma'], in optimizeDeps of your vite config

[CGNonofr]

btw it's only an issue in dev mode

[hbbdmc]

Thank you my friends ! It really works. But when I was building the project, a new problem arose.

[hbbdmc]

I fix this bug by myself. I add below codes in vite.config.ts

 worker: {
    format: 'es'
  },

Is that correct?