t2 is undefined (Svelte 5 + mapbox draw)

[Libbum]

👋 I'm hitting a real curve ball upgrading to Svelte 5. This code is working in essentially the same component, but not in this one! I've stripped out as much as possible, but cannot figure out where I'm spawning this error.

  // More imports
  import MapboxDraw from "@mapbox/mapbox-gl-draw";
  import "@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css";
  import type { Map } from "maplibre-gl";
  import {
    AttributionControl,
    FullscreenControl,
    MapLibre,
    Marker,
    NavigationControl,
    ScaleControl,
  } from "svelte-maplibre";
  import "svelte-maplibre/draw-plugin.css";
  import { landscapeElementStyles } from "./landscape-elements";

  let { boundary } = $props();

  let { zoom, center, maxBounds, bounds } = $derived(getMapViewForGeometry(boundary));

  let map: Map | undefined = $state();
  let draw: MapboxDraw | undefined = $state();
  let loaded: boolean = $state(false);

  function createMapboxDraw() {
    let draw = new MapboxDraw({
      displayControlsDefault: false,
      controls: {
        polygon: true,
        trash: true,
      },
      userProperties: true,
      styles: landscapeElementStyles,
    });
    const origOnAdd = draw.onAdd.bind(draw);
    // MapboxDraw assumes that the `mapboxgl-ctrl-group` and `mapboxgl-ctrl` CSS classes exist,
    // but Maplibre uses different names, so add them to the control element here.
    draw.onAdd = (map: Map) => {
      let el = origOnAdd(map);
      el.classList.add("maplibregl-ctrl-group");
      el.classList.add("maplibregl-ctrl");
      return el;
    };
    return draw;
  }

  $effect(() => {
    if (map && !draw && loaded) {
      initMapView(map, { bounds, center, maxBounds });

// Can turn on or off
           map.flyTo({
            center,
           duration: 2000,
        });

      draw = createMapboxDraw();

      console.log("draw", draw); // This is defined and working

      map.addControl(draw, "top-left");
      if (boundary.type !== "Point") {
        draw.add(boundary); // Drop this and we get no error, but its the entire point of this component.
      }

      // These can be turned off and the issue remains
      map.resize();
      map.setCenter(center);

      console.log("out of init");  // We get here.
    }
  });
</script>

<div class="h-full flex flex-col">
  <MapLibre
    bind:map
    bind:loaded
    {center}
    {maxBounds}
    {zoom}
    class="h-full mt-4 mx-0 rounded-xl w-100"
    style={`https://api.maptiler.com/maps/satellite/style.json?key=${PUBLIC_MAP_TILER_KEY}`}>
    <!--  ... -->
  </MapLibre>
</div>

The error I get is after load, the map loads but the drawn object does not show. In its place we get a console error:

I've not been able to track down what t2 is representing. The stack is here:

Object { message: "t2 is undefined", stack: "" }
MapLibre.svelte:234:14
    handleError MapLibre.svelte:234
    fire evented.ts:128
    fire evented.ts:143
    fire evented.ts:143
    fire evented.ts:143
    _loadTile source_cache.ts:174
    o2 tslib.es6.js:119
    (Async: promise callback)
    l2 tslib.es6.js:120
    e tslib.es6.js:121
    e tslib.es6.js:117
    _loadTile source_cache.ts:167
    _addTile source_cache.ts:858
    _updateRetainedTiles source_cache.ts:702
    update source_cache.ts:658
    _updateSources style.ts:1589
    _render map.ts:3139
    triggerRepaint map.ts:3287
    (Async: promise callback)
    triggerRepaint map.ts:3284
    _update map.ts:3063
    Map map.ts:627
    fire evented.ts:128
    _fireMoveEvents camera.ts:1176
    flyTo camera.ts:1410
    _renderFrameCallback camera.ts:1474
    run task_queue.ts:50
    _render map.ts:3102
    triggerRepaint map.ts:3287
    (Async: promise callback)
    triggerRepaint map.ts:3284
    _update map.ts:3063
    Map map.ts:627
    fire evented.ts:128
    _fireMoveEvents camera.ts:1176
    flyTo camera.ts:1410
    _renderFrameCallback camera.ts:1474
    run task_queue.ts:50
    _render map.ts:3102
    triggerRepaint map.ts:3287
    (Async: promise callback)
    triggerRepaint map.ts:3284
    _update map.ts:3063
    Map map.ts:627
    fire evented.ts:128
    _fireMoveEvents camera.ts:1176
    flyTo camera.ts:1410
    _renderFrameCallback camera.ts:1474
    run task_queue.ts:50
    _render map.ts:3102
    triggerRepaint map.ts:3287

Versions:
"@mapbox/mapbox-gl-draw": "^1.5.0",
"maplibre-gl": "^4.7.1",
"svelte-maplibre": "1.0.0-next.7"

Where it works:

Same setup, after map.addControl(draw, "top-left"); we do:

 Object.values(landscapeElements).forEach((element) => {
        drawElement(element);
 }

Where drawElement is:

function drawElement(element, isChanged: boolean = false) {
    console.log("drawing element", element);
    const e = draw.add(element);
    const category = element.properties.category;
    const color = category ? categories[category].color : "#3bb2d0";
    draw?.setFeatureProperty(e[0], "color", color);
    draw?.setFeatureProperty(e[0], "isChanged", isChanged);
  }

In other words the same.

The only obvious differences are things I don't expect should matter.

• Broken one is a geometry not a feature (can modify it to be a feature it also fails).
• Broken one is just one value, not a list.

Any ideas where I can go to from here to identify the issue?

[dimfeld]

I would guess that t2 is probably a minified variable name inside the draw plugin, but hard to tell. Could you give me a sample boundary object that causes the problem? I tried with a simple Polygon feature but couldn't see the error, though my example isn't exactly the same since I had to remove the functions that aren't shown here and landscapeElementStyles

[Libbum]

Thanks Daniel. I kinda posted this straight before heading out for a break, so will come back to this in the new year if I can't track down t2 in the draw plugin as you've suggested. Enjoy the holiday period if you're taking some time away!