accessToken is not working as expected when loading Mapbox as dynamic library

[raaymax]

I'm not entirely sure if this is Mapbox issue but I thought I will let you know. Maybe this will be useful for someone with similar issue. mapbox-gl-js version: 3.1.2

browser: Arc 1.31.0 MacOS: Sonoma 14.1

Steps to Trigger Behavior

const mapboxgl = await import("mapbox-gl");

// according to https://docs.mapbox.com/mapbox-gl-js/guides/ this line should be correct
mapboxgl.accessToken = "YOUR_ACCESS_TOKEN"

new mapboxgl.Map({
    container: document.getElementById('map'),
});

Link to Demonstration

none

Expected Behavior

assigned key just like in the docs should work

Actual Behavior

Console output:

Error: An API access token is required to use Mapbox GL. See https://docs.mapbox.com/api/overview/#access-tokens-and-token-scopes
    at ze._makeAPIURL (mapbox-gl.js?v=eb8ae707:663:23)
    at ze.normalizeStyleURL (mapbox-gl.js?v=eb8ae707:599:90)
    at iS.loadURL (mapbox-gl.js?v=eb8ae707:22889:43)
    at Map._updateStyle (mapbox-gl.js?v=eb8ae707:26368:251)
    at Map.setStyle (mapbox-gl.js?v=eb8ae707:26359:436)
    at new Map (mapbox-gl.js?v=eb8ae707:26097:797)
    at initMap (CoreMapbox.vue:99:9)

Workaround

My temporary solution is to assign accessToken in default object:

mapboxgl.default.accessToken =  "YOUR_ACCESS_TOKEN"

Map can be used directly from mapboxgl no need to create it with mapboxgl.default.Map

[ramedina86]

Thanks for submitting @raaymax Commenting to watch this one 👀

[underoot]

Thank you for reporting! What build system do you use?

[ramedina86]

@raaymax and I are using Vite (with Vue).

We're dynamically importing MapBox i.e. const mapboxgl = await import("mapbox-gl");