title: How to import non-module(!) JavaScript into Polymer 3.0
body: <p>Polymer 3 uses import to load external Javascript. For example</p>
  
  <pre><code>import {GoogleCharts} from 'google-charts';
  </code></pre>
  
  <p>However, it seems for this to work, the external library should use exports.</p>
  
  <p>I am trying to use mapbox-gl.js library. This library, installed with:</p>
  
  <pre><code>npm install mapbox-gl
  </code></pre>
  
  <p>does not seem to export anything.</p>
  
  <p>In HTML5, you can use mapbox-gl as follows:</p>
  
  <pre><code>&lt;script src="node_modules/mapbox-gl/dist/mapbox-gl.js"&gt;&lt;/script&gt;
  &lt;link href="node_modules/mapbox-gl/dist/mapbox-gl.css" rel="stylesheet" /&gt;
  &lt;script&gt;
     const options = {...}
     const map = new mapboxgl.Map(options);
  &lt;/script&gt;
  </code></pre>
  
  <p>I tried to use 'import' to load mapbox-gl:</p>
  
  <pre><code>import {mapboxgl} from './node_modules/mapbox-gl/dist/mapbox-gl.js';
  import mapboxgl from './node_modules/mapbox-gl/dist/mapbox-gl.js';
  </code></pre>
  
  <p>This doesn't work: </p>
  
  <pre><code>Uncaught SyntaxError: The requested module './node_modules/mapbox-gl/dist/mapbox-gl.js' does not provide an export named 'mapboxgl'
  Uncaught SyntaxError: The requested module './node_modules/mapbox-gl/dist/mapbox-gl.js' does not provide an export named 'default'
  </code></pre>
  
  <p>So, then I tried to add the script and css to document.head from inside the <strong>module</strong> javascript (<code>&lt;script type="module"&gt;..&lt;/script&gt;</code>):</p>
  
  <pre><code>// load external mapbox-gl.js script
  const mapboxgljs = document.createElement('script');
  mapboxgljs.setAttribute('src', 'node_modules/mapbox-gl/dist/mapbox-gl.js');
  document.head.appendChild(mapboxgljs);
  // load external mapbox-gl.css 
  const mapboxcss = document.createElement('link');
  mapboxcss.setAttribute('href', 'node_modules/mapbox-gl/dist/mapbox-gl.css');
  mapboxcss.setAttribute('rel', 'stylesheet');
  document.head.appendChild(mapboxcss);
  </code></pre>
  
  <p>This does not seem to work either. If I try to use mapbox as follows:</p>
  
  <pre><code>const map = new mapboxgl.Map(options)
  </code></pre>
  
  <p>I am getting:</p>
  
  <pre><code>Uncaught ReferenceError: mapboxgl is not defined
  </code></pre>
  
  <p><strong>Edit:</strong></p>
  
  <p>Commenters @Salketer and @barbsan showed correct import syntax for this kind of library:</p>
  
  <pre><code>import 'node_modules/mapbox-gl/dist/mapbox-gl.js';
  </code></pre>
  
  <p>or</p>
  
  <pre><code>import * as mapboxgl from 'node_modules/mapbox-gl/dist/mapbox-gl.js';
  </code></pre>
  
  <p>Both now result in the following error message:</p>
  
  <pre><code>Uncaught TypeError: Cannot set property 'mapboxgl' of undefined
  </code></pre>
  
  <p>This means the mapbox-gl library now gets loaded and interpreted. However, the mapbox-gl code contains the line:</p>
  
  <pre><code>window.mapboxgl = something;
  </code></pre>
  
  <p>ES6-module scope does not have access to the browser 'window' object, so the code fails. See also <a href="https://stackoverflow.com/questions/32961255/is-there-an-es6-module-scope-equivalent-to-window">Is there an es6 module-scope equivalent to `window`?</a>.</p>
  
  <p>For now, I am adding the HTML5 &lt;script&gt;&lt;/script&gt; and &lt;link /&gt; tags (see above) to the index.html of my project. This works, but the idea of components and modules is to load dependencies from inside those components and modules?</p>