DOMPurify types not found despite installed

[mental roost]

I'm trying to use DOMPurify in my Ionic-Vue app and it keeps giving me an error in the editor on the import statement despite having installed the types package for it properly, and at runtime the sanitize function is undefined when i try to call it despite the fact that i can see it when i console.log the DOMPurify object

Import:import * as DOMPurify from 'dompurify';

Use: text: DOMPurify.sanitize(await marked.parse(newReviewText.value))

Runtime error: Uncaught (in promise) TypeError: DOMPurify.sanitize is not a function sendReview Business.vue:94 patchStopImmediatePropagation runtime-dom.esm-bundler.js:613 callWithErrorHandling runtime-core.esm-bundler.js:158 callWithAsyncErrorHandling runtime-core.esm-bundler.js:166 callWithAsyncErrorHandling runtime-core.esm-bundler.js:176 invoker runtime-dom.esm-bundler.js:595 addEventListener runtime-dom.esm-bundler.js:549 patchEvent runtime-dom.esm-bundler.js:564 patchProp runtime-dom.esm-bundler.js:627 mountElement runtime-core.esm-bundler.js:5212 processElement runtime-core.esm-bundler.js:5159 patch runtime-core.esm-bundler.js:5031 componentUpdateFn runtime-core.esm-bundler.js:5711 run reactivity.esm-bundler.js:178 update runtime-core.esm-bundler.js:5817 setupRenderEffect runtime-core.esm-bundler.js:5825 mountComponent runtime-core.esm-bundler.js:5615 processComponent runtime-core.esm-bundler.js:5568 patch runtime-core.esm-bundler.js:5043 mountChildren runtime-core.esm-bundler.js:5287 mountElement runtime-core.esm-bundler.js:5194 processElement runtime-core.esm-bundler.js:5159 patch runtime-core.esm-bundler.js:5031 componentUpdateFn runtime-core.esm-bundler.js:5711 run reactivity.esm-bundler.js:178 update runtime-core.esm-bundler.js:5817 setupRenderEffect runtime-core.esm-bundler.js:5825 mountComponent runtime-core.esm-bundler.js:5615 processComponent runtime-core.esm-bundler.js:5568 patch runtime-core.esm-bundler.js:5043 mountChildren runtime-core.esm-bundler.js:5287 mountElement runtime-core.esm-bundler.js:5194 processElement runtime-core.esm-bundler.js:5159 patch runtime-core.esm-bundler.js:5031 componentUpdateFn runtime-core.esm-bundler.js:5711 run reactivity.esm-bundler.js:178

Editor compile-time error: Could not find a declaration file for module 'dompurify'. '/home/hazel/source/Web/Ionic/GlamBook/node_modules/dompurify/dist/purify.cjs.js' implicitly has an 'any' type. Try `npm i --save-dev @types/dompurify` if it exists or add a new declaration (.d.ts) file containing `declare module 'dompurify';

package.json relevant lines: ```json
"dependencies": {
...
"dompurify": "^3.0.6",
...
},
"devDependencies": {
...
"@types/dompurify": "^3.0.5",
...
}

[glacial folio]

what does your tsconfig.json look like? @mental roost

do you have the types property specified?

[mental roost]

autogenerated so i've never even looked at it before

[mental roost]

^

and this since it's referenced

[glacial folio]

looks alright

[glacial folio]

dont know what the legacy plugin is doing
maybe try to remove it to see if it helps

[mental roost]

no more compile-time error but the runtime-error is still there

[glacial folio]

well, is the library correctly injected?

you don't need to initialize it somewhere?

[mental roost]

i don't think so?

[glacial folio]

but is it at least included?

or did you just npm i'd it?

it needs to be loaded
usually by adding a script tag in your html

or by importing it in JS/TS

[mental roost]

yarn but yes i just installed it and assumed everything would be okay

[glacial folio]

that's just downloading a local copy of the library

you still need to "use" it

and load it

https://github.com/cure53/DOMPurify#how-do-i-use-it

Just include DOMPurify on your website.

[mental roost]

well i have an import statement as i mentioned at the beggining

[glacial folio]

and is that module imported/the entry point?

[mental roost]

seems like it

[glacial folio]

oh, but it's just a lib you import and use right away

not something that binds to the global object, and does the rest in the background, is it?

[mental roost]

the sanitize func shows up when i console.log(DOMPurify) but doesn't exist when i try to call it in the same file

[oak otter]

is it only in the editor?

[mental roost]

editor error is gone, dealing with the runtime error rn

[oak otter]

aha

and what changed inbetween?

[mental roost]

^ did this

[glacial folio]

so doing

import * as DOMPurify from "dompurify";
DOMPurify.sanitize(/* something */);

fails, right?

[mental roost]

oh uhh... no that works actually...

[glacial folio]

yeah, use the stuff you import

[mental roost]

so it must be the ctx i'm calling it from...

[glacial folio]

don't rely on the global object

[mental roost]

oh uhhh...

nvm again

[glacial folio]

that's the old way of doing things:
loading the lib, adding a global object, and using the global object

[mental roost]

there's no error anymore at all

[oak otter]

huh

[mental roost]

i think i just didn't refresh after fixing the editor error and it had fixed both

[glacial folio]

nowadays you import what you need and simply use it

[oak otter]

lol that was actually why I was asking, because the OP used a * as DOMPurify import but then later snippet used default import

[glacial folio]

Angular

[mental roost]

yeah no i'm still using the default import (my editor said they were equivalent anyway and told me to simplify) ig it was just that legacy plugin that fckd stuff up

[glacial folio]

my editor said they were equivalent anyway and told me to simplify
they are not

or, they are, but only because you are using the TS option

allowSyntethicDefaultImports

[mental roost]

i c

!resolved

thx uwu

[glacial folio]

import * as creates an additional scope
additional scope that might already exist when doing a default export of several objects (export default { ... })