Fix parse error for import() in older browsers (#571)

- add import() polyfill that evals in Function() and falls back to script tag injection
- add AbortController polyfill for MapLibre (lazy loaded so can be in bundle, not for Web Workers)
- support Firefox 56, last supporting old plugins before Web Extensions

.eslintrc.json

@@ -5,6 +5,6 @@
         "es2021": true
     },
     "settings": {
-        "polyfills": ["URL", "Promise", "navigator", "Uint8Array", "performance", "location.hostname"]
+        "polyfills": ["URL", "Promise", "navigator", "Uint8Array", "performance", "location.hostname", "document.body"]
     }
 }

js/util/MaplibreGlLazyLoader.js

@@ -1,7 +1,38 @@
-/**
+(function () {
+    // import() uses path relative to calling script, script injection relative to index.html,
+    // so figure out script-relative path without hard-coding it (only as fallback) for the latter
+    // eslint-disable-next-line
+    const baseUrl = document.currentScript?.src.split('/').slice(0, -1).join('/') || window.location.origin + '/dist';
+    const getAbsoluteScriptUrl = (src) => new URL(src, baseUrl + '/').href;
+
+    // simple custom import() polyfill that doesn't need module support and can't load modules
+    // (derived from various sources)
+    function importPolyfill(src) {
+        return new Promise((resolve, reject) => {
+            try {
+                // `import` is a reserved keyword even in old browsers not supporting it,
+                // so it needs to be evaluated at runtime, otherwise causes a parse error on load
+                new Function('return import("' + src + '")')().then(() => resolve());
+            } catch (e) {
+                const url = getAbsoluteScriptUrl(src);
+                var script = document.createElement('script');
+                script.onload = () => {
+                    resolve();
+                };
+                script.onerror = () => {
+                    reject(new Error(`Error importing: "${url}"`));
+                    script.remove();
+                };
+                script.src = url;
+                document.body.appendChild(script);
+            }
+        });
+    }
+
+    /**
      * Only load Maplibre bundles when layer is actually added, using dynamic imports
      */
-BR.MaplibreGlLazyLoader = L.Layer.extend({
+    BR.MaplibreGlLazyLoader = L.Layer.extend({
         initialize: function (options) {
             this.options = options;
         },
@@ -16,7 +47,9 @@ BR.MaplibreGlLazyLoader = L.Layer.extend({
         },
 
         onRemove: function (map) {
+            if (this.glLayer) {
                 this._map.removeLayer(this.glLayer);
+            }
             this.glLayer = null;
             return this;
         },
@@ -39,8 +72,8 @@ BR.MaplibreGlLazyLoader = L.Layer.extend({
         },
 
         _load: async function () {
-        await import('./maplibre-gl.js');
-        await import('./leaflet-maplibre-gl.js');
+            await importPolyfill('./maplibre-gl.js');
+            await importPolyfill('./leaflet-maplibre-gl.js');
 
             this._addGlLayer();
         },
@@ -61,8 +94,9 @@ BR.MaplibreGlLazyLoader = L.Layer.extend({
                 this.glLayer.getContainer().style.zIndex = this.options.zIndex;
             }
         },
-});
+    });
 
-BR.maplibreGlLazyLoader = function (options) {
+    BR.maplibreGlLazyLoader = function (options) {
         return new BR.MaplibreGlLazyLoader(options);
-};
+    };
+})();

package.json

@@ -28,6 +28,7 @@
         "> 0.5%",
         "last 2 versions",
         "Firefox ESR",
+        "Firefox >= 56",
         "not dead",
         "Explorer >= 10",
         "Android >= 4.1",
@@ -44,6 +45,7 @@
         "@maplibre/maplibre-gl-leaflet": "^0.0.17",
         "@turf/turf": "^6.2.0",
         "Leaflet.vector-markers": "nrenner/Leaflet.vector-markers#2ef80c9",
+        "abortcontroller-polyfill": "^1.7.3",
         "async": "~2.6.0",
         "bootbox": "~5.5.2",
         "bootstrap": "4.6.1",
@@ -380,6 +382,11 @@
                 "dist/maplibre-gl.js.map",
                 "dist/maplibre-gl.css"
             ]
+        },
+        "abortcontroller-polyfill": {
+            "main": [
+                "dist/polyfill-patch-fetch.js"
+            ]
         }
     }
 }

yarn.lock

@@ -3418,6 +3418,11 @@ abbrev@1:
   resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
   integrity sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==
 
+abortcontroller-polyfill@^1.7.3:
+  version "1.7.3"
+  resolved "https://registry.yarnpkg.com/abortcontroller-polyfill/-/abortcontroller-polyfill-1.7.3.tgz#1b5b487bd6436b5b764fd52a612509702c3144b5"
+  integrity sha512-zetDJxd89y3X99Kvo4qFx8GKlt6GsvN3UcRZHwU6iFA/0KiOmhkTVhe8oRoTBiTVPZu09x3vCra47+w8Yz1+2Q==
+
 accepts@~1.3.4:
   version "1.3.7"
   resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.7.tgz#531bc726517a3b2b41f850021c6cc15eaab507cd"