LeSuisse/vue-dompurify-html

Dompurify issue with Nuxt bridge - dompurify_1.sanitize is not a function

Closed this issue · 9 comments

kadlinobit commented

Description

There is an issue when using dompurify in Nuxt with the new bridge plugin installed.

When using the v-dompurify-html directive, there is an error:

VueDompurifyHtml version: 2.3.0

TypeError: dompurify_1.sanitize is not a function
    at updateComponent (webpack-internal:///./node_modules/vue-dompurify-html/dist/dompurify-html.js:39:32)

    at callHook$1 (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:6893:7)

    at callInsert (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:6827:9)

    at wrappedHook (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:2441:10)

    at invokeWithErrorHandling (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:2052:26)

    at Object.invoker [as insert] (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:2384:9)

    at invokeInsertHook (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:6546:28)

    at Vue.patch [as __patch__] (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:6706:15)

    at Vue._update (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:4091:19)

    at Vue.updateComponent (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:4213:10)

Dompurify is used as a Nuxt plugin in ~/plugins/dompurify.js :

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

Vue.use(VueDOMPurifyHTML)

Reproduction

https://codesandbox.io/s/vue-dompurify-nuxt-bridge-problem-6pg2j?file=/pages/index.vue

LeSuisse commented

Hi,

I never used Nuxt so I'm not sure I'm going to be of a big help here.

Two guesses:

  • did you try with the 3.0.0-alpha.3 version since recent version of Nuxt uses Vue 3?
  • did you see cure53/DOMPurify#29 since SSR might be involved?
kadlinobit commented

Doesn't seem to be related to SSR - with pure Nuxt2, vue-dompurify-html (VDHTML) worked while rendered on server (if that is possible - I haven't noticed any errors).
When I upgrade VDHTML to 3.0.0-alpha.3, I'm still getting type error, this time it is:
TypeError: dompurify is not a function

LeSuisse commented

Hello,

Would you mind testing with the freshly released 3.0.0-beta.1? It includes some changes in the build process on the library.

kadlinobit commented

Hello,

Would you mind testing with the freshly released 3.0.0-beta.1? It includes some changes in the build process on the library.

Hi, tried to install 3.0.0-beta.1 but it requires Vue3 - isn't that true? Gives me a warning:

vue-dompurify-html@3.0.0-beta.1 requires a peer of vue@^3.0.0 but none is installed. You must install peer dependencies yourself.

I'm sorry, maybe I didn't make it clear - but Nuxt with bridge is still using Vue2, it's just backporting new features from full Nuxt3 (that has Vue3) into Nuxt2 for smooth transition.

Anyway my Nuxt instance got broken now after reinstalling packages and I can't get it working. I'll get back to it next week, if you need you can close the issue for now.

LeSuisse commented

FYI a similar issue has been opened in #1564. Can you try explicitly loading the plugin in the client mode with

plugins: [{src: '~/plugins/dompurify.js', mode: 'client'}]
kadlinobit commented

FYI a similar issue has been opened in #1564. Can you try explicitly loading the plugin in the client mode with

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

I tried {ssr: false} with the last version 3.0.0-beta.1 - there is no error now, but it's also not showing any HTML that I pass via the v-dompurify-html directive.

It behaves the same on my local project as here in this codesandbox:
https://codesandbox.io/s/vue-dompurify-nuxt-bridge-problem-6pg2j

LeSuisse commented

Can you please try with the freshly released 2.5.0 version? It should fix your issue.

kadlinobit commented

@LeSuisse I have tested it and can confirm that v2.5.0 is working with Nuxt bridge.
Just to clarify - vuedompurify version 3.x.x works with Vue3, version 2.x.x is for Vue2, correct?

Many thanks!

LeSuisse commented

Great news, thanks for the confirmation.

Yes, the 2.x versions of vue-dompurify-html target Vue 2 and the 3.x version target Vue 3.

Nuxt Bridge is using Vue 2 so you need the 2.x versions.

For Nuxt 3 you will need the 3.x versions since it is Vue 3 under the hood.