Setting $session in Sveltekit breaks the map

[wfendler]

If I have a page displaying the map and add the following code it breaks.

import { session } from '$app/stores';
import { browser } from '$app/env';

if (browser) {
  // try to set the $session to anything
  $session = 'asdf'
}

The error I get in the console is:

Unhandled Promise Rejection: TypeError: undefined is not an object (evaluating 'window.mapboxgl.accessToken = options.accessToken')
init — map-action.js:31
(anonymous function) — map-action.js:19
load — asset-loader.js:7
action — map-action.js:18
mount — Map.svelte:15
(anonymous function) — svelte-hooks.js:197
mount_component — index.mjs:1727
mount — index.svelte:28
(anonymous function) — svelte-hooks.js:197
mount_component — index.mjs:1727
update — root.svelte:38
update — root.svelte:37
update_slot_base — index.mjs:98
update — layout.svelte:40
update — index.mjs:1057
flush — index.mjs:1025
promiseReactionJob
B — util.js:516

[wfendler]

Updated svelte and sveltekit and it seems to have resolved the issue.

[wfendler]

Sorry, closed too soon. The error doesn't show up right away. It only happens after a few refreshes/hot-reloads.

package.json

{
  "name": "my-app",
  "version": "0.0.1",
  "scripts": {
    "dev": "svelte-kit dev",
    "build": "svelte-kit build",
    "preview": "svelte-kit preview"
  },
  "devDependencies": {
    "@sveltejs/kit": "^1.0.0-next.192",
    "svelte": "^3.44.0"
  },
  "type": "module",
  "dependencies": {
    "@beyonk/svelte-mapbox": "^8.1.4"
  }
}

index.svelte

<script>
  import { Map, Marker } from '@beyonk/svelte-mapbox';
  import { session } from '$app/stores';
  import { browser } from '$app/env';

  if (browser) {
    // setting $session to anything at all seems to cause the error
    $session = 'asdf'
  }

  let mapComponent;

  function onReady() {
    mapComponent.flyTo({ center: [-74.0060152, 40.7127281] });
  }
</script>

<div>
  <h1>Map</h1>
  <div class="wrapper">
    <Map
      accessToken={import.meta.env.VITE_MAPBOX_ACCESS_TOKEN}
      bind:this={mapComponent}
      on:ready={onReady}
    >
      <Marker lat="-74.0060152" lng="40.7127281" label="NYC" />
    </Map>
  </div>
</div>

<style>
  .wrapper {
    height: 500px;
    width: 500px;
    border: 1px solid black;
  }
</style>

[wfendler]

I've tried to put together a minimal recreation here:

https://stackblitz.com/edit/svelte-kit-qdaku8?file=src/routes/index.svelte

[antony]

Thanks for the reproduction. I'll have a look and see if I can find out what the issue is as soon as possible.