Bug 242740 – [JSC] ReferenceError when multiple modules are simultaneously importing a module containing a top-level await

• Component: JavaScriptCore
• Status: NEW

Created attachment 460889 [details]
Test case reduction -- also includes a README explaining the steps to reproduce the issue

When modules are simultaneously fetching an import which requires some setup time due to top-level await, one of the imports will be rejected. This doesn't happen when the modules are fetched sequentially.

Note, I'm not aware of what the spec has to say about how this should be implemented, but I did note that this behavior is not consistent with other browsers. When running the attached test case reduction on either chrome or firefox, none of the promises will be rejected.


(reproduced this using WebKit 16612(.3.6.1.8))

[Radar WebKit Bug Importer]

<rdar://problem/97370038>

[Jimmy Wärting]

able to reproduce, i stubble upon this issue today myself... FF/Blink works OK

it's hard to really do any workaround without doing a major refactor. It's not like you can polyfill this in anyway. so i wish this could be fixed/prioritized.
...non essential issues that can be solved with polyfills can get a lower priority

I would consider this to be more of a bug than a feature request.

I've encountered into this problem myself and spent a lot of time debugging due to unformatted error messages. https://github.com/sveltejs/kit/issues/7805 - message in the SvelteKit repository, where other developers have encountered this bug. Please prioritize fixing it!

[Jack Koppa]

Noting that we've encountered a similar issue, in our case using Web Components from Stencil - https://github.com/ionic-team/stencil. Issue only occurs on Safari (as per the test case reduction), and is resolved if we refactor to remove our top-level await.

[pjmv]

I've encountered "Unhandled Promise Rejection: ReferenceError: Cannot access uninitialized variable" while developing with Astro and can confirm that WebKit-based browsers handle things differently than other browsers.

[Alexey Shvayka]

Pull request: https://github.com/WebKit/WebKit/pull/24122

[linnea2]

(In reply to Jack Koppa from comment #4)
> Noting that we've encountered a similar issue, in our case using Web
> Components from Stencil - https://github.com/ionic-team/stencil https://dinosaurgame3d.com. Issue only
> occurs on Safari (as per the test case reduction), and is resolved if we
> refactor to remove our top-level await.

How can the issue that occurs specifically on Safari when using Web Components from Stencil be resolved by refactoring the code to remove the top-level await?

This bit me today - it actually happens in a much simpler use-case than the one presented in this issue as well.

I have a reusable async function that imports a module, and therefore is subject to importing that module multiple times. When it is called twice (or more) before the module has loaded, some of the imports resolve immediately. In a nutshell:

```js
// index.js
import('./mod.js').then(() => console.log('one'));
import('./mod.js').then(() => console.log('two'));

// mod.js
await new Promise(resolve => setTimeout(resolve, 1000));
```

Here, I expect to see the "one" and "two" logged after a second (not necessarily in that order), but instead, Safari instantly logs "two" and then logs "one" after a second. Adding more `import()` statements to this causes all but the first import to resolve immediately.

[Mark Lam]

*** Bug 270687 has been marked as a duplicate of this bug. ***

[Hugo Campos]

At Esri, we stumbled upon this issue within our ArcGIS Maps SDK. We use top-level await to dynamically load different modules based on the environment. Somewhat similar to what Sveltekit stumbled upon in https://github.com/sveltejs/kit/pull/11601

Another repro we put together, similar to [e-mail] above:

```js
// utils.js
await new Promise((resolve) => setTimeout(resolve, 100));
export var utils = "utils";

// common.js
const { utils } = await import("./utils.js");
export var common = utils;
console.log("common", { utils });

// entry.js
const [{ utils }, { common }] = await Promise.all([import("./utils.js"), import("./common.js")]);
console.log("a", { common, utils });
```

Works as expected in Chrome, Edge and Firefox. Fails in Safari, with one of the imports resulting in undefined.