Use a different name than "top" in top-level code

jsimonrichard commented

2025-08-07 23:11:33 +02:00

(Migrated from github.com)

When style-mod is bundled without being minified, the top variable within src/style-mod.js conflicts with many browsers' top top-level variable.

Since this is a computed attribute, this throws an error in strict mode:

Uncaught TypeError: setting getter-only property "top"

When style-mod is bundled without being minified, the `top` variable within `src/style-mod.js` conflicts with many browsers' `top` top-level variable. Since this is a computed attribute, this throws an error in strict mode: ``` Uncaught TypeError: setting getter-only property "top" ```

marijnh commented

2025-08-08 09:32:14 +02:00

(Migrated from github.com)

This is a regular, module-local variable. In a standard-conforming module loader or bundler, it should not interfere with a global of the same name at all. How are you doing the bundling?

jsimonrichard commented

2025-08-08 11:49:29 +02:00

(Migrated from github.com)

I tried esbuild and tsup. Both have the same issue.

I realize this is a pretty weird error. I was baffled by it for a while

I tried esbuild and tsup. Both have the same issue. I realize this is a pretty weird error. I was baffled by it for a while

marijnh commented

2025-08-08 21:09:03 +02:00

(Migrated from github.com)

npm i esbuild style-mod
echo 'import * as x from "style-mod"; console.log(x)' > test.js
esbuild test.js --bundle --outfile=test_bundle.js

This works and emits a bundle that looks perfectly okay.

``` npm i esbuild style-mod echo 'import * as x from "style-mod"; console.log(x)' > test.js esbuild test.js --bundle --outfile=test_bundle.js ``` This works and emits a bundle that looks perfectly okay.

jsimonrichard commented

2025-08-09 00:37:21 +02:00

(Migrated from github.com)

It seems like this error only shows up when using the node platform:

esbuild test.js --bundle --platform=node --outfile=test_bundle.js

test.js:

"use strict"; // this is required for the example, but it shows up on its own when building typescript with "strict": true

import * as x from "style-mod";

console.log(x)

test_bundle.js

"use strict";
...
var top = typeof globalThis != "undefined" ? globalThis : typeof window != "undefined" ? window : {};

This is still only a problem when there are browser apis to conflict with:
test.html

<html>
  <body>
    <script src="./test_bundle.js"></script>
  </body>
</html>

It seems like this error only shows up when using the `node` platform: ```bash esbuild test.js --bundle --platform=node --outfile=test_bundle.js ``` `test.js`: ```js "use strict"; // this is required for the example, but it shows up on its own when building typescript with "strict": true import * as x from "style-mod"; console.log(x) ``` `test_bundle.js` ```js "use strict"; ... var top = typeof globalThis != "undefined" ? globalThis : typeof window != "undefined" ? window : {}; ``` This is still only a problem when there are browser apis to conflict with: `test.html` ```html <html> <body> <script src="./test_bundle.js"></script> </body> </html> ```

marijnh commented

2025-08-09 21:25:24 +02:00

(Migrated from github.com)

Don't use --platform=node, which emits a CommonJS module, if you're going to run the bundle in the browser. As you found, that'll load all the module-local variables into the global scope, which is bad.

Don't use `--platform=node`, which emits a CommonJS module, if you're going to run the bundle in the browser. As you found, that'll load all the module-local variables into the global scope, which is bad.

jsimonrichard commented

2025-08-09 21:33:49 +02:00

(Migrated from github.com)

Unfortunately --platform=node is required for VS Code extensions, which is what I'm working on.

Unfortunately `--platform=node` is required for VS Code extensions, which is what I'm working on.

jsimonrichard commented

2025-08-09 21:37:29 +02:00

(Migrated from github.com)

Actually, no... maybe it's not required. But that's the default....

Actually, I think I see the issue. I'm using the same bundler settings for the extension javascript file and the javascript that's loaded in the webview. I'll have to update that on my project's side.

Thanks!

Actually, no... maybe it's not required. But that's the default.... Actually, I think I see the issue. I'm using the same bundler settings for the extension javascript file and the javascript that's loaded in the webview. I'll have to update that on my project's side. Thanks!

Pull request closed

This pull request cannot be reopened because the branch was deleted.

Rows
Columns

Use a different name than "top" in top-level code #14

Pull request closed