Error: MapboxGL: Access token not found when initializing map in production

Answer the question first

What to do: The most common, production‑ready pattern is to inject the token at build time using a bundler plugin (Webpack DefinePlugin, Vite import.meta.env, or similar). The token is replaced with a literal string in the final bundle, and you protect it by adding the production domain to the token’s URL whitelist in the Mapbox dashboard. If you prefer not to bake the token into the bundle, fetch it from a protected backend endpoint that returns a signed JSON Web Token (JWT) or a simple string, then assign it to mapboxgl.accessToken before any new mapboxgl.Map() call.

Why this works

• Build‑time replacement guarantees mapboxgl.accessToken is defined synchronously, so the map constructor never throws.
• Domain whitelisting mitigates the risk of a leaked token being used from an unauthorized site.
• Runtime fetching keeps the token out of the source tree, but it introduces an async dependency that must be awaited before map creation.

Step‑by‑step for build‑time injection

1. Store the token in an environment variable that the bundler can read. In a typical Vite project you might add VITE_MAPBOX_TOKEN=pk.abc123 to .env.production.
2. In your code, assign the token once, before any map is created:

   import { defineConfig } from 'vite';
   
   // In your main JS file
   mapboxgl.accessToken = import.meta.env.VITE_MAPBOX_TOKEN;
   

3. Configure the bundler to replace import.meta.env.VITE_MAPBOX_TOKEN with the literal value. Vite does this automatically; Webpack users add a DefinePlugin entry:

   new webpack.DefinePlugin({
     'process.env.MAPBOX_TOKEN': JSON.stringify(process.env.MAPBOX_TOKEN)
   });
   

4. Verify the token is baked into the bundle. Open the production bundle.js and search for the token string. It should appear exactly as it was set in the environment variable.
5. In the Mapbox dashboard, add your production domain (e.g., https://example.com) to the token’s URL whitelist. This ensures that even if someone views the bundle, the token will only work from the authorized domain.

Runtime fetch alternative

1. Expose a secure endpoint on your server that returns the token. Protect it with authentication or a short‑lived signed JWT.
2. In the client, fetch the token before initializing the map:

   async function initMap() {
     const resp = await fetch('/config/mapbox-token', { credentials: 'include' });
     const { token } = await resp.json();
     mapboxgl.accessToken = token;
     new mapboxgl.Map({ container: 'map', style: 'mapbox://styles/mapbox/streets-v11' });
   }
   initMap();
   

3. Because this is asynchronous, you can show a loading spinner until the token arrives.
4. Verify the token is returned by inspecting the network tab or by logging console.log(token) before the map constructor call.

How to verify without initializing the map

• Console check: In the browser dev tools, type console.log(mapboxgl.accessToken) before any map code runs. It should output the token string.
• Bundle inspection: Open the minified bundle in a text editor or via the dev tools Sources panel and search for the token string.
• Network request: If using runtime fetch, confirm the endpoint returns the token by inspecting the response body in the Network tab.
• Domain whitelist: Log into the Mapbox dashboard and ensure the production domain is listed under the token’s URL whitelist.

What to ask next

Do you currently see the token string in your built bundle, or is process.env.MAPBOX_TOKEN being replaced with undefined? That detail will determine whether you need to adjust your bundler configuration or switch to a runtime fetch approach.