Tangram demo in master branch is not working on Windows

[siloam]

TANGRAM VERSION: 0.21

ENVIRONMENT:

Chrome & Firefox

TO REPRODUCE THE ISSUE, FOLLOW THESE STEPS:

run python -m http.server 8000

RESULTS:

tangram.debug.mjs:1 Failed to load module script: The server responded with a non-JavaScript MIME type of "application/octet-stream". Strict MIME type checking is enforced for module scripts per HTML spec. main.js:22 Uncaught ReferenceError: Tangram is not defined at main.js:22 at main.js:179 (anonymous) @ main.js:22 (anonymous) @ main.js:179 url.js:29 Uncaught TypeError: map.on is not a function at url.js:29 at url.js:36 (anonymous) @ url.js:29 (anonymous) @ url.js:36 key.js:4 Uncaught ReferenceError: layer is not defined at key.js:4 (anonymous) @ key.js:4 load (async) (anonymous) @ key.js:2 (anonymous) @ key.js:29 leaflet-geocoder-mapzen.js:830 Uncaught TypeError: this._map.invalidateSize is not a function at e.setFullWidth (leaflet-geocoder-mapzen.js:830) at expand (leaflet-geocoder-mapzen.js:809) at e.onAdd (leaflet-geocoder-mapzen.js:885) at e.addTo (leaflet.js:5) at gui.js:13

With nomodule version only:

main.js:22 Uncaught ReferenceError: Tangram is not defined at main.js:22 at main.js:179 (anonymous) @ main.js:22 (anonymous) @ main.js:179 url.js:29 Uncaught TypeError: map.on is not a function at url.js:29 at url.js:36 (anonymous) @ url.js:29 (anonymous) @ url.js:36 key.js:4 Uncaught ReferenceError: layer is not defined at key.js:4 (anonymous) @ key.js:4 load (async) (anonymous) @ key.js:2 (anonymous) @ key.js:29 leaflet-geocoder-mapzen.js:830 Uncaught TypeError: this._map.invalidateSize is not a function at e.setFullWidth (leaflet-geocoder-mapzen.js:830) at expand (leaflet-geocoder-mapzen.js:809) at e.onAdd (leaflet-geocoder-mapzen.js:885) at e.addTo (leaflet.js:5) at gui.js:13

EXPECTED RESULT:

It should work.

[bcamper]

Hi - I don't currently have python 2 installed, so I can't directly test your configuration. The same works for me (with module and nomodule versions) with python 3 on MacOS (python3 -m http.server 8000). That said, I have heard of MIME type issues with .mjs files on some servers (see https://bugs.python.org/issue31715), so that's a plausible error. How are you testing the .js version? You should replace this:

    <script type="module" src="dist/tangram.debug.mjs"></script>
    <script nomodule src="dist/tangram.debug.js"></script>

with this single line:

<script src="dist/tangram.debug.js"></script>

The error just seems to indicate Tangram didn't load -- what does the network tab say?

Finally, while any vanilla web server we don't use the python server for development anymore. Instead, we have switched to either the rollup-based server plugin configured in package.json, or when testing standalone, using node http-server (https://github.com/http-party/http-server).

[siloam]

I have tested tangram-master demo once again and the issue actually is not Tangram related. After clearing browser cache and reloading the content I saw this: Loading module from “http://localhost:8000/dist/tangram.debug.mjs” was blocked because of a disallowed MIME type (“application/octet-stream”).

After commenting the line: <script type="module" src="dist/tangram.debug.mjs"> and enforcing to use a version for older browsers: main.js:22 Uncaught ReferenceError: Tangram is not defined at main.js:22 at main.js:179 (anonymous) @ main.js:22 (anonymous) @ main.js:179 url.js:29 Uncaught TypeError: map.on is not a function at url.js:29 at url.js:36 (anonymous) @ url.js:29 (anonymous) @ url.js:36 key.js:4 Uncaught ReferenceError: layer is not defined at key.js:4 (anonymous) @ key.js:4 load (async) (anonymous) @ key.js:2 (anonymous) @ key.js:29 leaflet-geocoder-mapzen.js:830 Uncaught TypeError: this._map.invalidateSize is not a function at e.setFullWidth (leaflet-geocoder-mapzen.js:830) at expand (leaflet-geocoder-mapzen.js:809) at e.onAdd (leaflet-geocoder-mapzen.js:885) at e.addTo (leaflet.js:5) at gui.js:13

So I have just moved scripts to the and of file (before </html> tag) and treated them like normal scripts (without "defer" keyword): <script src="dist/tangram.min.js"></script><script src="demos/main.js"></script> It works under WIndows. 👍

I've installed Linux locally and was able to run the demo out of the box. No network and import errors. Weird.

[bcamper]

Believe this was resolved via feedback from @meetar in gitter. (If not please feel free to reopen.)