TypeError: nanoid is not a function at new Input

[Meryl]

Getting an unexpected error while using html-sanitizer which depends on postcss.

TypeError: nanoid is not a function
    at new Input (input.js:58:1)
    at parse (parse.js:8:1)
    at index.js:460:1
    at index.js:18:1
    at Array.forEach (<anonymous>)
    at each (index.js:17:1)
    at Object.onopentag (index.js:283:1)
    at Parser.onopentagend (Parser.js:175:1)
    at Tokenizer.stateBeforeAttributeName (Tokenizer.js:267:1)
    at Tokenizer.parse (Tokenizer.js:646:1)

After tracing my callstack it seems that webpack is not building this package correctly.

[Andrey Sitnik]

Do you have this error in browser on in terminal?

[Meryl]

Browser

[Andrey Sitnik]

1. You should avoid adding PostCSS to browser. PostCSS is too big for client-side bundle. You should run PostCSS only in Node.js (for instance, as webpack’s postcss-loader). Seems like you should avoid using html-sanitizer because of performance reasons.
2. TypeError: nanoid is not a function could be thrown if your bundler (like webpack) doesn’t support ESM package. Seems like you need to ask in bundler community. For instance, you may use old webpack. It is hard to say without long investigation in bundler config (which will not worth it, see 1).

Since it is not part of PostCSS I am closing this issue.

My main recommendation is to replace html-sanitizer.