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

Open
dockstreet opened this Issue Jan 10, 2017 · 4 comments

Projects

None yet

2 participants

@dockstreet
Contributor
dockstreet commented Jan 10, 2017 edited

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 Tooa added this to the Minor Release v4.18 milestone Jan 10, 2017
@Tooa
Member
Tooa commented Jan 10, 2017

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

@Tooa Tooa removed this from the Minor Release v4.18 milestone Jan 10, 2017
@dockstreet
Contributor
dockstreet commented Jan 10, 2017 edited

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

Financial-Times/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
Contributor
dockstreet commented Jan 10, 2017 edited

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
Contributor
dockstreet commented Jan 11, 2017 edited

@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

@mojoaxel mojoaxel added a commit that referenced this issue Jan 14, 2017
@dockstreet @mojoaxel dockstreet + mojoaxel Fixed #2560: IE11 issue 'Symbol' is undefined with babel-polyfill (#2566
)

* address IE11 issue 'Symbol' is undefined with babel-polyfill  

#2560

* address IE11 issue 'Symbol' is undefined with babel-polyfill

#2560

* address IE11 issue 'Symbol' is undefined with babel-polyfill

#2560
0f7dc1f
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment