Getting error this._mapboxgl.Marker is not a constructor when using geocoder

Question

I've got a fairly basic setup testing the Geocode search function, but I receive this error any time a search is completed.

I've checked my version numbers and as far as I can tell they are up to date. I've unbundled them for testing different versions.

https://api.mapbox.com/mapbox-gl-js/v1.2.0/mapbox-gl.js

https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.4.1/mapbox-gl-geocoder.min.js

import Mapbox from 'mapbox-gl';
import Geocoder from 'mapbox-gl-geocoder';

Mapbox.accessToken = 'pk.mytokenishere';
  let map = new Mapbox.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/streets-v11',
  center: {lon: -113.8116, lat: 52.26682},
  zoom: 4
  });

  var geocoder = new Geocoder({
    accessToken: Mapbox.accessToken,
    mapboxgl: map,
    marker: {
      color: 'orange'
      },
    }); 
  document.getElementById('geocoder').appendChild(geocoder.onAdd(map));

Instead of an orange marker, I get this._mapboxgl.Marker is not a constructor

Answer 1

I was able to figure it out on my own. The geocoder is expecting the Mapbox class itself and not an instance. The above code should be changed to:

var geocoder = new Geocoder({
  accessToken: Mapbox.accessToken,
  mapboxgl: Mapbox,
  marker: {
    color: 'orange'
    },
});