Definitelytyped: @types/mapbox-gl: accessToken read-only?

[dccarmo]

• [x] I tried using the @types/xxxx package and had problems.
• [x] I tried using the latest stable version of tsc. https://www.npmjs.com/package/typescript
• [x] I have a question that is inappropriate for StackOverflow. (Please ask any appropriate questions there).
• [x] [Mention](https://github.com/blog/821-mention-somebody-they-re-notified) the authors (see Definitions by: in index.d.ts) so they can respond.
  
  
  
  • Authors: @dobrud, @patrickr
  
  

Shouldn't accessToken be writeable? Am I missing something?

[salmau]

You can use (mapboxgl as any).accessToken

[Doug-Shannon]

That works, but is the spec wrong here? Seems like you should be able to write to it.

[ksylvest]

Yeah - this is definitely a bug. Annoying to have invalid type definition for the configuration (everyone needs to use this before using the library).

[eduboxgithub]

Same here... Had to do:
Object.getOwnPropertyDescriptor(Mapbox, "accessToken").set('key-value');

[rschulman]

I am also having this issue, and neither of the (mapboxgl as any) nor the Object.getOwnPropertyDescriptor answers from above seem to be working for me. Typescript isn't complaining, but the browser console is telling me that an API access token is required.

Anyone have any thoughts on what I could try next?

[garrettgsb]

Same problem. Functional workarounds for me are (mapboxgl as any).accessToken = 'abc123' and changing import * as mapboxgl from 'mapbox-gl' to const mapboxgl = require('mapbox-gl').

The examples from Mapbox's own repos indicate that the accessToken property should indeed be writable. Example:

https://github.com/mapbox/mapbox-react-examples/blob/master/react-tooltip/src/index.js

[HeleleF]

Its been over a year now... will this be fixed?

[mgcarre]

Having the same issue accessToken is readonly...

Had this fixed modifying the declaration file

at line 13 instead of :

export = mapboxgl;

I have :

export default mapboxgl;

Then I imported the whole namespace which does not cause any trouble... Working fine for v.1.2.1

import mapboxgl from 'mapbox-gl';

[stanleenwosu]

Worked for me

[herr0092]

+1 Same error here

[tomekr]

@mgcarre is that something that could get PR'd?

Another alternative which doesn't require any weirdness is to use the Map object's access token option:

```
import { Map } from 'mapbox-gl';

var map = new Map({
accessToken: 'pk...',
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11'
});

[davidgilbertson]

@tomekr I came here to say exactly this :)

Works in v1.2 onwards https://github.com/mapbox/mapbox-gl-js/pull/8364

[mgcarre]

@tomekr 👍
I re-read the typescript documentation and found some interesting stuff...

First the doc says : "ES6 modules cannot directly export class objects [...] use the CommonJS-style:

import mapboxgl = require('mapbox-gl');
mapboxgl.accessToken = 'YOUR_TOKEN';

Instead, you can use the ES6 syntax only if you add the _esModuleInterop_ (affects code emit) or _allowSyntheticDefaultImports_ (no affects to code emit just type checking) to your typescript config file or flags... Example config file :

{
    "compilerOptions": {
        "esModuleInterop": true
    }
}

This automatically adds the "export default ..." to the proper file and allows you to use your mapboxgl object as before :

import mapboxgl from 'mapbox-gl';

mapboxgl.accessToken = 'YOUR_TOKEN';

In conclusion no PR is needed but right configuration file/flag 😄

Source : https://www.typescriptlang.org/docs/handbook/modules.html#export--and-import--require