supercluster not defined in IE - Error

[ssujan728]

Hi, we are using the supercluster library and in IE it is throwing the error supercluster not defined. In chrome it is working fine.

we are using the example from here. It is in ES 6 but we did convert to ES 5

https://bl.ocks.org/ryanbaumann/01b2c7fc0ddb7b27f6a72217bd1461ad

this is the code we are using. (even without array.from, it is giving the error)

function performSuperClustering(propertyToAggregate, clusterRadius, clusterMaxZoom, secondaryPropertyToAggregate, mapName) {
            return supercluster({
                radius: clusterRadius,
                maxZoom: clusterMaxZoom,
                initial: function initial() {
                    return {
                        count: 0,
                        sum: 0,
                        min: Infinity,
                        max: -Infinity,
                        unique: 0,
                        uniqueSecondary: 0,
                        consolidatedArray: [],
                        distinctArraySecondary: []
                    };
                },
                map: function map(properties) {
                    return {
                        count: 1,
                        sum: Number(properties[propertyToAggregate]),
                        min: Number(properties[propertyToAggregate]),
                        max: Number(properties[propertyToAggregate]),
                        unique: 1,
                        uniqueSecondary: 1,
                        consolidatedArray: Number(properties[propertyToAggregate]),
                        distinctArraySecondary: app.getContentForDistinctSecondary(mapName, secondaryPropertyToAggregate, properties),//properties[secondaryPropertyToAggregate] + "}{" + properties["alertLocation"] + "}{" + properties["alertTitle"], //SUJAN
                        placeholder: Number(properties[propertyToAggregate])
                    };
                },
                reduce: function reduce(accumulated, properties) {
                    accumulated.sum += Math.round(properties.sum * 100) / 100;
                    accumulated.count += properties.count;
                    accumulated.min = Math.round(Math.min(accumulated.min, properties.min) * 100) / 100;
                    accumulated.max = Math.round(Math.max(accumulated.max, properties.max) * 100) / 100;
                    accumulated.avg = Math.round(100 * accumulated.sum / accumulated.count) / 100;

                    if (accumulated.consolidatedArray.indexOf(properties.consolidatedArray) == -1 && properties.placeholder != null) {
                        accumulated.unique += properties.unique;
                        //alert(acculumated.unique + " AND standalone unique: " + properties.unique);
                        accumulated.consolidatedArray.push(properties.consolidatedArray);
                        accumulated.distinctArraySecondary.push(properties.distinctArraySecondary);
                    } else {
                        accumulated.unique += properties.unique;
                        if (Array.isArray(properties.consolidatedArray)) {
                            accumulated.consolidatedArray = [].concat(_toConsumableArray(accumulated.consolidatedArray), _toConsumableArray(properties.consolidatedArray)); // PROBLEM
                            accumulated.distinctArraySecondary = [].concat(_toConsumableArray(accumulated.distinctArraySecondary), _toConsumableArray(properties.distinctArraySecondary));
                        }
                        var temp = new Set(accumulated.consolidatedArray);
                        var tempSecondary = new Set(accumulated.distinctArraySecondary);
                        accumulated.unique = temp.size;
                        accumulated.distinctArraySecondary = Array.from(tempSecondary);
                        accumulated.uniqueSecondary = tempSecondary.size;
                    }
                }
            });
        }

Help is much appreciated. thank you.

[AtofStryker]

I second this. We are running babel against the package to transform ES6 to ES5 so supercluster can run in IE 11 and IE 10. Also the same issue with KDBush. Can someone please link the issue?

https://github.com/mourner/kdbush/issues/26

[mourner]

Supercluster runs fine in IE. There was a breaking change in v5.0 which is described in https://github.com/mapbox/supercluster/releases/tag/v5.0.0 — now you have to use new Supercluster(...) instead of supercluster(...).

[ssujan728]

@mourner thank you we will give it a try and get back to you. :+1:

[ssujan728]

Sorry for the late reply, tried v5 of super cluster in IE 11 and still getting the same error message.

'Supercluster' is undefined.

May be is too much to ask, but may i know where to find some sample code that works on IE? a simple example will be very helpful.

thank you very much.

[ssujan728]

Tried in my personal computer, it was working fine in Edge but IE it not throwing any error but it clustered points are still not showing on the map.

[akirpichnikov]

Same issue here. I created a simple sandbox and it works in Chrome but in IE it throws an error. https://codesandbox.io/s/8x77m76x3j It can't be run directly in IE due to some errors, but you can download the project and run it on your computer. If it opened in IE11 it throw an error on line const defaultGetX = p => p[0]; and it obvious as IE don't support ES6 syntax. This code is from KDbush library and I'm not very familiar how to debug why this code not transpyling.

[logan-jobzmall]

I am getting the exact same error in my project @akirpichnikov - I will second this. When using the package within Angular and Typescript, it seems to use the "module" field in the package.json which points to the src. @mourner, is there any workaround to this? As I have seen it by many other vendors, it is normal to use an es5 version in the module field.

As you can see in this issue on Angular-CLI, it is expected that third-parties have the correct format

[ssujan728]

Finally, managed to get it work in IE 11.

Steps taken:

1. Had to update the Mapbox and Supercluster libraries to the latest version.

2. Had to download the js files and store it locally, instead of using cdn. There were some proxies configured for IE and for some reason Supercluster libraries were being blocked by the proxy and that resulted in the error message.

3. Transipling issue. This is quite strange as I transpiled the code using Babel but there were still some ES6 stuff like Array.from and Set. And IE didn't throw any error messages in the console.

4. Replace the supercluster initialization code with new Supercluster()

Manage to get this sample code working in IE 11: https://bl.ocks.org/ryanbaumann/01b2c7fc0ddb7b27f6a72217bd1461ad

Attached the code with this post. Hope this helps

Cheers, Sujan

[ssujan728]

Forgot to upload the sample code. Please find it with this post. mapbox-current-implementation-2019-02-19-working-ie.zip

@mourner

[mourner]

Please see related discussion here.

[ghost]

I used to transpile supercluster and its dependency kdbush to make it work in IE;

const modulesToTranspile = ['supercluster', 'kdbush'];

// webpack config for babel-loader
include: modulesToTranspile.map(moduleName =>
    path.resolve(__dirname, `../../../../node_modules/${moduleName}`)
),
exclude: [new RegExp(`node_modules\/(?!(${modulesToTranspile.join('|')}))`)]