mapbox / mapbox/mapbox-gl-js

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

Open
#13,091 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

auto-triaged bug :lady_beetle:
Dominant language
TypeScript
Stars
12.4k
Forks
2.4k
PR merge metrics
No merged PRs in 30d

Description

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

```js
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:
```js
mapboxgl.default.accessToken = "YOUR_ACCESS_TOKEN"
```
`Map` can be used directly from `mapboxgl` no need to create it with `mapboxgl.default.Map`

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the dynamic import shown in the issue and compare it with the documented accessToken assignment. Read the CoreMapbox.vue call site named in the stack trace and verify how the imported module is accessed. Done means assigning accessToken on the imported module works without the default-object workaround while Map can still be constructed directly.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, typescript
Domain
frontend, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.