Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.

[Fennec-hub]

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);

[dzikoysk]

I've also experienced this for some tabs components:

Uncaught (in promise) TypeError: Window.getComputedStyle: Argument 1 is not an object.
    setLineNumbersHeight Editor.ts:144
    handler2 Editor.ts:111
    promise callback*nextTick runtime-core.esm-bundler.js:246
    handler2 Editor.ts:110

this.$refs.pre is also undefined in my case

[koca]

Hey @dzikoysk! Thanks for the detailed info. I will try to fix it tomorrow evening. I will let you know. :)

[dzikoysk]

Thanks, I'm currently cleaning up whole frontend in my app, and just found it by accident - highlighting in general works fine as you can see. (It's open source, so it could be a reproducer if needed). I wonder if it might be associated with #117 🤔

Also, looks like it's also associated with this:

• https://github.com/koca/vue-prism-editor/issues/119

[koca]

Yep its related to #119, thanks for the help, i appreciated (dziekuje bardzo :D).