Why is source-map-js flagged as non-browser?

[softins]

I am developing a project under Vite using VueJS 3.

The project uses sanitize-html, which in turn requires postcss. Then postcss itself requires source-map-js but flags it as non-browser in package.json:

  "dependencies": {
    "nanoid": "^3.3.7",
    "picocolors": "^1.0.1",
    "source-map-js": "^1.2.0"
  },
  "browser": {
    "./lib/terminal-highlight": false,
    "source-map-js": false,
    "path": false,
    "url": false,
    "fs": false
  }

This causes Vite to generate the following warning in the browser dev console:

Module "source-map-js" has been externalized for browser compatibility. Cannot access "source-map-js.SourceMapConsumer" in client code. See https://vitejs.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.

It originally generated similar warnings for the Node core modules path, url and fs, and I fixed that by using the package vite-plugin-node-polyfills.

But source-map-js isn't a Node core module, but rather a module installed using npm. So why is it flagged as non-browser?

For the time being I overcame the warning by installing the older package source-map, and aliasing source-map-js to source-map in vite.config.js. But this feels like the wrong solution.

Any advice would be much appreciated!

[ai]

So why is it flagged as non-browser?

To reduce JS bundle size white source map support is very rare needed in in-browser PostCSS run

[softins]

OK, thank you. So what would be your recommended course of action for me in the situation I described above?

[ai]

What is exactly problem in additional to warning?

By the way, you do not need vite-plugin-node-polyfills. It will bloat JS bundle a lot by FS methods which anyway PostCSS does not use.

PostCSS just works in browser without any polyfills (at least worked).

[softins]

Well, it is when running in dev mode under Vite with npm run dev that the warnings get shown up in the console. I generally don't like warnings, because they usually indicate something is being done sub-optimally or incorrectly. In this case the app appears to run anyway.

When building the distribution with npm run build, the app also seems to build and run ok, although I am suspicious that rollup might be polyfilling or bundling anyway. I'm still learning this stuff!

I will do some tests on bundle sizes when building with and without vite-plugin-node-polyfills to try and understand what exactly might be happening.

[softins]

I will do some tests on bundle sizes when building with and without vite-plugin-node-polyfills to try and understand what exactly might be happening.

OK, I can see that the bundle size increases by about 50kB when I include vite-plugin-node-polyfills, but the built app seems to work without it. I still wish I could suppress the warnings in dev mode, but I guess I can live with them...