Issue with Angular v16 - Uncaught ReferenceError: _asyncToGenerator is not defined #3210
-
|
maplibre-gl-js version: browser: Steps to Trigger Behavior
Link to DemonstrationExpected BehaviorIt should work ? Actual BehaviorTriggers this error
|
Beta Was this translation helpful? Give feedback.
Replies: 22 comments 20 replies
-
|
Please provide a stackblitz reproduction. |
Beta Was this translation helpful? Give feedback.
-
|
Everything in this example works fine on Stackblitz, but when I download the project and run it locally I get the asyncToGenerator errors , I'm new to Angular I also cloned your wrapper with Angular, and tried to run it on my computer |
Beta Was this translation helpful? Give feedback.
-
|
Sorry, you'll need to figure this out on your own... |
Beta Was this translation helpful? Give feedback.
-
|
@HarelM , I am seeing this myself. I haven't tried 3.4.1, but it's happening with 3.5.0. I'm investigating now. The error appears to be related to Babel, and I'm guessing also related to the change in 3.4.1 that's using async/await. |
Beta Was this translation helpful? Give feedback.
-
|
I'm going to look into it, but @msbarry , any ideas? |
Beta Was this translation helpful? Give feedback.
-
|
Your target is |
Beta Was this translation helpful? Give feedback.
-
|
Well, in my tsconfig the target is actually ES2022, so I'm not sure why it would be transpiling it, but I'll dig a bit and see what I can find. |
Beta Was this translation helpful? Give feedback.
-
|
I did some digging and it seems that Angular is forcing the transpilation to occur because zone.js is not compatible with native async/await: angular/angular-cli#25708 What I haven't been able to figure out is why it's transpiling but not including the function definition when it does so. So, @HarelM , have you indeed been able to get 3.4.1 or 3.5.0 to work in Angular yet? Per the above, it seems like it shouldn't work. This appears to be a legitimate issue. |
Beta Was this translation helpful? Give feedback.
-
|
It appears that using the "experimental" Angular browser-esbuild fixes the issue, but I am not able to use it myself because of another unrelated open issue :-( |
Beta Was this translation helpful? Give feedback.
-
|
It seems that the _asyncToGenerator function is actually included, but it's not available to the (transpiled) code on the worker thread because of how it's blob-ified, so it bombs. |
Beta Was this translation helpful? Give feedback.
-
|
Stackblitz must be building things differently, because it's not transpiling the async functions in the example provided by @adevinwild. When I download his project and get it to build (I had to upgrade TypeScript and add "allowSyntheticDefaultImports": true, providing further evidence that Stackblitz must be doing its own thing), I see the same error when I run it. |
Beta Was this translation helpful? Give feedback.
-
|
My mistake, sorry, it seems like the latest changes with the async code in version 3.5 creates problems with angular. |
Beta Was this translation helpful? Give feedback.
-
|
Seems like when you're using zone.js (or any build that transpires maplibre further than it already is) you should probably use the csp builds so that it injects polyfills into the worker properly. Or provide some way to inject polyfills into the worker manually? |
Beta Was this translation helpful? Give feedback.
-
|
Yes, zone seems like the offender here. CSP is a good direction to try, maybe I can have the ngx wrapper code use the csp build somehow... |
Beta Was this translation helpful? Give feedback.
-
|
I've tried to provide a worker through an Angular library before and it wasn't even possible. The library packager was not able to build the worker. Only an "application" was able to do so. This would mean that the consuming application would need to build the worker and provide it to MapLibre somehow, which would make it quite onerous to use, IMO. I don't know if that has changed recently, but I would guess not. |
Beta Was this translation helpful? Give feedback.
-
|
Also, I don't think this translation even needs to occur since zone.js shouldn't need to care about the worker thread, but I don't see any way to turn it off. |
Beta Was this translation helpful? Give feedback.
-
|
I think I'm hitting the same error in create-react-app, it just manifests as |
Beta Was this translation helpful? Give feedback.
-
|
Cc: @Pessimistress let me know if you are seeing this with the react wrapper using the latest maplibre-gl release. |
Beta Was this translation helpful? Give feedback.
-
|
Might be similar to this issue? Mapbox official docs: https://docs.mapbox.com/mapbox-gl-js/guides/install/#transpiling |
Beta Was this translation helpful? Give feedback.
-
|
I'll check the provided solutions there, it seems similar to what I'm looking for... Thanks @Pessimistress!! |
Beta Was this translation helpful? Give feedback.
-
|
Good suggestion, but I believe Angular is forcing this particular translation despite what's decided via browserlist. Or at least I was unable to bypass it, and the cli babel loader code seems to force it no matter what. I'd be happy to be proven wrong though! |
Beta Was this translation helpful? Give feedback.
-
|
I was not able to solve the problem with any of the suggestion solution there, neither the |
Beta Was this translation helpful? Give feedback.
-
|
If I use a local version of the csp worker, I can bypass the problem as the local version of the csp worker gets loaded as is, without any transpilation (it gets loaded on the fly). |
Beta Was this translation helpful? Give feedback.
-
|
Hello, i'm having the same issue, but i'm currently on Angular V15. |
Beta Was this translation helpful? Give feedback.
-
|
For some, dropping zone.js might also be a path forward. zone.js hasn't had an update in 4 years, and manually adding change detection does increase performance. krausest/js-framework-benchmark#1403 (comment) |
Beta Was this translation helpful? Give feedback.
-
|
Removing zone.js is a huge surgery, chances of survival are low for big applications. it's a lot easier to use the csp solution... |
Beta Was this translation helpful? Give feedback.
-
|
So I guess it's harder to get developers to update old tooling than it is to get end-users to update old browsers 🙃 Should we have similar guidance that mapbox gives, for example does |
Beta Was this translation helpful? Give feedback.
-
|
This could be a way forward. |
Beta Was this translation helpful? Give feedback.
-
|
That's also a possible solution, maybe we can also later on generate cjs and mjs files so that these can be consumed properly and maybe solve this issue that way - keep a commonjs file with "old" syntax and continue forward with the new syntax in a different file, maybe use a major version change to do the flip, IDK, this entire experience reminded me of the old dll hell with c-c++... Just horrible... 😕 |
Beta Was this translation helpful? Give feedback.
-
|
I think the value proposition of compiling async/away to promises is quite good.
|
Beta Was this translation helpful? Give feedback.
-
|
Don't get me wrong, I think it's a good solution, I'm just bummed with the current state of web development when we are talking about features that are not that new... |
Beta Was this translation helpful? Give feedback.
-
|
Transpiling now then breaking out a "modern" more compact mjs build from a larger "legacy" cjs build in a future release sounds like a good path forward! |
Beta Was this translation helpful? Give feedback.
-
|
This will be resolved in: |
Beta Was this translation helpful? Give feedback.
-
|
If anyone can confirm the patch, that would be great. |
Beta Was this translation helpful? Give feedback.
-
|
Release 3.5.1 works perfectly, thank you very much! 🥇 👍 |
Beta Was this translation helpful? Give feedback.
-
|
Amazing work @birkskyum 🎉 |
Beta Was this translation helpful? Give feedback.
This will be resolved in: