Mapbox-gl-js: kdbush 3.0.0 breaks IE11

[sroettering]

mapbox-gl-js version:
0.53.1
browser:
Internet Explorer 11

Steps to Trigger Behavior

Link to Demonstration

Expected Behavior

No syntax error happening.

Actual Behavior

IE11 complains about a syntax error for defaultGetX() being an ES6 lambda.

[mourner]

It’s an issue with your app setup, not with GL JS. The official bundle of the latter is fully transpiled.

[luastoned]

I am getting the same exact error, so it is very likely not an "app setup" problem.

[mourner]

@luastoned please use the official Mapbox GL distribution provided by the package. Hitting this error is only possible if you bundle Mapbox GL yourself, which we don't recommend. Same for Supercluster (which uses KDBush) — it's transpiled in the distribution. Or alternatively, if you go the custom bundling route, you could add transpilation on your end.

[gghildyal]

The way I am getting around this for now (using Angular 8) is to use custom webpack config and using babel to transpile supercluster and kdbush.

To use a custom webpack configuration in Angular 8, See https://www.npmjs.com/package/@angular-builders/custom-webpack documentation. My changes were

• install babel and custom-webpack (Update package.json as below)

"devDependencies": {
   "@babel/core": "^7.5.5",
   "@babel/preset-env": "^7.5.5",
   "babel-loader": "^8.0.6",
   "@angular-devkit/build-angular": "~0.801.0",
   "@angular-builders/custom-webpack": "^8.1.0",
   "@angular-builders/dev-server": "^7.3.1"
   ...
   ...
}

• In angular.json, update build > builder to "@angular-builders/custom-webpack:browser" and add customWebpackConfig (as mentioned in the link above). Note that custom-webpack has 4 different targets, browser, dev-server, karma and server. I updated karma options as well, but omitting it here for brevity.

      "architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
             ...
             "customWebpackConfig": {
               "path": "./custom-webpack.config.js",
               "mergeStrategies": { "module.rules": "prepend" },
               "replaceDuplicatePlugins": true
             }
         }
      ...
      "serve": {
          "builder": "@angular-builders/custom-webpack:dev-server",
     .....

And finally the custom-webpack.config.js looks like

const path = require('path');
module.exports = {
  module: {
    rules: [
     {
        test: /\.js$/,
    include: [path.join(__dirname, 'node_modules/kdbush'),
               path.join(__dirname, 'node_modules/supercluster') ],
    use: {
      loader: "babel-loader",
      options: {
        presets: [
          [
            "@babel/preset-env",
            {
                "targets": "> 0.25%, not dead"
            }
           ]
        ]
      }
       }
}]}
};

Hope the above helps. This would transpile supercluster and kdbush.

[sroettering]

I didn't want to configure webpack by hand, so instead I configured typescript to transpile supercluster and kdbush.

{
  "compilerOptions": {
    "allowJs": true
  },
  "files": [
    "node_modules/kdbush/src/index.js",
    "node_modules/supercluster/index.js"
  ]
}

These are the changes I made to the global tsconfig.json file.

I still don't know why we would have to do this, though.