Vite library build is polluting global namespace

[adebicki]

Describe the bug

I am building a library. I have js file with class, which defines some fields. It is external npm package file, but the same occurs for simple code like this:

export class X {
 someField;
}

After build, iife and umd output files in dist folder are polluted with auxiliary global variables.

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(global, factory) {
...

After field declaration is removed, output files are as expected.

export class X {
  // someField;
}

(function(global, factory) {
...

Expected behavior: output files should not pollute global namespace

Reproduction

https://stackblitz.com/edit/vitejs-vite-vjtijq

Steps to reproduce

Run npm run build

System Info

(from stackblitz)

  System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 16.14.2 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 7.17.0 - /usr/local/bin/npm
  npmPackages:
    vite: ^4.0.4 => 4.0.4

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[cesutherland]

I encountered this or a related issue using the cjs build format — dependencies from node_modules polluted the global namespace.

[sapphi-red]

This happens only when esbuild.minifyWhitespace: false or build.minify: false is set.
Also this happens with v2.9.15 and v3.2.5.

[adebicki]

Setting build.minify: true seems to resolve the problem in original reproduction example.

Problem still exists though.

When using @iabtcf/cmpapi npm library in file /node_modules/@iabtcf/cmpapi/lib/mjs/command/CommandMap.js we got class definition using bracket notation for field names. This seem to cause the problem again in umd build.

import { PingCommand } from './PingCommand.js';
import { GetTCDataCommand } from './GetTCDataCommand.js';
import { GetInAppTCDataCommand } from './GetInAppTCDataCommand.js';
import { GetVendorListCommand } from './GetVendorListCommand.js';
import { AddEventListenerCommand } from './AddEventListenerCommand.js';
import { RemoveEventListenerCommand } from './RemoveEventListenerCommand.js';
import { TCFCommand } from './TCFCommand.js';
export class CommandMap {
    static [TCFCommand.PING] = PingCommand;
    static [TCFCommand.GET_TC_DATA] = GetTCDataCommand;
    static [TCFCommand.GET_IN_APP_TC_DATA] = GetInAppTCDataCommand;
    static [TCFCommand.GET_VENDOR_LIST] = GetVendorListCommand;
    static [TCFCommand.ADD_EVENT_LISTENER] = AddEventListenerCommand;
    static [TCFCommand.REMOVE_EVENT_LISTENER] = RemoveEventListenerCommand;
}

Narrowing it down:

const foo = 'bar';

export class X {
  [foo];
}

Reproduction:
https://stackblitz.com/edit/vitejs-vite-bug-proof?file=lib%2Findex.js

[sun0day]

This happens only when esbuild.minifyWhitespace: false or build.minify: false is set. Also this happens with v2.9.15 and v3.2.5.

Would it be OK to resolve this bug by moving extra global code into iife scope via magic-string?

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(global, factory) {
  typeof exports === "object" && typeof module !== "undefined" ? factory(exports) : typeof define === "function" && define.amd ? define(["exports"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.foo = {}));
})(this, function(exports2) {
  var _a;
  "use strict";
  // ==========> move `var __defProp....` here
  const foo = "bar";
  class X {
    constructor() {
      __publicField(this, _a);
    }
  }
  _a = foo;
  exports2.X = X;
  Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });
});

[sapphi-red]

@sun0day Yes, we are doing like that. I guess the regex is failing to catch these cases.

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

Lines 314 to 330 in 5d55083

	// #7188, esbuild adds helpers out of the UMD and IIFE wrappers, and the
	// names are minified potentially causing collision with other globals.
	// We use a regex to inject the helpers inside the wrappers.
	// We don't need to create a MagicString here because both the helpers and
	// the headers don't modify the sourcemap
	const injectHelpers =
	opts.format === 'umd'
	? INJECT_HELPERS_UMD_RE
	: opts.format === 'iife'
	? INJECT_HELPERS_IIFE_RE
	: undefined
	if (injectHelpers) {
	res.code = res.code.replace(
	injectHelpers,
	(_, helpers, header) => header + helpers,
	)
	}

[sun0day]

@sun0day Yes, we are doing like that. I guess the regex is failing to catch these cases.

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

Lines 314 to 330 in 5d55083

	// #7188, esbuild adds helpers out of the UMD and IIFE wrappers, and the
	// names are minified potentially causing collision with other globals.
	// We use a regex to inject the helpers inside the wrappers.
	// We don't need to create a MagicString here because both the helpers and
	// the headers don't modify the sourcemap
	const injectHelpers =
	opts.format === 'umd'
	? INJECT_HELPERS_UMD_RE
	: opts.format === 'iife'
	? INJECT_HELPERS_IIFE_RE
	: undefined
	if (injectHelpers) {
	res.code = res.code.replace(
	injectHelpers,
	(_, helpers, header) => header + helpers,
	)
	}

OK. I'd like to dig into it and send a PR.