Error "DOMPurify.sanitize is not a function" in an Angular 16 application

[andreidiaconescu]

This issue proposes a [bug, feature] which...

Background & Context

Trying to use DOMPurify.sanitize in an angular 16 application.

Bug

I added to node modules:

    "dompurify": "3.0.4",

I import as recomended: import * as DOMPurify from 'dompurify';

then i use like this:

editedComment.content = DOMPurify.sanitize(editedComment.content, { USE_PROFILES: { html: false, svg: true, svgFilters: true } });

Input

any simple text like: "comment 4.2 some comment val"

Given output

i get error in the Chrome browser console:

ERROR Error: Uncaught (in promise): TypeError: DOMPurify.sanitize is not a function
TypeError: DOMPurify.sanitize is not a function
    at comments.component.ts:39:35
    at Array.forEach (<anonymous>)
    at _CommentsComponent.<anonymous> (comments.component.ts:38:52)
    at Generator.next (<anonymous>)
    at fulfilled (chunk-O5JCX6ZX.js:35:24)
    at _ZoneDelegate.invoke (zone.js:368:26)
    at Object.onInvoke (core.mjs:26259:33)
    at _ZoneDelegate.invoke (zone.js:367:52)
    at _Zone.run (zone.js:129:43)
    at zone.js:1257:36
    at resolvePromise (zone.js:1193:31)
    at zone.js:1100:17
    at zone.js:1116:33
    at fulfilled (chunk-O5JCX6ZX.js:37:9)
    at _ZoneDelegate.invoke (zone.js:368:26)
    at Object.onInvoke (core.mjs:26259:33)
    at _ZoneDelegate.invoke (zone.js:367:52)
    at _Zone.run (zone.js:129:43)
    at zone.js:1257:36
    at _ZoneDelegate.invokeTask (zone.js:402:31)

Expected output

Sanitized text.

[andreidiaconescu]

a workaround that worked for me: change import to:

import DOMPurify from 'dompurify';

and add to tsconfig.json

compilerOptions."allowSyntheticDefaultImports": true,

[cure53]

That's likely the way, yes. Is this issue specific to Angular 16?

[cure53]

Closing this as it's unclear what we can do here...

[lukeapage]

We got the same issue, so adding some info here in case it helps.

Firstly I'm not sure why the reccomended approach is to import * as since dompurify has a single default export: https://github.com/cure53/DOMPurify/blob/main/dist/purify.es.js#L1662 We import the default import.

When dompurify recently introduced more modern javascript into its default dist/purify.js bundle, babel kicked in and because we use @babel/transform-runtime, it added imports to the purify.js file so that webpack recognised it as a ecmascript module even though it is not - the end result seems to be nothing is exported and the import is undefined.

The fix for us was to tell webpack to resolve to the dist/purify.es.js file and then it worked.