CODEWITHSUNDEEP
sveltemonaco-editor
Mr.Wang from Next Door
Mr.Wang from Next Door

Reputation: 14820

Using Monaco Editor in Svetle with Rollup

monaco-editor v0.31.1

I am following this gist, code goes below

<script lang="ts">
  import type monaco from 'monaco-editor';
  import { onMount } from 'svelte';
  import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
  import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
  import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker';
  import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker';
  import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';

  let divEl: HTMLDivElement = null;
  let editor: monaco.editor.IStandaloneCodeEditor;
  let Monaco;

  onMount(async () => {
      // @ts-ignore
      self.MonacoEnvironment = {
          getWorker: function (_moduleId: any, label: string) {
              if (label === 'json') {
                  return new jsonWorker();
              }
              if (label === 'css' || label === 'scss' || label === 'less') {
                  return new cssWorker();
              }
              if (label === 'html' || label === 'handlebars' || label === 'razor') {
                  return new htmlWorker();
              }
              if (label === 'typescript' || label === 'javascript') {
                  return new tsWorker();
              }
              return new editorWorker();
          }
      };

      Monaco = await import('monaco-editor');
      editor = Monaco.editor.create(divEl, {
          value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'),
          language: 'javascript'
      });

      return () => {
          editor.dispose();
      };
  });
</script>

<div bind:this={divEl} class="h-screen" />

It fails on compiliation, saying the worker files cannot be found.

[!] Error: Could not load C:\projects\svelte\node_modules\monaco-editor\esm\vs\editor\editor.worker.js?worker (imported by src\MonacoEditor.svelte): ENOENT: no such file or directory, open 'C:\projects\svelte\node_modules\monaco-editor\esm\vs\editor\editor.worker.js?worker'

In fact, editor.worker.js exists at the specific path. How to import monaco editor in svelte?

Thanks in advance

Upvotes: 2

Views: 3190

Answers (1)

DonPedro
DonPedro

Reputation: 86

I just used that exact gist and it worked perfectly. Here are my steps:

  1. Follow these "Getting Started" steps to create a fresh SvelteKit app
  • Note: Since this gist uses TypeScript (<script lang="ts">), you should answer Yes to the "Use TypeScript?" question when scaffolding the project. I suspect that your current project may not be set up for TypeScript and this could have something to do with the error you're seeing.
  1. Install monaco-editor: npm i monaco-editor
  2. Replace the contents of src/routes/index.svelte with the gist code
  3. Build the app: npm run build

This works great, but actually instead of step 4 I normally run in debug mode, so I open VSCode in the project folder and then:

  1. In VSCode go to Terminal and start debugger: npm run dev
  2. Start debugger: hit F5 (or Run|Start Debugging), choose Chrome
  3. New launch.json pops up; edit url to point to default debug address: "url": "http://localhost:3000",
  4. F5 again to run in a browser in debug mode.

Upvotes: 2

Related Questions