API access token is required to use Mapbox GL

[paoe60]

Tell me please. Why do I receive this error: Error: "An API access token is required to use Mapbox GL. See https://www.mapbox.com/api-documentation/#access-tokens-and-token-scopes"
Any other token doesn't work either

Example: https://stackblitz.com/edit/react-ts-fe73xz

[mklopets]

Do you only get this on stackblitz or also in your local dev environment? It seems to me that it could somehow have to do with the module resolution. The code itself is correct...

[paoe60]

@mklopets in local dev env too =(

[mklopets]

you have previously opened issues in this repo – you had code that was at least somewhat working back then – do you get the same issue now when you run that code & setup?

[paoe60]

My code worked well on version 4.6.1. But it stopped on 4.8.2.

Example: https://stackblitz.com/edit/react-ts-6xwwgg (in local env on version 4.6.1 everything works well)

[psmaAaron]

I'm getting the same problem.

Just trying to get a map to render after react-map-gl didn't fulfill our needs.

[mreeder]

I also run into this bug on Meteor stack. Both local dev and in Galaxy. Works fine up to and including version 4.6.2. Version 4.7.0-4.8.2, I get this error. Happy to help troubleshoot as best I can.

[danactive]

I'm getting the same issue going from react-mapbox-gl@4.6.2 to react-mapbox-gl@4.7.0 without changing mapbox-gl@1.1.1 version.

My working code is here before the upgrade.

PS: I tried to debug this further by changing my package.json to link directly to your git commits but due to your TypeScript configuration the lib folder does not exist in the repo which blocks me

[dsmalicsi]

I am experiencing the same problem with the latest version. I downgraded and it works perfectly.

Uncaught (in promise) Error: An API access token is required to use Mapbox GL. See https://www.mapbox.com/api-documentation/#access-tokens-and-token-scopes
    at N._makeAPIURL (modules.js:1140)
    at N.normalizeStyleURL (modules.js:1140)
    at i.loadURL (modules.js:1144)
    at r._updateStyle (modules.js:1144)
    at r.setStyle (modules.js:1144)
    at new r (modules.js:1144)
    at ReactMapboxGl.ReactMapboxFactory.ReactMapboxGl.componentDidMount (modules.js:124357)
    at commitLifeCycles (modules.js:26940)
    at commitLayoutEffects (modules.js:29927)
    at HTMLUnknownElement.callCallback (modules.js:7281)

[wchavarria03]

I am having the same issue and the only thing I did was update the package to the latest version :/
Can we expect a fix soon?

Last working version was 6.2 after that every version is failing

[gajus]

@alex3165 Are you aware of this?

[mattJurz]

Same issue here. Did anyone manage to solve this problem?

[JasonZheng20]

Same issue still, keep me posted if there was a fix! Downgrading seemed to work for now.

[ndreas]

I got bitten by this as well, solved it for mapbox-gl 1.13.0 and react-mapbox-gl 5.1.1 by adding this to my app:

(MapboxGL as any).accessToken = '<accessToken>';

The lib does the same, but this seems to work when the lib doesn't.

[yo-bur]

Confirming @ndreas's fix works for mapbox-gl v1.13.0 and react-mapbox-gl v5.1.1.
Thanks

[mikevb3]

im getting the same error using Vite as bundler.

also i had to add this to my vite config:

export default defineConfig({ plugins: [reactRefresh()], resolve: { alias: [ { find: /^react-mapbox-gl/, replacement: "react-mapbox-gl/lib", }, ], }, define: { global: "window", // fix for packages that support both node and browser }, });

EDIT: without that fix, vite won't run, and this error appears, node_modules/react-mapbox-gl/lib-esm/map.js:59:25: error: Cannot assign to import "accessToken" 59 │ MapboxGl.accessToken = accessToken;

[vfonic]

I've finally managed to fix this issue. I'm also using Vite (Rollup) bundler.

This is what worked for me:

// somewhere in your app code before using mapbox:
import * as mapboxgl from 'mapbox-gl';
(mapboxgl as any).accessToken = mapboxAccessToken;

// vite.config.js
export default defineConfig({
  // ...
  resolve: {
    alias: [
      // ...
      {
        find: /^react-mapbox-gl/,
        replacement: 'react-mapbox-gl/lib',
      },
    ],
  },
});

mapbox-gl 1.13.1
react-mapbox-gl 5.1.1

[JonasGruenwald]

Unfortunately, this didn't work for me with vite.js on those versions or the latest ones, however I was able to set the token like this:

import * as mapboxgl from 'mapbox-gl';
//@ts-ignore
Object.getOwnPropertyDescriptor(mapboxgl, "accessToken").set(`${import.meta.env.VITE_MAPBOX_TOKEN}`);

[brianvandenakker]

It looks like versions earlier that 7.0 used: mapboxApiAccessToken=YOUR_ACCESS_TOKEN. to set the API key.

v7.0 uses: mapboxAccessToken=YOUR_ACCESS_TOKEN.
As described here[https://github.com/visgl/react-map-gl/blob/29aa2098febf1e6b8bbfd2caecb3745b3d4d82a9/docs/upgrade-guide.md]

That change fixed it for me.

[JonasGruenwald]

@brianvandenakker I am a bit confused, you're linking to react-map-gl, which I thought was an entirely different library than react-mapbox-gl (this repository), of which the latest version is 5.1.1 ?

[AsaoluElijah]

Thanks, @brianvandenakker your fix worked very well for me!

[NayoBaez]

@brianvandenakker Thanks a lot, the documentation you shared helped me fix it.