Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'. #131
Description
I'm using "vue-prism-editor": "^2.0.0-alpha.2" with vite/vue3/ts and dynamic import
await import("prismjs/components/prism-clike");
await import("prismjs/components/prism-javascript");
await import("@/assets/scss/code-themes/a11y-dark.scss");
loaded.value = true;And I'm getting this error
Uncaught (in promise) TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.
at Proxy.setLineNumbersHeight (Editor.ts:144:32)
at Proxy.<anonymous> (Editor.ts:111:18)
When debugging this.$refs.pre is undefined, called from this method in editor.ts :
setLineNumbersHeight(): void {
this.lineNumbersHeight = getComputedStyle(this.$refs.pre as HTMLTextAreaElement).height;
}Triggered by this two watchers:
content: {
immediate: true,
handler(): void {
if (this.lineNumbers) {
this.$nextTick(() => {
this.setLineNumbersHeight();
});
}
},
},
lineNumbers(): void {
this.$nextTick(() => {
this.styleLineNumbers();
this.setLineNumbersHeight();
});
},I'm just guessing here but it seems like an onMounted issue (the immediate: true in the content watcher) , this.$refs.pre is called before it's been mounted.
For now I'm just dirty fixing it with a setTimeout
setTimeout(() => (loaded.value = true), 100);