Error in nextTick: "ReferenceError: getComputedStyle is not defined"

[4ndre4s]

I use the component in a Nuxt.js Application, but I get an error.

This is how the it gets rendered:

Error:

Code:

[astagi]

Hi @4ndre4s how did you fix this issue? I got the same error with Nuxt!

[4ndre4s]

Hi, I also used nuxt. Actually I could not fix it :(

[astagi]

@4ndre4s I found the root of the problem, you need to wrap the editor around

<client-only placeholder="Loading...">
  <prism-editor :code="code" language="js" :line-numbers="true" />
</client-only>

The error disappears from console log but the graphical issue remains. Maybe something related to the default css of Nuxt, I'll investigate further :)

Thanks for the quick reply!

[astagi]

Ok @4ndre4s I just fixed the second problem. We need to import VuePrismEditor.css as well to get the flex box for correctly displaying lines and code.

import 'prismjs'
import 'prismjs/themes/prism-tomorrow.css'
import 'vue-prism-editor/dist/VuePrismEditor.css'

import PrismEditor from 'vue-prism-editor'

It works great!

[astagi]

Looks like there's also a PR open to fix this problem in documentation :) #36

[4ndre4s]

Thank you!

[astagi]

YW

[koca]

Oh i should also add a note for nuxt. Thanks guys!

[jordib123]

I have the same problem. However, the vue-prism-editor package only contains "prismeditor.min.css" and no "VuePrismEditor.css"... I am using version 1.3.0.

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

Edit: It looks like it only happens for php in
return highlight(this.code, languages.php)
Js, Ruby, Python, C#, ... works without issues.

[Fennec-hub]

@jordib123 take a look here #131, especially if you are using dynamic import.

[jordib123]

@Fennec-hub It looked like using php with Prism required an extra import besides prism-php

import "prismjs/components/prism-markup-templating.js";

[nicholasanthonys]

@4ndre4s did you manage to solve the problem ?