(0 , dompurify_1.addHook) is not a function with custom configurations

[kamil-hammouche]

Hello,

I implemented vue-dompurify-html as the guide recommends it. (https://www.npmjs.com/package/vue-dompurify-html)

I notified on my blog that DOMPurify was removing YouTube Embedded videos when sanitizing. I checked on their repo, and someone had already made an issue about this. (visible here)

And so, I have implemented their solution like this:

import Vue from 'vue';
import VueDOMPurifyHTML from 'vue-dompurify-html';

Vue.use(VueDOMPurifyHTML, {
  namedConfigurations: {
    videos: {
      ADD_TAGS: ["iframe"],
      ADD_ATTR: ["allow", "allowfullscreen", "frameborder", "scrolling"],
    },
  },
  hooks: {
    uponSanitizeElement: (node, data) => {
      // allows embedded youtube videos
      if (data.tagName === 'iframe') {
        const src = node.getAttribute('src') || ''
        if (!src.startsWith('https://www.youtube.com/embed/')) {
          return node.parentNode?.removeChild(node)
        }
      }
    }
  },
});

and I use the attribute like this :

<div
      v-dompurify-html:videos='article.text'
      class='article-content' />

I imported my custom plugin like this in the nuxt.config.js file :

  plugins: [
    '~/plugins/dompurify',
  ],

And everytime I render my website, I have this error appearing :
(0 , dompurify_1.addHook) is not a function

Any idea how to fix this ?

My vue-dompurify-html version is 2.4.0

Best regards,

[LeSuisse]

Hello,

I'm not really familiar with Nuxt and this looks like a Nuxt related issue.

However I did some try and got it working by specifying explicitly this is a client side plugin: https://stackblitz.com/edit/vue-dompurify-html-repro-1564?devtoolsheight=33&file=plugins/vue-dompurify-html.js

So in your case that would be something like this:

plugins: [
    { src: '~/plugins/dompurify', mode: 'client' },
  ],

[kamil-hammouche]

Hello,

I'm not really familiar with Nuxt and this looks like a Nuxt related issue.

However I did some try and got it working by specifying explicitly this is a client side plugin: https://stackblitz.com/edit/vue-dompurify-html-repro-1564?devtoolsheight=33&file=plugins/vue-dompurify-html.js

So in your case that would be something like this:

plugins: [
    { src: '~/plugins/dompurify', mode: 'client' },
  ],

Hello,

Thanks for replying. Thought this could have been made server-side by DOMPurify but indeed, this is logic it can't.

What I did is that to fix it :
plugins: [ { src: '~/plugins/dompurify', ssr: false }, ],

Thanks again,

Best regards.

[LeSuisse]

Great you got it working!

You should probably prefer using mode: 'client' instead of ssr: false. According to the Nuxt documentation ssr: false will be deprecated.

ssr: false will be adapted to mode: 'client' and deprecated in next major release.

https://nuxtjs.org/docs/configuration-glossary/configuration-plugins/

[linshujuan]

Unfortunately, it is not working in nuxt 3.9.1, still get the error [Cannot read properties of undefined (reading 'getSSRProps')]