SyntaxError: expected expression, got keyword 'import'

[nrenner]

The new import() call is causing a parse error on load in older browsers:

SyntaxError: expected expression, got keyword 'import'  brouter-web.js:55:7723

I expected the function call to fail only when called (i.e. when a mvn layer is added), but it seems import is a reserved keyword even in older browsers that don't support modules or dynamic imports yet.

Reported browser versions in use:

• Firefox 52.9.0 ESR [1]
• Firefox 56 [2]
• Firefox 68 via Seamonkey [3]

The reason given is that those still support old plugins, which don't have an adequate Web Extensions replacement.

[nrenner]

Adding Firefox 56 to browserslist, as this is the last one supporting old-style plugins before Web Extensions only.

Babel seems to only rewrite import() to require() and relies on Webpack or AMD/CommonJS loaders to handle those (babel#9551), which leads to a ReferenceError: require is not defined in our case. So I disabled that with by the caller: { supportsDynamicImport: true } option (9852aaf).

The dynamic import polyfills I found either rely on module support (e.g. dynamic-import-polyfill) or provide complete module support we don't need (e.g. shimport). So I derived bits from those and others for our own simple polyfill that evaluates the import call inside a new Function('')() to avoid the parsing error and falls back to script tag injection in old browsers.

MapLibre needs an AbortController polyfill in older browsers (maplibre-gl-js#783) that core-js doesn't provide yet (core-js#445). Unfortunately that only works for the hillshading (DEM) layer, not for the Mapillary (vector tile) layer, where Web Workers fail, and I don't know how to polyfill them in an easy way.