Global namespace pollution is still an issue #16443
Labels
feat: library mode
has workaround
p2-edge-case
Bug, but has workaround or limited in scope (priority)
Describe the bug
We are bundling Svelte components as custom elements using Vite.
We automized this step for a whole bunch of components and every now and then, there might be a component, whose bundle.js leads to conflicts with existing JS code on website we use the components. Worst case so far was a conflict with jQuery, because Vite bundling created a $ var in the global namespace.
There was a workaround PR for this more then a year ago, which does not work with
minify: true
.#15489
I describe the problem and my findings in this discussion: #15489
Usually esbuild wraps everything inside an IIFE to have a scope other than the global scope so minified variables does not conflict. Also esbuild is adding those three to four variables, lets call them helpers.
Vite then again does not take advantage of this IIFE, but instead explicitly set the format option to undefined as stated in this comment:
vite/packages/vite/src/node/plugins/esbuild.ts
Lines 281 to 290 in 5d55083
I think it does so, because it has kind of a multi stage bundling mechanic and the first one already puts an IIFE around the code.
So the old workaround tried to move the variables inside the existing IIFE, but this does not work, when code was minified.
Reproduction
https://github.com/matths/global-namespace-pollution
Steps to reproduce
run
npm install
followed mynpm run vite
.have a look at vite/bundle.js and vite/bundle.min.js and see that there are variables outside the IIFE which might conflict with global variables from other JS packages on the same website.
System Info
Used Package Manager
npm
Logs
No response
Validations
The text was updated successfully, but these errors were encountered: