Webpack: Vuex Promise Polyfill Issue

[niallobrien]

Hi all, I'm using this template with Vue v2 RC5, Vuex and VuexFire (Firebase).
When I run the dev server and try it in IE11, I get the following error in the browser console: SCRIPT5022: [vuex] vuex requires a Promise polyfill in this browser.
I'm not sure why this is the case as I'd assume all JS is compiled to ES5 code...?

Please advise, thanks in advance.

[yyx990803]

ES6 -> ES5 transpilation only handles syntax transformation, not polyfills (these are more like runtime features). You can either use babel-polyfill (which includes all ES6 related polyfills) or just es6-promise.

[niallobrien]

Thanks for clarifying @yyx990803 :+1:

[DevanB]

Is there any documentation of the process to add the polyfill @yyx990803? I've checked the Webpack template docs, but didn't find anything. My webpack skills aren't strong.

[yyx990803]

@DevanB polyfills are not webpack specific https://github.com/stefanpenner/es6-promise

[DevanB]

Forgive me, as I'm new to dealing with this scenario. In es6-promise's documentation here, it looks as though I can simply add this: require('es6-promise').polyfill(); to a file. Would it be ideal to add that code in my main.js where Vue is being instantiated, or should something like this go in webpack.prod.conf.js file?

Thanks for the help @yyx990803. I know you are super busy!

[yyx990803]

I'd add that to the top of your entry file

[DevanB]

Found one half of my problem. I was using the Prerender SPA plugin, which seems to be having the same problems: https://github.com/chrisvfritz/prerender-spa-plugin/issues/16.

After pulling that out and trying both babel-polyfill (and it's instructions) and es6-promise (and it's instructions), I was not able to get the promise polyfill to work on IE10 and below. I hope this makes it on the radar as an issue to at least research into. I will be glad to appropriately document the problem and steps I've taken to resolve it some where, if this isn't the correct place for the discussion.

Thanks @yyx990803 for the help!

[atilacamurca]

Using Babel polyfill solved the problem. Here are the steps what I did:

npm install --save-dev babel-polyfill

then include the polyfill file before your source and test files within the files section of your test/unit/karma.conf.js

files: [
  '../../node_modules/babel-polyfill/dist/polyfill.js',
  'index.js'
],

Source: http://stackoverflow.com/a/40784617/1152679

[niallobrien]

Thanks for sharing @atilacamurca :+1:

[inouetakuya]

In addtion to https://github.com/vuejs-templates/webpack/issues/260#issuecomment-265604710 if you use es6-promise:

files: [
  'path/to/node_modules/es6-promise/dist/es6-promise.auto.js',
  'index.js'
],

(version of es6-promise: 4.0.5)