mapbox gl js - Uncaught TypeError: Cannot read property 'classList' of null
<p>I am creating a map with MapBox GL JS. I created one map on my index.html page and that works fine but now I am trying to create another map on a separate page and when referencing the div where the map should go, I am getting an error:</p>

<blockquote>
  <p>Uncaught TypeError: Cannot read property 'classList' of null.</p>
</blockquote>

<p>I am not sure why this is happening since I created the element in my html and my javascript is identical to the javascript that successfully creates the first map on the index.html page (but on a different div). I am doing this in Node.js and bundle with webpack into a main.min.js file, which I reference on both index.html and the second html page. </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>"use strict"
//here is the MapBox GL JS code at the point the error references in the console
 //_setupContainer: function() {
   //     var container = this._container;
     //   container.classList.add('mapboxgl-map');

// here is my mapbox new map creation 

const ACCESSTOKEN = &lt; my access token &gt;;
mapboxgl.accessToken = ACCESSTOKEN;
const map2 = new mapboxgl.Map({
  container: 'map2', 
  style: 'mapbox://styles/mapbox/dark-v9',
  center: [0,0], 
  zoom: 8.5, 
  pitch: 45, 
  bearing: 27,
  hash: false
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
 &lt;head&gt;
   &lt;meta charset="UTF-8"&gt;
   &lt;title&gt;Mapbox example&lt;/title&gt;
   &lt;meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /&gt;  
   &lt;link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.18.0/mapbox-gl.css' rel='stylesheet' /&gt;
   &lt;link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v1.1.0/mapbox-gl-geocoder.css' type='text/css' /&gt;  
   &lt;link rel="stylesheet" type="text/css" href="css/styles.css"&gt;
 &lt;/head&gt;
  &lt;body&gt;
    &lt;div id="container"&gt;
      &lt;div id="map2"&gt;&lt;/div&gt; 
    &lt;/div&gt;
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.5/leaflet.js"&gt;    &lt;/script&gt;
&lt;script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.18.0/mapbox-gl.js'&gt;&lt;/script&gt;
&lt;script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v1.1.0/mapbox-gl-geocoder.js'&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="./js/main.min.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;
      </code></pre>
</div>
</div>
</p>