Mapbox owned VT throws "Expected varint not more than 10 bytes."

[Bernoulli-IT]

Whenever building an Angular application in development mode Mapbox keeps throwing

"Expected varint not more than 10 bytes. mapbox://mapbox.mapbox-streets-v8,mapbox.mapbox-terrain-v2,mapbox.mapbox-bathymetry-v2"

This is an annoying issue when developing because tiles don't get shown although they come from Mapbox itself. What is causing this and can it be resolved. Is it possible to disable VTValidate in development mode (when creating the map)?

version: 2.15.0

browser: Chrome, Edge

Steps to Trigger Behavior

1. Angular application with mapbox-gl-js
2. Default Mapbox streets map style
3. Build application with {"vendorChunk": true, "extractLicenses": false, "buildOptimizer": false, "sourceMap": true, "optimization": false, "aot": true, "namedChunks": true} (👈🏼 most relevant)
4. Run application and encounter the exception (dozens of it 😢)

It does seem to be related with starting a debugging session from VS Code. When an "independent" browser is opened and the development application address is navigated to, no issues 🤔

Expected Behavior

A clean presentation of the Mapbox style in the browser application.

Actual Behavior

Dozens of exceptions (errors) being thrown and incomplete map representation. When building a production version all is flawless.

[stepankuzmin]

Hi @Bernoulli-IT,

This is most likely caused by transpilation of GL JS. Please consider:

• Targeting transpilation to ES6 with browserslist https://docs.mapbox.com/mapbox-gl-js/guides/install/#targeting-transpilation-to-es6-with-browserslist
• Explicitly disabling transpiling of the Mapbox GL JS bundle https://docs.mapbox.com/mapbox-gl-js/guides/install/#excluding-mapbox-gl-js-explicitly-from-transpilation
• Loading and transpiling Web Worker code separately at the cost of increasing bundle size and reducing performance https://docs.mapbox.com/mapbox-gl-js/guides/install/#loading-and-transpiling-the-web-worker-separately

See also #10565

[Bernoulli-IT]

As the provided options are not easy (or impossible) to implement in an Angular application build with VS Code I just found a way that also resolves the issue. This is by attaching the VS Code debugger to the application instead of launching the application from within VS Code.

1. Create an attach configuration with VS Code (it defaults to port 9222)
2. Make sure Chrome is opened with --remote-debugging-port=9222

For a detailed explanation StackOverflow