sanity-plugin-inline-svg-input

sanity-plugin-inline-svg-input copied to clipboard

<InlineSvgPreviewComponent value={category.svgIcon} >

Error: TypeError: DOMPurify__default.default.sanitize is not a function

Hi @mojtaba-shahverdi, could you please share more context:

• What version of Sanity are you using?
• Which version of sanity-plugin-inline-svg-input are you on?
• Are you using the embedded Studio inside a Next.js application?

And any other details you think might be helpful, thanks!

Hey @mojtaba-shahverdi!

We've just dropped a new release and hope it will help resolve the issue.

Could you please update the package to @focus-reactive/[email protected] and check if the issue still exists?

Hey!

I have the same problem. Using version of @focus-reactive/sanity-plugin-inline-svg-input - 1.1.0

I think it has to do with next js ssr. But the component where InlineSvgPreviewComponent is rendered is client-side. If you remove InlineSvgPreviewComponent then everything works fine. But with this component there is 500 error from nextjs server

⨯ Internal error: TypeError: dompurify__WEBPACK_IMPORTED_MODULE_2__.default.sanitize is not a function
    at InlineSvgPreviewComponent (./node_modules/@focus-reactive/sanity-plugin-inline-svg-input/dist/index.esm.js:167:90)
    * lots of similar messages *
digest: "829662004"
 GET / 500 in 1402ms
 GET /_next/static/chunks/app/(site)/server-actions.js.map 404 in 42ms

Thanks for the details @efValeron! Actually, we didn't expect this component to be included during the server build. Are you using the embedded NextStudio?

@chenaski Yes, I'm using NextStudio. And what else I noticed, 500 error comes out only at the first page load, then it disappears and SVGs are rendered normally. But I haven't tested it in production.

You could try adding the 'use client' directive in the route with NextStudio, because Sanity Studio is an SPA and normally it shouldn't run anything during the server build. I see the /_next/static/chunks/app/(site)/server-actions.js.map path in the error message you shared, is there anything in here that you import in/out of Sanity?

Also, could you please share your Next.js version and the Sanity schema where you use InlineSvgPreviewComponent? It would be easier for me to debug the issue. Thanks in advance!

Regarding this I ran into similar errors even with "use client" on the most recent version of Next.js. Did some upgrades and replaced dompurify with isomorphic-dompurify. If you guys want these changes feel free to just pull them in https://github.com/Starefossen/sanity-plugin-inline-svg-input/