evanw / evanw/esbuild

Safari: Inconsistent ESM module variable state - undefined then defined after timeout

Open
#3,952 2 comments 2 reactions 0 assignees View on GitHub
Dominant language
Go
Stars
40.1k
Forks
1.3k
PR merge metrics
No merged PRs in 30d

Description

I've encountered an unusual behavior specifically in Safari (WebKit) where a variable imported from a dynamically loaded ESM module is initially `undefined`, but becomes defined after a small timeout. This doesn't occur in other browsers.

### Reproduction
```js
import * as mod from "./chunk-WEXA2WHQ.js";
await new Promise((res) => {
console.log(1, mod);
setTimeout(() => {
res(console.log(2, mod));
}, 10);
});
// Safari output:
// 1 undefined
// 2 {...}

// Chrome/Firefox output:
// 1 {...}
// 2 {...}
```

### Build Configuration
Using esbuild with the following config:
```js
{
entryPoints,
entryNames: "[name]-[hash]",
outdir: "...",
bundle: true,
splitting: true,
metafile: true,
treeShaking: true,
write: false,
minify: true,
format: "esm",
jsx: "automatic"
}
```

The dependency graph:
```dot
strict digraph "dependency-cruiser output"{
rankdir="LR" splines="true" overlap="false" nodesep="0.16" ranksep="0.18" fontname="Helvetica-bold" fontsize="9" style="rounded,bold,filled" fillcolor="#ffffff" compound="true"
node [shape="box" style="rounded, filled" height="0.2" color="black" fillcolor="#ffffcc" fontcolor="black" fontname="Helvetica" fontsize="9"]
edge [arrowhead="normal" arrowsize="0.6" penwidth="2.0" color="#00000033" fontname="Helvetica" fontsize="9"]

"chunk-XJRNTRWC.js" -> "chunk-QPHLPAA5.js"
"chunk-XJRNTRWC.js" -> "chunk-U67V476Y.js"
"chunk-XJRNTRWC.js" -> "chunk-WCUTOVXG.js"
"chunk-XJRNTRWC.js" -> "chunk-WEXA2WHQ.js"

"chunk-WEXA2WHQ.js" -> "chunk-5VTA2WAL.js"
"chunk-WEXA2WHQ.js" -> "chunk-AEZVEXA2.js"
"chunk-WEXA2WHQ.js" -> "chunk-AXFVPSDH.js"
"chunk-WEXA2WHQ.js" -> "chunk-EZEAVRPG.js"
"chunk-WEXA2WHQ.js" -> "chunk-QPHLPAA5.js"
"chunk-WEXA2WHQ.js" -> "chunk-TFVA3VVS.js"
"chunk-WEXA2WHQ.js" -> "chunk-U67V476Y.js"

# Files that depend on XJRNTRWC or WEXA2WHQ
"cart-OH52QW3I.js" -> "chunk-XJRNTRWC.js"
"cart-OH52QW3I.js" -> "chunk-WEXA2WHQ.js"
"dialog-3WPGJR7Y.js" -> "chunk-XJRNTRWC.js"
"dialog-3WPGJR7Y.js" -> "chunk-WEXA2WHQ.js"
"sheet-PWMR3JFM.js" -> "chunk-WEXA2WHQ.js"
}
```

### Questions
1. Is this behavior compliant with the ESM spec?
2. Could this be related to how code splitting works in Safari?
3. Is there a recommended way to ensure consistent module loading behavior across browsers?

### Environment
- Browser: Safari (stable release)
- esbuild version: 0.24.0
- OS: macOS / iOS

Note: The issue appears to be Safari-specific as it works as expected in Chrome and Firefox.

### Current hack

I'm adding this code:

```ts
await new Promise((res) => {
let i = 0;
(function check() {
if (mod || ++i > 100) res(null);
else setTimeout(check, 5);
})();
});
```

Contributor guide

No contributing guide indexed for this repository

Research direction

No repository file or test is named. Start by running the supplied dynamic ESM reproduction with esbuild 0.24.0 and the shown splitting configuration in Safari, then compare the generated modules and timing with Chrome and Firefox. Done means determining whether the discrepancy is in esbuild output or Safari and documenting a consistent loading result.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, typescript
Domain
build-system, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.