## 事象
[[Vue3]] x [[Vite]]で[[Monaco Editor]]を使って以下の`App.vue`を作成していたら、以下のエラー。
```error
Uncaught Error: Maximum call stack size exceeded
RangeError: Maximum call stack size exceeded
at MutableReactiveHandler.get (reactivity.esm-bundler.js:425:3)
at Proxy.iterate (pieceTreeBase.js:1367:30)
at Proxy.iterate (pieceTreeBase.js:1367:30)
at Proxy.iterate (pieceTreeBase.js:1367:30)
at Proxy.iterate (pieceTreeBase.js:1367:30)
at Proxy.iterate (pieceTreeBase.js:1367:30)
at Proxy.iterate (pieceTreeBase.js:1367:30)
at Proxy.iterate (pieceTreeBase.js:1367:30)
at Proxy.iterate (pieceTreeBase.js:1367:30)
at Proxy.iterate (pieceTreeBase.js:1367:30)
at errors.js:15:27
```
コードは以下のような感じ。
```ts
interface State {
diffEditor: any | null;
}
const state = reactive<State>({
diffEdiffEditor: null,
});
onMounted(() => {
state.diffEditor = monaco.editor.createDiffEditor(diffEditorEl.value!);
})
const setDiffEditor = (one: string, other: string) => {
state.diffEditor.setModel({
original: monaco.editor.createModel(one, "json"),
modified: monaco.editor.createModel(other, "json"),
});
};
// setDiffEditorを呼ぶとエラーになる
```
## 原因
[[Monaco Editor]]の`createDiffEditor`で生成するインスタンスを、Vueのreactiveプロパティに割り当てていたから。
## 解決方法
reactiveプロパティに割り当てないようにする。
```ts
let diffEditor: any;
onMounted(() => {
diffEditor = monaco.editor.createDiffEditor(diffEditorEl.value!);
})
const setDiffEditor = (one: string, other: string) => {
diffEditor.setModel({
original: monaco.editor.createModel(one, "json"),
modified: monaco.editor.createModel(other, "json"),
});
};
```
> [!question]- どうしてreactiveプロパティに割り当ててはダメなのか?
> 想像だけど、[[Monaco Editor]]内部にも[[Proxy (JavaScript)|Proxy]]があって、[[Vue]]のreactiveプロパティに割り当てられる[[Proxy (JavaScript)|Proxy]]と共鳴しあって永遠に呼び出しが続くのかなと... (適当)