Uncaught (in promise) TypeError: Cannot set properties of undefined (setting 'accessToken')

[zachsa999]

I have an error that triggers every page reload. I have the most simplified version of the software set up

<script>
	import { PUBLIC_MAPBOX_TOKEN } from '$env/static/public';
	import { Map, Geocoder, Marker, controls } from '@beyonk/svelte-mapbox';

	let zoom = 11.15;
</script>

<div class="map-wrap">
	<Map accessToken={PUBLIC_MAPBOX_TOKEN} bind:zoom />
</div>

<style>
	.map-wrap {
		width: 100%;
		height: 600px;
	}
</style>

When I comment out the component it works, as in, the page loads.

ncaught (in promise) TypeError: Cannot set properties of undefined (setting 'accessToken')
    at init2 (map-action.js:31:19)
    at map-action.js:19:14
    at load (asset-loader.js:7:9)
    at action (map-action.js:18:3)
    at Object.mount [as m] (Map.svelte:16:6)
    at mount_component (index.mjs:2097:26)
    at mount (+page.svelte:11:6)
    at targetCmp.$$.fragment.m (svelte-hooks.js?v=1008514d:291:24)
    at mount_component (index.mjs:2097:26)
    at Object.update [as p] (root.svelte:48:45)

this is the browser error when the page loads

    proxy.js?v=1008514d:15 [HMR][Svelte] Unrecoverable HMR error in <Root>: next update will trigger a full reload
logError @ proxy.js?v=1008514d:15
Proxy<Root> @ proxy.js?v=1008514d:380
initialize @ client.js?v=1008514d:284
_hydrate @ client.js?v=1008514d:1793
await in _hydrate (async)
start @ start.js:22
(anonymous) @ new:7034
Promise.then (async)
(anonymous) @ new:7033

map-action.js:31 Uncaught (in promise) TypeError: Cannot set properties of undefined (setting 'accessToken')
    at init2 (map-action.js:31:19)
    at map-action.js:19:14
    at load (asset-loader.js:7:9)
    at action (map-action.js:18:3)
    at Object.mount [as m] (Map.svelte:16:6)
    at mount_component (index.mjs:2097:26)
    at mount (+page.svelte:11:6)
    at targetCmp.$$.fragment.m (svelte-hooks.js?v=1008514d:291:24)
    at mount_component (index.mjs:2097:26)
    at Object.mount [as m] (root.svelte:48:86)

here is the error when i refresh the page and the map works. Does anyone have a clue what might be going on here?

[zachsa999]

It seems like the object that should have the accessToken property is undefined at the time the init2 function is called. The error is likely due to the Mapbox GL instance not being initialized before the init2 function attempts to set the accessToken.

Has anyone using this software run into this issue?

[zachsa999]

Linking issue #84 (comment) in here
Seems related

[brendanmatkin]

@zachsa999 do you have the same error if you use dynamic public env? (https://kit.svelte.dev/docs/modules#$env-dynamic-public)

e.g.

<script>
import { env } from "$env/dynamic/public";
// etc ... 
</script>

<Map accessToken={env.PUBLIC_MAPBOX_KEY} />
<!-- etc... --> 

EDIT: Oh sorry misread that - I thought your environment variable was undefined!

[brendanmatkin]

I remember using mapbox with nuxt that it does not play well with SSR (webgl in general I think) - I wonder if yours is trying to render on the server first for some reason? I wonder if you try disabling SSR? (export const ssr = false;)

Alternatively it looks like there was a similar issue in the way back about installing as a dependency when you should install as a dev dependency (changes the way vite bundles it I think): #10

[brendanmatkin]

@zachsa999 what was the solution?