accessToken is not working as expected when loading Mapbox as dynamic library
Nobody has claimed this yet.
- 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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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