title: Mapbox gl js Uncaught ReferenceError: require is not defined
body: <p>So I installed mapbox gl js, webpack, and browserify which Mapbox gl js requires on mac osx.
  However, I get Uncaught SyntaxError: Cannot use import statement outside a module error when I try to run the code on localhost. </p>
  
  <p>All the modules are installed in Users/jbk/node-modules directory, and html file is in document folder. </p>
  
  <pre><code>&lt;html&gt;
  
  &lt;head&gt;
      &lt;link href='https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css' rel='stylesheet' /&gt;
  &lt;/head&gt;
  
  
  &lt;body&gt;
  &lt;div id='map' style='width: 400px; height: 300px;'&gt;&lt;/div&gt;
  &lt;script&gt;
  
  
      var mapboxgl = require('mapbox-gl/dist/mapbox-gl.js');
  
      mapboxgl.accessToken = 'pk.eyIjoic252cGxheWVyIiwiYSI6ImVmcG51V28ifQ.Dfj_Uwi6FXQu4AgmBaAESw';
      var map = new mapboxgl.Map({
          container: 'map',
          style: 'mapbox://styles/mapbox/streets-v11'
      });
  &lt;/script&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>