Blank page on ie 11

[micka753]

It works on Vivaldi, but I get a blank page on IE 11. No errors in the javascript console
edit : here what I did :
vue create my-app (Router, Unit testing mocha, E2E Cypress,)
cd my-app
npm i -D vue-cli-plugin-vuetify
vue invoke vuetify
npm run serve
edit 2: I did not know I had to refresh the page with the console open in ie, sorry.
Here is the error :
function createRange(length) {
return [].concat(_toConsumableArray(Array.from({ length: length }, function (v, k) {
return k;
})));
}
I guess it has to do with babel configuration.

[chewy94]

What options did you select during the invoke vuetify process?

[chewy94]

I have confirmed this error on ie11. Must be something to do with polyfill. Only option I said no to was a-la-carte

[chewy94]

Took a dive and it looks like we are using babel v6.x.x where as the cli generates projects using babel 7.x.x. Not sure if this can be related

[KaelWD]

It doesn't look like we're including babel-polyfill

[micka753]

Fixed with :
npm install babel-polyfill --save
// vue.config.js
module.exports = {
configureWebpack: {
entry: ["babel-polyfill", "./src/main.js"]
}
}
I thought vue-cli took care about configuring Babel. I must have missed something.

[KaelWD]

babel !== babel-polyfill

[mikekidder]

Wanted to show different option to support IE11.

@micka753 resolution is based on the Babel polyfill docs, and using a vue.config.js file to override the webpack entry behavior for CLI

For me, I only wanted to load the polyfill if its IE11 to support Vuetify.
Get a copy of the polyfill, and add to the head section of index.html in the public folder.

<script type="text/javascript"> if(/Trident.*rv:/.test(navigator.userAgent)) document.write('<script src="./js/polyfill.min.js"><\/script>'); </script>

Saves from having to add to package.json, import/require the module, and loading a file not needed for Chrome, Firefox, etc..

[LinusBorg]

Vue core team here.

Our babel preset uses babel-preset-env, and by default, we set that preset's useBuiltIns option to usage, which means it will only include polyfills for stuff that it actually comes "across" while compiling.

However, since we don't transpile node_modules, any lib that uses ES6 features won't automatically have that feature polyfilled until we ourselves use that feature in our own, transpiling code.

The solution is to set useBuiltIns: entry as an option to our preset and import the polyfill in main.js:

{
  "presets": [
    [
      "@vue/app", 
      {
        "useBuiltIns": "entry"
      }
    ]
  ]
}

// main.js
import '@babel/polyfill'
import Vue from 'vue'
// ..

[LinusBorg]

Note: I proposed to use entry as the default in the CLI: vuejs/vue-cli#1248