I am facing an issue while adding popup over marker in mapbox

Once the view render i get this error and popup is not added -

mapbox-gl.js:176 TypeError: (intermediate value).setLngLat(...).setPopup is not a function(…)

Does anybody face this or know something to fix this?

Code is this to set popup over marker, I've followed this link http://ift.tt/2pHmgme

  let tpl;
  if (vendor.get('cachedAverageRating')) {
    tpl = `
    <div class='ui map-marker'>
      <div class="photo">
        <img src="${vendor.getAvatar() || FIXTURE_IMAGE}"></div>
      <div class="ui violet counter">${vendor.get('cachedAverageRating')}</div>
    </div>
  `;
  } else {
    tpl = `
    <div class='ui map-marker'>
      <div class="photo">
        <img src="${vendor.getAvatar() || FIXTURE_IMAGE}">
      </div>
    </div>
  `;
  }

  let markerContainer = document.createElement('div');
  markerContainer.innerHTML = tpl;

  // create the popup
  let markerPopup = new MapboxGL.Popup({offset: 25})
    .setHTML(`<div>Name : ${vendor.get('name')}, Address : ${vendor.get('address')}, Rating : ${vendor.get('cachedAverageRating')}</div>`);

  // create the marker
  new MapboxGL.Marker(markerContainer, {offset:[-25, -25]})
    .setLngLat([get(vendor, 'lon'), get(vendor, 'lat')])
    .setPopup(markerPopup) // sets a popup on this marker
    .addTo(map);