Not Showing Map Style

[shawn220a]

mapbox-gl-js version: 2.1.0

browser: Safari, Google Chrome

Steps to Trigger Behavior

1. Only happens on deployed digital oceans app
2. Go to nav bar
3. Select Where We Reach
4. Inspect and it shows error: ReferenceError: Can't find variable: y

Link to Demonstration

https://southwest-education-cmlho.ondigitalocean.app/WhereWeReach

https://jsbin.com/

Expected Behavior

Actual Behavior

[mourner]

There's not enough details to properly diagnose the issue, but this is likely a duplicate of #10173

[rdvelazquez]

I'm having similar behavior where layers (line and fill) with geoJSON sources show up fine in my develop environment (localhost) but don't show up when deployed to firebase hosting. I inserted some logging in the code to try and track down the issue and I've confirmed that on both the local and deployed version:

• the sources are being added correctly (console.log(map.getStyle().sources))
• the layers are being added correctly (console.log( map.getStyle().layers))

The only difference I can see in the console is the ReferenceError: Can't find variable: y which is on the deployed version but not the local version. (I came across this GH issue by searching ReferenceError: Can't find variable: y)

mapbox-gl-js version: 2.1.1 (also tried 2.2.0)
browser: Safari

@shawn220a it looks like your first link to demonstration is now working correctly on your site... What did you do to address the issue?

[rreusser]

@rdvelazquez I think your issue is also a bundling issue (issue #10173, as @mourner said, in this case obscured slightly by minimization). Because transpilers like babel are not aware of how gl-js's web workers are set up, they don't inject the polyfills in the right place, resulting in errors like "y is not defined". You can find an explanation in #10565 and updated documentation on the Mapbox website, which will hopefully help you choose the right configuration for your needs.

[rdvelazquez]

Thanks for the quick reply @rreusser! I tried using mapbox-gl-js version 1.13.1 (the switch from ES5 to ES6 modules was apparently implemented in the change from 1.13.1 -> 2.0.0) and it now works fine on the deployed version.

I'll do some more digging into the issues and documentation that you linked to and see if I can find a way to make ^2.0.0 work with Firebase deployment. I'll let you know here if I find a solution.

[HudsonGri]

Did you find a way to make it work in 2.0.0? I am also having this issue>

[rdvelazquez]

I'm still just using 1.13.1 because my project doesn't have much active map development at the moment. I didn't get a chance to do much sleuthing to try find a fix but the comments about the transpiling issues from the ES5 -> ES6 move seem spot on and if you're in control of your build process there should be fixes if you adjust your build config files. If you're not fully in control of your build process maybe inline-build-queues (just made that word up) as mentioned here #10173 (comment) could be a good place to try.