Leaflet Markercluster with GeoJson and Leaflet Ajax

Question

Referring to the examples in a previous question: Leaflet MarkerCluster with GeoJson

I am trying to use markercluster with leaflet after the geojson data has been loaded, I can see the data is loading along with the markercluster markers from the console but it looks like the final map.addLayer is failing, the browser just seems to hang when it gets to this point.

I am able to load up and display the map points after the geojson is loaded with geojsonAjax.addTo(map); so this part is working.

the leaflet library and plugins are loaded in the following order:

leaflet.js
leaflet.ajax.min.js
leaflet.markercluster.js



    // Add basemap tiles and attribution.
    var OpenStreetMap_Mapnik = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      maxZoom: 19,
      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    });


    // Create map and set center and zoom.

    var map = L.map('map', {
      scrollWheelZoom: false,
      center: [47.5, 10],
      zoom: 5
    });

    // Add basemap to map.
    map.addLayer(OpenStreetMap_Mapnik);

    var geojsonAjax = new L.GeoJSON.AJAX("/campaign-results/geojson", {
      pointToLayer: function(feature, latlng) {
        return new L.marker(latlng);
      },
    });
    //geojsonAjax.addTo(map);
    //map.addLayer(geojsonAjax);
    //console.log("data loaded:", geojsonAjax);

  var markers = L.markerClusterGroup()


  //geojson ajax listener
  geojsonAjax.on('data:loaded', function () {
    // Add the cluster data after the geojson layer has loaded.
    markers.addLayer(geojsonAjax);
    console.log("add markers:", markers);
    map.addLayer(markers);
  });