Browser console warnings with React and Vite

[bedwards-cms]

The problem to solve

Lots of console warnings are being logged since adding sanitize-html to a React application running with vite.

This is details about the warning we are seeing.
https://vitejs.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility

Here is an example what we see in console:

Proposed solution

See if there is a reasonable resolution to eliminate this issue.

Alternatives

In this case, one alternative is to just switch to using domPurify

Additional context

Mention any other context or attach screenshots regarding the feature request.
Check the existing issue labels and add any you think are relevant, e.g.,
UI, UX, accessibility, security.

[boutell]

We don't use this module browser-side. I'm aware of some valid use cases, but it mostly makes much more sense to sanitize things in a place you can trust (e.g. on a server). So this is an area for community contributions.

[boutell]

Possibly it's time for a new major version that introduces a backwards compatibility break by making postcss support optional via a second, optional module. That seems to be source of just about all concerns about this. There is no mention of the fs module in sanitize-html itself.

[devCodeHub-star]

Hello @boutell

I am also getting all the warnings in my console. I have update the version from '2.7.3' to '2.12.1' but still I am getting all warnings.

Any solution ?

Thankyou

[KyleBrown-804]

This might be a dumb question but an important to ask nonetheless, if I am seeing these warnings (on a Vue/Nuxt 3 application), is there any concern about the functionality of the sanitizing working properly? As a followup and per @boutell's comment, would it be safer and better practice to move the sanitizing to an SSR context?

[boutell]

Really you have two options: you can sanitize the data once server side and save it in sanitized form, or you can sanitize it every time you output it on the client side. Here we prefer the former, because it is efficient and it's harder to do something unsafe, and so we don't use this module on the client side. Client side support is contributed by the community.

These warnings relate to Node.js features utilized by sanitize-html or its dependencies. Vite is telling you that it provided a simulation, but not a complete one, and there's a chance the module uses something it doesn't provide. Possibly that could be fixed by community contributors through eliminating calls to the mentioned features.

For what it's worth though, sanitize-html never does import path. It's not mentioned anywhere in the source. So it's probably a dependency of a sub-dependency, and that's a longer road tracking down the module that actually has the issue and contributing there or finding an alternative to that functionality for sanitize-html to use.

[KyleBrown-804]

Awesome, thank you for the insight 👍

[blittle]

Related, but sanitize-html has problems running on cloudflare workers, which is also a server environment, but does not have Node APIs.

[boutell]

It sounds like this would need to be resolved upstream in postcss, so I would recommend checking into whether I'm right about that, and if so contributing to the solution there.

[vhscom]

Linking to vitejs/vite#7821

[vhscom]

Switching to DOMPurify as OP suggested resolved the wall of warnings with Vite 5. DOMPurify is DOM-only. If you're looking for an isomorphic solution in a single package, js-xss will also work when pre-rendering on the server.

[phil294]

You can use a polyfill:

https://github.com/davidmyersdev/vite-plugin-node-polyfills

// vite.config.js
plugins: [
nodePolyfills({
            include: ['process', 'tty', 'path', 'fs'],
            protocolImports: false,
        }),

Amounts to 69 KB bundle size increase / 16 KB gzipped