## 事象
[[Vue3]] x [[Vite]]で[[Monaco Editor]]を使って以下の`App.vue`を作成。
```html
<script setup lang="ts">
import * as monaco from "monaco-editor";
import { onMounted, ref } from "vue";
const editorEl = ref<HTMLDivElement | null>(null);
onMounted(() => {
const editor = monaco.editor.createDiffEditor(editorEl.value!);
editor.setModel({
original: monaco.editor.createModel("hoge\nhuga", "typescript"),
modified: monaco.editor.createModel("hoge\nhuhu", "typescript"),
});
});
</script>
<template>
<main>
<div ref="editorEl" style="width: calc(100vw - 300px); height: 300px"></div>
</main>
</template>
```
ビルドして実行すると以下のエラーになる。
```error
errors.js:15 Uncaught Error: Unexpected usage
Error: Unexpected usage
at _EditorSimpleWorker.loadForeignModule (editorSimpleWorker.js:517:31)
at webWorker.js:38:30
at async tsMode.js:88:16
at errors.js:15:27
```
`createModel`の第2引数を指定しなかったり、不正な値を指定すると発生しない。正しいLanguageを指定したときに、それに関する処理で問題が起こってそう。
## 原因
`getWorkerUrl`が設定されてなく、[[ウェブワーカー]]が正しく動作していなかったのが原因。
## 解決方法
[[Vite]]で[[ウェブワーカー]]を設定する必要がある。
<div class="link-card-v2">
<div class="link-card-v2-site">
<img class="link-card-v2-site-icon" src="https://github.githubassets.com/favicons/favicon.svg" />
<span class="link-card-v2-site-name">GitHub</span>
</div>
<div class="link-card-v2-title">
Import monaco-editor using Vite 2 · vitejs/vite · Discussion #1791
</div>
<div class="link-card-v2-content">
Hey there! Currently, I have set up a Vite 2 project with monaco-editor as a dependency. Whenever I am trying to ...
</div>
<img class="link-card-v2-image" src="https://opengraph.githubassets.com/5eba25a79a10b317dc84c5a83d8050c54b52aabb21f9e01b5acbf33411894d6f/vitejs/vite/discussions/1791" />
<a href="https://github.com/vitejs/vite/discussions/1791#discussioncomment-321046"></a>
</div>
上記で紹介されているコードを、[[Monaco Editor]]が登場する[[Vue]]ファイルのscriptタグで最初に定義する。
```ts
// @ts-ignore
import editorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker";
// @ts-ignore
import jsonWorker from "monaco-editor/esm/vs/language/json/json.worker?worker";
// @ts-ignore
import cssWorker from "monaco-editor/esm/vs/language/css/css.worker?worker";
// @ts-ignore
import htmlWorker from "monaco-editor/esm/vs/language/html/html.worker?worker";
// @ts-ignore
import tsWorker from "monaco-editor/esm/vs/language/typescript/ts.worker?worker";
self.MonacoEnvironment = {
getWorker(_, label) {
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();
},
};
```
## 参考
- [Viteとmonaco\-editorを使ってVSCodeと同じテキストエディタを作成しよう \- あさめしコード](https://asameshicode.com/vite-monaco-editor/)