[bug] - Build error in angular app

[mathiasdeoliveira]

[bug] - Build error in angular app since your last version 3.0.7

Error: export 'sanitize' (imported as 'DOMPurify') was not found in 'dompurify' (possible exports: default)

Background & Context

We use your library with Angular version 15 and dompurify import in non-fixed mode.

package.json
"dompurify: "^3.0.6",

and import like this into the typescript file

import * as DOMPurify from 'dompurify';

Temporary solution :

use fixed version "dompurify: "3.0.6"

[cure53]

Oha, we didn't change much that might impact how to import the library, do you have more info per chance?

[cure53]

Maybe the changes done in early November are the culprit? cc @ssi02014

3.0.6...3.0.7

[Justxs]

I have same issue using React

[pauly92]

I have the same issue using LIT.

This is the error message i get:

Import "sanitize" will always be undefined because there is no matching export in "../../node_modules/dompurify/dist/purify.es.mjs" [import-is-undefined]

[cure53]

@ssi02014 If possible, please have a look. I am pretty sure this is because of the changes in November:

#874 (comment)

[CaptainGlac1er]

Also getting this error once my app updated from 3.0.6 -> 3.0.7

[ssi02014]

@cure53
Until v3.0.6, we loaded "dist/purify.js" in umd format, but since v3.0.7, we load "dist/purify.es.mjs" in esm format, which seems to cause related issues.

Currently, purfiy is exporting via export default createDOMPurify(); so importing with import DOMPurify from 'dompurify'doesn't seem to cause the issue.

[CaptainGlac1er]

@ssi02014 I have the issue importing with import * as DOMPurify from 'dompurify';

[ssi02014]

import DOMPurify from 'dompurify'

Do you get an error if you do the above?

[cure53]

import DOMPurify from 'dompurify'

Do you get an error if you do the above?

Either way we need a fix that makes things work for everyone who uses the ways described above (i.e. not break things). I am happy to release a 3.0.8 once this is sorted. I cannot do much here myself, but I presume it's a quick fix after all 😄

[cure53]

@mathiasdeoliveira @Justxs @pauly92 @CaptainGlac1er This PR should fix the issue, please check if possible if this does the trick indeed. If so, we will release 3.0.8 tomorrow. Thanks @ssi02014 for the super-fast reaction!

[CaptainGlac1er]

@ssi02014 this is probably why I didn't use that approach.

[CaptainGlac1er]

@cure53 also ccing you on this ^

[reduckted]

This might be helpful. Are The Types Wrong? is reporting that the ESM export is "Masquerading as CJS".

https://arethetypeswrong.github.io/?p=dompurify%403.0.7

┌───────────────────┬────────────────────────┬──────────────────────────┐
│                   │ "dompurify"            │ "dompurify/package.json" │
├───────────────────┼────────────────────────┼──────────────────────────┤
│ node10            │ 🟢                     │ 🟢 (JSON)                │
├───────────────────┼────────────────────────┼──────────────────────────┤
│ node16 (from CJS) │ 🟢 (CJS)               │ 🟢 (JSON)                │
├───────────────────┼────────────────────────┼──────────────────────────┤
│ node16 (from ESM) │ 🎭 Masquerading as CJS │ 🟢 (JSON)                │
├───────────────────┼────────────────────────┼──────────────────────────┤
│ bundler           │ 🟢                     │ 🟢 (JSON)                │
└───────────────────┴────────────────────────┴──────────────────────────┘

[ssi02014]

When I tested, * as DOMPurify worked fine for "purify.js" in umd format, but not for "purify.es.mjs" in esm format.

"conditional export" was applied in v3.0.7, but I worked on reverting it back.
I expect this will be fixed.

https://github.com/cure53/DOMPurify/pull/896/files

[ghiscoding]

I have the same problem in Angular with allowSyntheticDefaultImports enabled.

Slickgrid/node_modules/@types/dompurify/index"' can only be default-imported using the 'allowSyntheticDefaultImports' flag      

7 import DOMPurify from 'dompurify';
         ~~~~~~~~~

  node_modules/@types/dompurify/index.d.ts:4:1
    4 export = DOMPurify;
      ~~~~~~~~~~~~~~~~~~~
    This module is declared with 'export =', and can only be used with a default import when using the 'allowSyntheticDefaultImports' flag.

if I remove @types/dompurify then my build works but then I get lint errors in my editor
Could not find a declaration file for module 'dompurify'.

So I wonder if there's a problem with @types/dompurify instead of the actual release? Because that type only got updated a month ago so it doesn't follow the new release which was just couple days ago, shouldn't the type also be updated and that might fix the issue?

[cure53]

Thanks, @ghiscoding and @ssi02014 - I am unsure now, shall we go with the given PR or file a PR against @types/dompurify?

[dkocich]

i have issue in react v18 codebase (CRA) - webpack wont build; i have only available "@types/dompurify": "3.0.5",

[ghiscoding]

Thanks, @ghiscoding and @ssi02014 - I am unsure now, shall we go with the given PR or file a PR against @types/dompurify?

The revert of all the exports will probably (hopefully) help, I think that I would give that a try so that we can still import * as dompurify from 'dompurify in Angular because for some reason or another Angular doesn't like import dompurify from 'dompurify even when allowSyntheticDefaultImports is enabled... so I think the PR that reverted the exports will help (finger crossed 🤞🏻)

EDIT

I tried manually by removing exports (same as PR #896) from node_modules/dompurify/package.json and my Angular build works now, if I had back the exports then it fails again, so yes the PR #896 does fix the issue in Angular. I would suggest releasing it.

Note, for anyone who wants to try manually in Angular, you need to make sure to delete the .angular cache or that won't work

[cure53]

This release should fix it: https://github.com/cure53/DOMPurify/releases/tag/3.0.8

[ssi02014]

It seems to be working fine, thanks! 🤗 @cure53 @ghiscoding @mathiasdeoliveira

[ghiscoding]

I also confirmed that my CI build is now working, this issue could probably be closed since it was for Angular and I just confirmed that it works in Angular. Thanks for this great project and the quick turnaround with a fix 👍🏻

[cure53]

Awesome, phew ❤️ Glad to hear it worked!