Client side issue

[PlopTheReal]

Not sure if that's not postcss issue but when importing the library on the browser I'm getting the following:

browser-external:path:9 Uncaught (in promise) Error: Module "path" has been externalized for browser compatibility. Cannot access "path.dirname" in client code.
    at Object.get (browser-external:path:9:13)
    at node_modules/postcss/lib/map-generator.js (map-generator.js:4:7)
    at __require (chunk-OL3AADLO.js?v=ae7dec9e:9:50)
    at node_modules/postcss/lib/lazy-result.js (lazy-result.js:4:20)
    at __require (chunk-OL3AADLO.js?v=ae7dec9e:9:50)
    at node_modules/postcss/lib/postcss.js (postcss.js:5:18)
    at __require (chunk-OL3AADLO.js?v=ae7dec9e:9:50)
    at node_modules/sanitize-html/index.js (index.js:6:33)
    at __require (chunk-OL3AADLO.js?v=ae7dec9e:9:50)
    at dep:sanitize-html:1:16

sanitize-html 2.7.1
postcss 8.4.14

Server Operating System:
System:
OS: Linux 5.15 Ubuntu 22.04 LTS 22.04 LTS (Jammy Jellyfish)
CPU: (1) x64 Intel(R) Xeon(R) CPU X5570 @ 2.93GHz
Memory: 3.26 GB / 12.68 GB
Container: Yes
Shell: 5.1.16 - /bin/bash
Binaries:
Node: 18.4.0 - ~/.nvm/versions/node/v18.4.0/bin/node
Yarn: 1.22.19 - /usr/bin/yarn
npm: 8.12.1 - ~/.nvm/versions/node/v18.4.0/bin/npm
Browsers:
Firefox: 102.0.1

The base framework is SvelteKit

[boutell]

I see. Since we don't use sanitize-html on the front end, support for front end use comes from the community. It will likely help if you can provide a simple test project.

[PlopTheReal]

Here we can see the error in the console:
https://stackblitz.com/edit/sveltejs-kit-template-default-7tj64c?file=src/routes/index.svelte

[Yuddomack]

@PlopTheReal
If you are in a hurry, can try dompurify 👆

[lperez22]

I tried using dompurify but it was missing some features that I depend on such as not lower casing tags since I'm using Vue there are some Vue Components involved and also closing tags that are missing them. I was able to work around the Module "fs" has been externalized for browser compatibility issue by aliasing some nodejs packages to an empty file, we are using Nuxt 3 here is an example of how I was able to alias this, I only needed to do it in dev, in build it is not an issue

nuxt.config.js

const aliasedPackages = process.env.NODE_ENV !== 'production'
  ? {
      vueBundler: 'vue/dist/vue.esm-bundler.js',
      url: 'empty-file.txt',
      fs: 'empty-file.txt',
      path: 'empty-file.txt',
    }
  : { vueBundler: 'vue/dist/vue.esm-bundler.js' };

export default defineNuxtConfig({
  vite: {
    resolve: {
      alias: aliasedPackages,
    },

[kolirt]

any updates?