Nothing but blank pages in Internet Explorer (11)

LinusBorg - your help has been fantastic. I very much appreciate your patience with me. Thank you.

Going forward, if I have questions, can I address them directly to you, or should it be open ended?


Happy to help.

But Please open normal threads here, so others can help out or profit from replays as well.

1 Like

Hey I’m using vue without a build process to render templates from an index.html file and I’m getting a blank page in IE.
Is there an example or documentation of how to get template polyfill support for vue in IE?

Use the es6-promise polyfill given earlier in this thread. Worked great for me.

So after including <script src='bower_components/es6-promise/es6-promise.js'></script> in your index.html page, what are the steps that brought you success?


I’m using vue-cli with webpack. The code doesn’t go into index.html, but rather in main.js. First, install es6-promise (npm install es6-promise --save). Then, in main.js:

import es6Promise from 'es6-promise' es6Promise.polyfill()

This code preceeded my import of ‘vuex’ in main.js. (Not having a polyfill while using vuex in ie11 caused my blank page).

Hope this helps.


I had the similar issue. In my case, it was because I am using coffeescript in .vue : lang="coffee".
The script was not converted to ES5, so I edited vue-loader.conf.js to transpile the coffeescript.

Also, to be able to use promise, I added import 'es6-promise/auto'

This is the repo:


This thread helped me as I, too, have to support IE.

Although my configuration is slightly different and the way I got it working was adding the CDN link to the ‘auto’ version of the polyfill, I wouldn’t have a clue how to fix it without the comments/replies here.

Thank you :slight_smile:

Guys I have imported polyfills with:

Import Es6Promise from 'es6-promise’

In my main.js but still does not work. Any better suggestions/solution ?

I would guess you add the poly fill too late. can you share code?

Hello everyone!
I have the same issue in IE11 and below.

Tried to add before/after Vue in main.js:
Import Es6Promise from ‘es6-promise’
import ‘es6-promise/auto’
but this didn’t help.
I used vue-cli webpack-simple template, without vuex.

1 Like

dve model?

What you mean?

I have the same issue in IE11 and below too

addd this link for IE

I’ve installed es6-promise using npm install --save es6-promise and npm install --save-dev es6-promise
and imported at the top of my main.js file just below the vue import.

Here is the code I used:
import Vue from 'vue'
import Es6Promise from 'es6-promise'
import VueRouter from 'vue-router'
import VeeValidate from 'vee-validate'
import { routes } from './routes'
import App from './App.vue'

I do not have a .babelrc file. Do I need one?

But when I load the project in IE 11 I get this message: SCRIPT1003: Expected ':' build.js (7,76175)

Also this is my complete webpack.config.js

var path = require('path')
var webpack = require('webpack')
var UglifyJSPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: './dist/',
    filename: 'build.js'
  module: {
    rules: [
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            scss: 'vue-style-loader!css-loader!sass-loader',
            // sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax',
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['es2015']
        test: /\.(pdf|png|jpg|gif|svg|ico|woff2?|eot|ttf|otf)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue'
  resolveLoader: {
    alias: {
      'scss-loader': 'sass-loader',
  devServer: {
    historyApiFallback: true,
    noInfo: true
  devtool: '#eval-source-map'

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  module.exports.output.publicPath = './dist/'
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
    new UglifyJSPlugin(),
    new webpack.LoaderOptionsPlugin({
      minimize: true

Any insight?

Since you have your Babel config inlined in the webpack config (for .js files) instead if saving it in a babelrc file, vue-loader has no babel config to use, so nothing is transpiled.

How would you suggest that I resolve this? Also does it make a difference that my files are .vue?

Well, create a babelrc file with the Babel config.

   "presets": ["es2015"]

Thats what I’ve been trying to make clear: your current Babel config only applies to js files, not vue files.

I created the .babelrc file as you stated above and I removed the config from the webpack.config.js file but I’m still getting the same type of error.