Create example for using Next.js with IE11

[schuma7]

Hi everyone,

I am currently evaluating next.js for one of my client projects. While playing around with the Redux sample under https://github.com/zeit/next.js/tree/master/examples/with-redux I noticed that it throws the following error under IE11:

ReferenceError: 'Promise' is undefined
   at updateOnClient (http://172.16.102.1:3000/_next/-/commons.js:8875:3)
   at mount (http://172.16.102.1:3000/_next/-/commons.js:8853:3)
   at componentWillMount (http://172.16.102.1:3000/_next/-/commons.js:8794:7)
   at Anonymous function (http://172.16.102.1:3000/_next/-/main.js:16691:11)
   at measureLifeCyclePerf (http://172.16.102.1:3000/_next/-/main.js:16418:5)
   at ReactCompositeComponent.performInitialMount (http://172.16.102.1:3000/_next/-/main.js:16690:9)
   at ReactCompositeComponent.mountComponent (http://172.16.102.1:3000/_next/-/main.js:16601:7)
   at ReactReconciler.mountComponent (http://172.16.102.1:3000/_next/-/main.js:1496:5)
   at ReactMultiChild.Mixin.mountChildren (http://172.16.102.1:3000/_next/-/main.js:21084:11)
   at ReactDOMComponent.Mixin._createContentMarkup (http://172.16.102.1:3000/_next/-/main.js:18021:9)

The other examples that I've tried don't seem to throw this error and they also make use of Promise inside of commons.js. Does anyone have any pointers on how to resolve this?

Regards,
Sven

[lipp]

I think you have to a promise polyfill via webpack config. Check this out for options:
http://stackoverflow.com/questions/38960490/how-can-i-polyfill-promise-with-webpack

Here you can see how to custom configure webpack with next:
https://github.com/zeit/next.js#customizing-webpack-config

[schuma7]

But how is it that all the other examples I've tried so far, don't show this behaviour? I assume Promises are used heavily by next.js, so if Promises support is entirely missing this error would surface everywhere or not?

[lipp]

not sure about it, but caniuse shows that Promises are not supported by IE11:
http://caniuse.com/#feat=promises

[arunoda]

Weird. We normally push a Promise polyfill. I'd like to invest on this.

[timneutkens]

Going to have a look this weekend.

[schuma7]

@timneutkens was wondering if you had the time to investigate this issue? I have to meet a deadline by the end of the month and would appreciate if you could let me know whether this issue is likely going to be resolved soon?

[timneutkens]

Haven't had a look yet, some other stuff came up. I'll set a reminder for tonight.

[timneutkens]

@schuma7 Have a look at the PR above 😄

[arunoda]

Okay. Here's what's happening.
Webpack2 needs a Promise polyfill.
See: https://webpack.js.org/guides/migrating/#require-ensure-and-amd-require-is-asynchronous

So, I'm going to use our exising core-js polyfill as it's used inside our babel transformed code.

[schuma7]

Thanks guys, great to see this resolved without having to add an extra polyfill!