IE11 - 'Symbol' is undefined when trying to use network

[dockstreet]

Hi,

In validating another issue #1911

discovered that snapshot in develop 4.18 works fine in Edge/Chrome/Firefox, but throws an error in IE11 when trying to instantiate vis Network

'Symbol' is undefined is the error

Plunker created to reproduce the error
https://plnkr.co/edit/MX1agpoRYgYbgC23NAhl?p=preview

[Tooa]

Maybe one of this issues helps angular/angular#7914 PatrickJS/NG6-starter#114 ?

[dockstreet]

Looks like it could. I wonder... Source map was added after the last 4.17 release.

There is something here as well, seems like a polyfill could help fix or even break this? I'm not sure

polyfillpolyfill/polyfill-service#715
babel/babel-loader#92

I would be glad to test , if the polyfill maybe is added? Not sure if that would help though or not.

[dockstreet]

Ok. Update... found a fix for IE11. What I did was

npm install babel-polyfill --save
npm install --save-dev babel-plugin-transform-runtime
npm install --save babel-runtime

and npm run build and copied the minified vis.js.min to the plunker I was testing with in IE11, which seems to require the polyfill for this version.... it then worked fine.

What I believe happened was the babel-loader was added in this commit, which works fine except for IE11

884b75e#diff-b9e12334e9eafd8341a6107dd98510c9

my .babelrc fixed for IE11 looks like

{
"presets": ["es2015"],
"plugins": [
"transform-es3-property-literals",
"transform-es3-member-expression-literals",
"transform-runtime"
]
}

and here is my package.json

{
"name": "vis",
"version": "4.17.0-SNAPSHOT",
"description": "A dynamic, browser-based visualization library.",
"homepage": "http://visjs.org/",
"license": "(Apache-2.0 OR MIT)",
"repository": {
"type": "git",
"url": "git://github.com/almende/vis.git"
},
"keywords": [
"vis",
"visualization",
"web based",
"browser based",
"javascript",
"chart",
"linechart",
"timeline",
"graph",
"network",
"browser"
],
"main": "./dist/vis.js",
"scripts": {
"test": "mocha",
"build": "gulp",
"watch": "gulp watch",
"watch-dev": "gulp watch --bundle"
},
"dependencies": {
"babel-polyfill": "^6.20.0",
"babel-runtime": "^6.20.0",
"emitter-component": "^1.1.1",
"hammerjs": "^2.0.6",
"keycharm": "^0.2.0",
"moment": "^2.12.0",
"propagating-hammerjs": "^1.4.6"
},
"devDependencies": {
"async": "^2.0.0-rc.2",
"babel-core": "^6.21.0",
"babel-loader": "^6.2.10",
"babel-plugin-transform-es3-member-expression-literals": "^6.8.0",
"babel-plugin-transform-es3-property-literals": "^6.8.0",
"babel-plugin-transform-runtime": "^6.15.0",
"babel-preset-es2015": "^6.18.0",
"babelify": "^7.3.0",
"clean-css": "^3.4.10",
"gulp": "^3.9.1",
"gulp-clean-css": "^2.0.11",
"gulp-concat": "^2.6.0",
"gulp-rename": "^1.2.2",
"gulp-util": "^3.0.7",
"mocha": "^3.1.2",
"rimraf": "^2.5.2",
"uglify-js": "^2.6.2",
"uuid": "^3.0.1",
"webpack": "^1.12.14",
"yargs": "^6.3.0"
}
}

[dockstreet]

@Tooa / @mojoaxel
it may be of benefit to add this polyfill into the v4.18 release milestone?

perhaps for IE11 and from what I've been reading (but not tested) Safari compatibility and it looks like the solution is straightforward by adding the dependencies for babel

I created a pull request with my changes that should help

#2566