IE10/IE11: Object doesn't support this action

[blaaat]

I'm getting a

Object doesn't support this action

on

mounted: () => document.dispatchEvent(new Event("x-app-rendered")),

To Reproduce
Steps to reproduce the behavior:

Use defaults; add to project; run in IE10/IE11

Expected behavior
A clear and concise description of what you expected to happen.

No error on console / bugsnag

Additional context
Package version: 1.1.6
Vue version: X.X.X
Vue CLI version: X.X.X

[SolarLiner]

Man, sorry for the bad language, but fuck IE. D:

The culprit seems to be the Event constructor, so it seems that a simple polyfill should be good to fix that. For now a workaround is to set useRenderEvent to false and to delete the line.

[blaaat]

Does the render event serve any purpose (If our app isn't using it?)

Android Browser <5 also triggers an error. (but the Event function does exists). Added a try/catch block for android around a solution found on: https://stackoverflow.com/questions/26596123/internet-explorer-9-10-11-event-constructor-doesnt-work

function createNewEvent(eventName) {
  var event;
  if (typeof (Event) === 'function') {
    try {
      event = new Event(eventName);
    } catch (e) {
      event = document.createEvent('Event');
      event.initEvent(eventName, true, true);
    }
  } else {
    event = document.createEvent('Event');
    event.initEvent(eventName, true, true);
  }
  return event;
}

[SolarLiner]

The render event is used to tell Pupeteer that the app has finished rendering to DOM - basically a trigger to save the snapshot to disk.

Please try #41, I have had to write a more proper source file transform operation given how much code I was going to, well, transform. I've also included your polyfill (which was what I had found, but without the try/catch block) - so try to break it because since I'm transforming AST instead of just naive string manipulation, this should support many more use-cases.

[blaaat]

Works great! Not able to break it yet, Thank you. Nice PR description :)

The render event is used to tell Pupeteer that the app has finished rendering to DOM - basically a trigger to save the snapshot to disk.

If that's all, isn't it easier to just not trigger this event (except while running the build?)

[SolarLiner]

Well, you could always add a check to see if it's pre-rendering (I believe prerender-spa injects a property into window), but that would have been more source code manipulation than I'd be comfortable with without switching to AST transforms anyway; actually I haven't thought about that before. Since it's done the way it is now, and possibly there could be other uses to an event like this, I'm gonna leave it as is.

I'm merging the PR and will work towards getting a minor version bump out, thanks for the issue!

[ricky11]

Ran in to this issue several times this week with IE11 users, sadly i do need to support them. Does the latest release handle this issue, i.e 1.16 I know this issue was fixed in #41 but im not sure how to access that with npm as the latest official is 1.16. Sorry not familiar with accessing other versions , please help.