Console errors when using Mapbox GL 3 (Babel related)

[matbmapspeople]

mapbox-gl-js version: v3.0.0-beta.3

browser: Chrome, Safari, Firefox

Steps to Trigger Behavior

I tried to run Mapbox GL beta3 in my web app.
App uses:
Angular CLI: 13.3.11
Node: 16.13.2
Package Manager: npm 8.1.2
Angular: 13.3.6

webpack.config.js includes:

 use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
         }

Expected Behavior

No errors, running map.

Actual Behavior

I followed migration guide to run the latest release of the new Mapbox GL 3 (beta3). I encountered some console errors that were related to the code that I am using. I commented my code out to make the map appear. Unfortunately, there are two console errors that for some reason I am not able to solve:

Before I was using Mapbox GL 2 and everything worked in this case. Also I explicitly told the bundler to exclude node_modules when using Babel (webpack.config.js), but it did not work out.

Do you have any ideas or approach that might help me solving this problem?

[stepankuzmin]

Hi @matbmapspeople,

Could you please provide a minimal setup to help us address the issue?

[matbmapspeople]

Hey @stepankuzmin

Thank you for the reply.

I tried to create an online editor example, but I had some issues setting up proper dependencies.
Although I encountered some problems there, I managed to create repository with exactly the same issue I am experiencing.

Repo: https://github.com/matbmapspeople/mapbox-gl-playground
The only thing that you have to do is: npm install and npm start.

I hope that's acceptable and we can move on with it.
Let me know if you need anything else from me.

[tbHubs]

I am also experiencing this same issue with v3 within angular.

[matbmapspeople]

Update: it does not work on any beta releases (1-4)

[stepankuzmin]

@matbmapspeople, it seems that you are still transpiling GL JS in your setup. At least _asyncToGenerator is not part of the GL JS, and it's probably Babel transpiling async functions to generators. Could you please check that you don't transpile GL JS?

[tbHubs]

@stepankuzmin If it works on the non-beta version, should we not assume the issue is with the new beta version and not the configuration of our transpiling handling?

[stepankuzmin]

It seems that the same error occurred in MapLibre maplibre/maplibre-gl-js#3210.

As far as I can see, Angular is forcing the transpilation to occur because zone.js is not compatible with native async/await:

angular/angular-cli#25708
angular/angular#31730
angular/angular-cli#21552

We should look into different options to resolve this issue. /cc @mourner

[mourner]

@stepankuzmin short term the easiest is probably simply rewriting the async / await parts in the source that's included in the bundle to use old-school promises (there aren't that many occurrences). It's a huge shame though, and long term we want to find a way that will allow us to use async / await in the bundle while not causing any issues.

[mourner]

We shipped a fix to this internally — will be a part of the final v3 release.

[matbmapspeople]

Thank you for the response and fix @mourner and @stepankuzmin . Looking forward to final v3 release 👏