Vue3+Vite does not work. Error occurred while parsing the WebWorker bundle.

[vladimir-chernykh]

mapbox-gl-js version: 2.14.0

Question

Hi, everyone!

I'm trying to set up and use mapbox-gl-js with Vue3.

Here is the most minimalistic reproducible example: https://github.com/vladimir-chernykh/vue3-vite-mapbox-gl-js. It contains just one div in html and only mapbox import in js.

No matter what, I get two following errors during the dev-time (not after build as it has been reported in other issues):

b87aeebe-9bb0-48ba-8c20-eafa29a1724c:1 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

and

Uncaught ReferenceError: __publicField is not defined

I've read through multiple issues (#10173, #10565) and official docs, but none of the solutions helped.

I'm using the default Vue3 scaffolding CLI, which now creates a project with Vite instead of WebPack. I do not use babel directly or any other tool (see minimalistic example).

I suspect that the problem might be a little bit different, because it does not work even in development.

I'm highly interested if somebody's met this problem before and would appreciate if some of you can help!

Links to related documentation

https://docs.mapbox.com/mapbox-gl-js/guides/install/#transpiling

[jul654321]

We have faced the same issue

[JamesChevalier]

I'm seeing the same thing in a Rails 7 app with esbuild. Similarly not using babel, either.
I had to change the --target option from --target=es2019 to --target=es2022 or --target=esnext for it to work.

The end result of my package.json is:

"scripts": {
  "build:css": "tailwindcss -c ./config/tailwind.config.js -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css --minify",
  "build": "esbuild app/javascript/*.* --bundle --minify --sourcemap --target=es2022 --outdir=app/assets/builds",
  "dev:build": "esbuild app/javascript/*.* --bundle --sourcemap --target=es2022 --outdir=app/assets/builds"
}

I'm not necessarily sharing this to suggest that what I've done is good/correct 😄 more so to offer some path forward.

[fbellomi]

Having the same issue with vitejs/esbuild, currently using target es2020.

The issue appeared moving from 2.13.0 to 2.14.0

Moving the target to es2022 did not solve the problem in my case

[inomn]

Same, but for Vite + React + TS

"vite": "^4.2.1",
"mapbox-gl": "^2.14.0",

[chris-wasowicz]

@inomn I had the same problem with exactly same stack, change the versions to strict ones:

"vite": "4.1.0",
"mapbox-gl": "2.13.0"

On higher mapbox version it doesn't work. Not sure why it did before though.

[fbellomi]

Not sure why it did before though.

Same here, my understanding is that is a regression introduced with 2.14.0, which was released yesterday

[chris-wasowicz]

@fbellomi Ah you are right, forgot about that.

[agracia-foticos]

Same issue

[mourner]

Investigating, thanks for the comments everyone!

[mourner]

Found the most likely culprit — an accidental introduction of a class field here https://github.com/mapbox/mapbox-gl-js/blob/main/src/style/style_layer/line_style_layer.js#L25 (added in #12588), which breaks our worker bundling setup in some cases when transpiled. Working on a patch now, and adding a test to make sure similar errors don't slip through in the future.

[mourner]

Fix coming in #12658. We'll likely release a v2.14.1 with the patch tomorrow.

[mourner]

Hey everyone, can you please try upgrading to v2.14.1 and see if it resolves the bundling issue?

[evaldas-gp]

Hey everyone, can you please try upgrading to v2.14.1 and see if it resolves the bundling issue?

Thanks - works for me

[vladimir-chernykh]

Hey everyone, can you please try upgrading to v2.14.1 and see if it resolves the bundling issue?

Works for me as well. Thanks a lot for such a quick fix!

[inomn]

Hey everyone, can you please try upgrading to v2.14.1 and see if it resolves the bundling issue?

Hi @mourner , thanks a lot! It works now

[snakysnake]

Still got the issue on 2.15.0 just trying out if it works on 2.13

[cijokb]

With the below configuration and code , I am able to compile and work for React App (dev and production)
Configuration
vite:"^4.3.2"
mapbox-gl: "^2.15.0"

import mapboxgl from 'mapbox-gl'; 
import MapboxGLWorker from 'mapbox-gl/dist/mapbox-gl-csp-worker?worker';

mapboxgl.workerClass = MapboxGLWorker;

......