Uncaught ReferenceError: __async is not defined

[anbaran]

mapbox-gl-js version

v3.24.1

Browser and version

No response

Expected behavior

After upgrading mapboxgl from v3.16.0 to v3.24.1 I receive the below error when my code in Angular 22 executes the line new mapboxgl.Map({
In version v3.16 the error does not occur
the error is

An error occurred while parsing the WebWorker bundle. This is most likely due to improper transpilation by Babel; please see https://docs.mapbox.com/mapbox-gl-js/guides/install/#transpiling'

Actual behavior

No response

Link to the demonstration

No response

Steps to trigger the unexpected behavior

No response

Relevant log output

[stepankuzmin]

Hi @anbaran,

This is most likely related to a recent change in GL JS where we enabled native async/await expressions in the GL JS bundle (see #12907).

I wonder if you are still using Zone.js or have switched to zoneless? As far as I know, this is the recommended approach now.

As a potential workaround, could you please try using the ESM version of the GL JS bundle to see if that prevents the bundler from transpiling async/await?

import * as mapboxgl from 'mapbox-gl/esm';

[anbaran]

Thank you for your prompt reply. We still use Zone.js and cannot yet migrate to zoneless. I tried you suggestion, import * as mapboxgl from 'mapbox-gl/esm'; but then I receive the following error in browser:

Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

[stepankuzmin]

This looks like a bundler issue. Could you please try updating GL JS to the latest v3.25.0 and importing the ESM bundle again?

[anbaran]

I have tried it already with v3.25.0 today

[stepankuzmin]

Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html".

This looks as if the local dev server is serving HTML instead of JS. @anbaran, could you please create a small reproducible example with Angular + Zone.js?

[anbaran]

I didn't manage to reproduce the same error as locally but on stackblitz example below it works with 3.16 mapbox but not with 3.25 version

https://stackblitz.com/edit/stackblitz-starters-uizt7j5y?file=src%2Fmap.component.ts

PS. you need to use your api key for that

[MoritzMeinhardt]

We have the same issue Angular v21 + zone.js. We will stay with "mapbox-gl": "3.16.0" for now.
Thanks for sharing this issue and for building mapbox!

[stepankuzmin]

Thanks for the reproduction, @anbaran.

It appears that @angular/build with zone.js in polyfills makes esbuild rewrite native async/await into a shared __async helper. We added native async/await to GL JS in v3.19.0-beta.1, so now it gets transpiled too. The helper goes into your app bundle, but GL JS runs a Web Worker in a separate context with no access to it, so you get __async is not defined when you create a map.

There are two workarounds I see:

• Go Zoneless so esbuild keeps native async/await https://angular.dev/guide/zoneless
• Load GL JS as an external script so the bundler never touches it https://docs.mapbox.com/mapbox-gl-js/guides/get-started/use-with-cdn/

<link href="https://api.mapbox.com/mapbox-gl-js/v3.25.0/mapbox-gl.css" rel="stylesheet" />
<script src="https://api.mapbox.com/mapbox-gl-js/v3.25.0/mapbox-gl.js"></script>

I'll pin this issue and keep it open so more folks can see it, but in the end, there isn't much we can do on our end to prevent bundlers from transpiling GL JS.