Nothing but blank pages in Internet Explorer (11)

I tried testing my app in ie11 and, to my amazement, the screen was blank (except for the background color). Researching it, I discovered that the template tag is not recognized in ie (11). So, then I tried to incorporate the ‘script type=x-template’ replacement for the template tag, but haven’t been able to make it work.

My vue instantiation is in main.js, where also my routes are defined. From there, I added a ‘template: #appTemplate’ but the template couldn’t be found - because it’s in another file. (I’m using vue-loader - all modules are in separate .vue files, templates included !)

So: (1) how to reference the #appTemplate in another file from index.js, and (2) is the ‘script type=x-template’ scenario going to have to be used to reference EVERY .vue file, or is it a one time issue with app.vue? It’s not a very elegant solution and I’m actually thinking of scrapping ie support, but that’s probably not wise. At least ie11 should be ok.

I’m sorry, I can’t follow. The lack of support of <template> in IE11 only affects templates that are defined in an actual HTML page like index.html.

But you talk about having a problem with this with app.vue, which doesn’t make sense because IE11 never gets any contact with app.vue - vue-loader transforms it before IE11 receives the bundle. So I
don’t see how IE11 should affect any of that.

I’m also unclear where/why you would define 'template: #appTemplate' if you have an app.vue file.

Thanks LinusBorg. I apologize if I wasn’t clear (to myself - or you. I’m new to Vue and still trying to sort things out). So, here’s how I configured my app: In index.html - nothing but the APP tag in the body. In main.js - the definition of all my routes and then my vue definition:


new vue({
router: router,
el: ‘#AWT’, (AWT is an acronym for my project name).
components: {App}
})


The app is single page. App.vue is always there. Main menu is in app.vue. All other routes called from there.

So I start up the app in ie11 (localhost:8080) - and get a blank screen (except for the colored background - so it read the css at least). So, all the html inside app.vue’s template - not showing up.

Hope this clarifies!

…and where is this ‘#AWT’ element?

it should be here:

<body>
  <div id="#AWT">
    <app></app>
  </div>
</div>

(Don’t know how to type code here - so I’m leaving off tag closing brackets:)
I had (in index.html):

<body <app id= 'AWT' </app </body There was no '#' prefixing 'AWT' above.

I tried as you suggested (with enclosing div tags) and with/without the # before AWT. Still - ie11 blank page.

Yeah that was just a typo.

I guess I have to see your code. Describing it to me in words won’t let me see any small mistakes you might have done. Your index.html as it was, was definitely wrong. Probably something else is wrong, too.

Hi LinusBorg. Thank you for your patience with me :slight_smile:
Opened the debugger in ie11 and discovered this error message:
[vuex] vuex requires a Promise polyfill in this browser.
I’d just set up vuex and am loving it. Only recently opened ie11 to check a ‘can-i-use’ scenario and discovered the blank screen issue. So, what’s the problem with vuex and ie11?

Well, IE11 doesn’t support promises. You have to provide a poly fill.

Should have thought of that myself :sweat:

Here’s where my ignorance shines. I vaguely understand what a polyfill is. Where do I find the appropriate one; how do I integrate it ? . . .

A polyfill is just a small script that adds features to a browser that it doesn’t support natively.

So, if I npm install it and then import it at the top of my ‘App.vue’, will the other browsers that don’t need it (Chrome, FF, etc) just ignore it? And, if it’s imported in App.vue (which stays up throughout my single page app) will it be available to all functions that require promises? In other words, do I only have to import it once?

Yes.

In other words, do I only have to import it once?

Yes. In main.js, before you import vuex

JOY !! No more blank screen in ie11 :smile:

I added two lines (according the write-up) before importing vuex:

var Promise = require(‘es6-promise’).Promise;
require(‘es6-promise’).polyfill();

Are both lines required?
Also - I tried to ‘import’ them, but couldn’t for some reason.

(by the way - how do I include code here without it being clipped? (when I enter a closing bracket on a tag)> )

2 Likes

It should probably look like this:

Import Es6Promise from 'es6-promise'
Es6Promise.polyfill()

The forum is using github flab outed markdown. Code should be put between backticks.

1 Like

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?

2 Likes

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?
Thanks

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?

Thanks

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.