Uncaught ReferenceError: mapboxgl is not defined

I am getting below(link) error message in console., I had spend hours try to fix this but won't be able to track this issue. Can someone help me to fix this? error image

I not able to display map on web page code is correct, but don't know what went wrong. It would be great if anyone can explain in details with code. So that i can keep in mind and use for future reference

Here is the code Main Code followed by Connected codes

//Pug Code
doctype html
html
  head 
    block head
      meta(charset='UTF-8')
      meta(name='viewport' content='width=device-width, initial-scale=1.0' value="script-src 'self' api.mapbox.com")
      link(rel='stylesheet' href ='/css/style.css')
      link(rel='shortcut icon' type='image/png' href='/img/favicon.png')
      link(rel='stylesheet' href='https://fonts.googleapis.com/css?family=Lato:300,300i,700')
      title Natours | #{title}

  body
    //HEADER
    include _header

    //CONTENT
    block content 
      h1 This is a placeholder heading

    //FOOTER
    include _footer

    script(src='/js/mapbox.js')

======================================================================================

Js code

/* eslint-disable */
const locations = JSON.parse(document.getElementById("map").dataset.locations);

mapboxgl.accessToken = 'xxxxxx';
var map = new mapboxgl.Map({
    container: 'map',
    style:'mapbox://styles/mapbox/streets-v11',,
});

=================================================================================

//To display the map on  website below code is related to above code(this '==========' is only to show separate code from different file) //

  section.section-map
    #map(data-locations=`${JSON.stringify(tour.locations)}`)

You've forgot to add their library.

 head 
    block head
      meta(charset='UTF-8')
      meta(name='viewport' content='width=device-width, initial-scale=1.0' value="script-src 'self' api.mapbox.com")
      link(rel='stylesheet' href ='/css/style.css')
      link(rel='shortcut icon' type='image/png' href='/img/favicon.png')
      link(rel='stylesheet' href='https://fonts.googleapis.com/css?family=Lato:300,300i,700')
    
      //- add this line
      script(src='https://api.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.js')
    
      title Natours | #{title}