Safari: Inconsistent ESM module variable state - undefined then defined after timeout
- 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