Global variable collision

[matths]

I tried to reprt an issue, but the process is very obstructive, but I can describe it very well, if someone is interested or wants to listen:

We are building different Svelte components written in Typescript as custom elements.
We configured Vite to minify the code and to wrap it as IIFE.
And although we are using the latest version of Svelte and Vite,
we encounter a problem quite similar to this issue from about a year ago:
#11641

The minified code declares a global variable v which is vulnerable of being overwritten by some other code on the same website.

Minified the code reads like this (I added some linebreaks for readability):

var It=Object.defineProperty;
var Pt=(b,A,H)=>A in b?It(b,A,{enumerable:!0,configurable:!0,writable:!0,value:H}):b[A]=H;
var v=(b,A,H)=>(Pt(b,typeof A!="symbol"?A+"":A,H),H);
(function(){
	"use strict";
...

Without minification the code is that:

  var __defProp = Object.defineProperty;
  var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
  var __publicField = (obj, key, value) => {
    __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
    return value;
  };
(function() {
  "use strict";
...

Because minification renames __publicField to v we run into a variable name collision and an error.
I wonder, if the code that tries to move the declarations inside the IIFE doesn't work or if this is specifically related to Svelte?

We would appreciate if someone can confirm or even fix this or can transform this into an issue.

[festusiyere]

I'm still having similar issues

[matths]

The problem still exists and sometimes collides even with $ jquery. :(

Did someone found a workaround for this?

[matths]

Usually you just use the magic of the build tools and enjoy the result, whether rollup, vite or esbuild. But if something doesn't work, you quickly find yourself knee-deep in the swamp behind the curtain that hides the magic from us mortals.

And even if you are a fan of clean code and you prefer speaking function names instead of comments in the code, it still happens that someone else's comment catches your eye:

vite/packages/vite/src/node/plugins/esbuild.ts

Lines 281 to 290 in 5d55083

	// passing `var Lib = (() => {})()` to esbuild with format = "iife"
	// will turn it to `(() => { var Lib = (() => {})() })()`,
	// so we remove the format config to tell esbuild not doing this
	//
	// although esbuild doesn't change format, there is still possibility
	// that `{ treeShaking: true }` removes a top-level no-side-effect variable
	// like: `var Lib = 1`, which becomes `` after esbuild transforming,
	// but thankfully rollup does not do this optimization now
	iife: undefined,

So I think, Vite is doing some first stage bundling (with Rollup maybe) and uses esbuild for a second stage bundling of that "lib" telling esbuild to not wrap it inside another IIFE, which leads to that helper declarations outside the IIFE.

See my comment in esbuild repo for how I reproduced how the pollution of the global namespace occurs in the first place: evanw/esbuild#3275 (comment)

And the code to "repair" this situation doesn't work when esbuild is told to minify the code.

But where does that lead us?
Answers welcome.

[alEX860111]

I have the same problem. I use rollupOptions: { output: { format: 'iife' } } in the vite.config and default esbuild minification and my generated bundle looks like this in pseudo code:

(function() {... some code})();

var __defProp = ...;
var __defNormalProp =...;
var __publicField = ...;

(function() {... more code})();

I expect the output to be like this:

(function() {
... some code
var __defProp = ...;
var __defNormalProp =...;
var __publicField = ...;
... more code
})();

My expectation is that output format "iife" wraps everything in an IIFE so that the global namespace does not get polluted.