oven-sh / bun

Incredibly fast JavaScript runtime, bundler, test runner, and package manager – all in one
https://bun.sh
Other
73.75k stars 2.73k forks source link

JQuery’s $ may be overwritten by Bun’s build artifacts. #14586

Open Chrysochrome opened 3 hours ago

Chrysochrome commented 3 hours ago

What version of Bun is running?

1.1.30+7996d06b8

What platform is your computer?

Darwin 24.0.0 arm64 arm

What steps can reproduce the bug?

When using Bun build for bundling (in my case with ky), one of the classes was minified into a variable named $. The bundled artifact lacks 'use strict' or any other declarations, which causes a conflict when importing the bundle alongside JQuery on the same page. Both JQuery and the bundled code use the $ variable, leading to name conflicts.

While attempting to recreate this issue, I noticed that the variable names generated during the build process can change, making it difficult to consistently reproduce the problem in a controlled environment. This raises a question: when targeting the browser in the build process, could there be a way to minimize conflicts with variables already mounted on the window object, such as $ used by JQuery? Additionally, it would be helpful if there were a way to inject 'use strict' in the build output to avoid these issues.

By the way, my build command is:

bun build ./src/* --minify --outdir ./mini --target browser --define "xxx"

What is the expected behavior?

Do not overwrite existing third-party libraries.

What do you see instead?

Third-party libraries have been overwritten.

Additional information

No response

Chrysochrome commented 3 hours ago

Some build artifacts are as follows:

class X extends Error {
    response;
    request;
    options;
    constructor(E, _, Z) {
        const H = E.status || E.status === 0 ? E.status : "",
            S = E.statusText || "",
            O = `${H} ${S}`.trim(),
            W = O ? `status code ${O}` : "an unknown error";
        super(`Request failed with ${W}: ${_.method} ${_.url}`);
        (this.name = "HTTPError"),
            (this.response = E),
            (this.request = _),
            (this.options = Z);
    }
}
class $ extends Error {
    request;
    constructor(E) {
        super(`Request timed out: ${E.method} ${E.url}`);
        (this.name = "TimeoutError"), (this.request = E);
    }
}