Open10

Svelte(kit)でMonacoEditor(esm)を動かす

そもそもの読み込みがSSRあるとできないのでSSRじゃない時だけ(クライアントのみ)インポートするようにする

Conditional Logic

if (import.meta.env.SSR) return;
import("monaco-editor").then((monaco) => {
  monaco.editor.create(...)
});

これだけだと動かないからWorkerを用意する

Option 2: Using plain webpackこれを参考にする

少し調べるとViteは直接Workerを使えるみたい&getWorkerUrlじゃなくてgetWorkerを使えば直接指定できる

import editorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker";
import tsWorker from "monaco-editor/esm/vs/language/typescript/ts.worker?worker";

export const getWorker = (_moduleId, label) => {
  if (label === "typescript" || label === "javascript") {
    return new tsWorker();
  }
  return new editorWorker();
};

self.MonacoEnvironment = {
  getWorker,
};

この状態だとビルド通らない、adapterのnode/staticは関係なさそう
でも色々と直せそうな所あるから試してみてる

https://kit.svelte.dev/faq
ログインするとコメントできます