Next-auth: Internet Explorer 11 support?

[iaincollins]

There has been a report of incompatibility with the NextAuth Client and Microsoft Internet Explorer 11.
https://github.com/iaincollins/nextjs-starter/issues/79

Note: There are no reports of issues with Microsoft Edge, this issue relates only to the legacy browser Microsoft Internet Explorer.

This issue is currently unconfirmed and has not been replicated / confirmed. It used to work in Microsoft Internet Explorer but there may have been breaking changes at some point.

Since the original issue was raised, there have been further updates to next-auth and webpack (which has had an update addressing an issue in an upstream package that seems to relate directly to this issue) and also changes to how NextAuth Client is bundled.

The demo at https://nextjs-starter.now.sh should always run the latest version and be a useful reference to confirm if there is still an issue with next-auth and Internet Explorer 11 or not.

Both feedback and pull requests are welcome.

Note: If it is (as reported) an issue with webpack it may further the case for moving to Rollup instead of webpack - recent versions of webpack are already causing problems for universal libraries like the NextAuth Client.

[dprea]

@iaincollins I can confirm, that https://nextjs-starter.now.sh does not work in IE11. When using next-starter as it is in Master - I get a page that displays a syntax error locally in IE11. When viewing https://nextjs-starter.now.sh in IE 11 now, I get this error:

HTTP Error

An HTTP error occurred while trying to access /

However, it appears on a styled page, where as locally the page is different when using next-starter.

I see a flash of the page working in IE11 before it changes to the Error page.

If I can help any further, I'd be happy to do so. I am on Windows 10.

[iaincollins]

Thank you, that's super useful to have confirmed and to help prioritise a fix.

[dprea]

@iaincollins I tested a little further, it actually crashes IE 11 completely. I also get a pop up message in IE 11 through a native window that says "The requested element is no longer in the DOM". I don't know if that was the exact message, I couldn't copy it and I closed IE 11. I'm trying to get it to pop up again.

Also, I don't see anything in the console of IE 11.

[iaincollins]

😶 (!) Ouch. That's bad. Thanks again for the additional info, that's really helpful to have confirmed from a second source.

It might be a while before I can address this (I'm on the road and don't even have WiFi at the moment, so can't download Windows into a VM) but I'll take a look again when I'm able.

[jackjwilliams]

Sidenote, in case anyone wasn't aware. Windows 10 comes with the last version of IE 11 installed (at least mine does). Start Menu > Type "Internet Explorer".

I just learned this a few weeks ago :)

[Soundvessel]

@zeldar and anyone testing on IE11 in Windows. If it crashes the browser completely it will likely generate some kind of system log. In your start menu search type "Computer Management" to get the panel. Expand the "Event Viewer", then try selecting either "Applications..." or "Windows" logs, then use the filters on the right to limit to errors and similar critical events. Once you know the log pattern I believe you can even make a custom view with just those errors.

Following this thread since while IE11 market share is shrinking we can't ignore for some projects in production.

[dprea]

When running locally I get the following two errors in console:

Collator could not be initialized and wouldn't be used
Syntax error
SyntaxError: Syntax error
   at Anonymous function (node_modules/next-auth/client.js:98:0)
   at __webpack_require__ (node_modules/next-auth/client.js:30:0)
   at eval code (eval code:2:22)
   at Anonymous function (node_modules/next-auth/client.js:86:0)
   at __webpack_require__ (node_modules/next-auth/client.js:30:0)
   at Anonymous function (node_modules/next-auth/client.js:73:0)
   at Anonymous function (node_modules/next-auth/client.js:11:0)
   at webpackUniversalModuleDefinition (node_modules/next-auth/client.js:3:0)
   at ./node_modules/next-auth/client.js (node_modules/next-auth/client.js:1:0)
   at __webpack_require__ (webpack:/webpack/bootstrap fd452ff7c7e174e23b28:714:0)

and

Warning: Expected server HTML to contain a matching <div> in <div>.

When I navigate to the website https://nextjs-starter.now.sh/ I get an error page with:

HTTP  Error

An HTTP  error occurred while trying to access /

with this in console:

Syntax error
SyntaxError: Syntax error
   at Anonymous function (https://nextjs-starter.now.sh/_next/static/commons/main-88be77a4446b5e59c385.js:1:223460)
   at t (https://nextjs-starter.now.sh/_next/static/commons/main-88be77a4446b5e59c385.js:1:221931)
   at eval code (eval code:2:22)
   at Anonymous function (https://nextjs-starter.now.sh/_next/static/commons/main-88be77a4446b5e59c385.js:1:222386)
   at t (https://nextjs-starter.now.sh/_next/static/commons/main-88be77a4446b5e59c385.js:1:221931)
   at Anonymous function (https://nextjs-starter.now.sh/_next/static/commons/main-88be77a4446b5e59c385.js:1:222298)
   at Anonymous function (https://nextjs-starter.now.sh/_next/static/commons/main-88be77a4446b5e59c385.js:1:221825)
   at n (https://nextjs-starter.now.sh/_next/static/commons/main-88be77a4446b5e59c385.js:1:221704)
   at Anonymous function (https://nextjs-starter.now.sh/_next/static/commons/main-88be77a4446b5e59c385.js:1:221683)
   at r (https://nextjs-starter.now.sh/_next/static/commons/main-88be77a444

[Soundvessel]

I am not a JavaScript expert but I believe the following can help you narrow this down:

IE11 Inspector has a debugger tab where you set it up to break on all exceptions and continue by hitting the "play" triangle http://prntscr.com/k4wq34

As the page loads the following exceptions occur in polyfill.min.js

• http://prntscr.com/k4wqka
• http://prntscr.com/k4wqzk
• http://prntscr.com/k4wr7e
• http://prntscr.com/k4wre3
• http://prntscr.com/k4wrii
• http://prntscr.com/k4wrp5
• http://prntscr.com/k4wrw0
• http://prntscr.com/k4wsk7 at this point the content appears in the browser

Now the exceptions move into main.js bundle I believe?

• http://prntscr.com/k4wt7f
• http://prntscr.com/k4wth6
• http://prntscr.com/k4wtsb
• large exception here with webpack, top and bottom http://prntscr.com/k4wudh http://prntscr.com/k4wum9

After that last exception the page reports the HTTP Error.

My guess is that some ES6 is not getting properly transpiled (first exception in the polyfill above http://prntscr.com/k4wqka perhaps?). A lot of chatter across the web that this could be related to webpack not transpiling node modules written in ES6.

https://github.com/zeit/next.js/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+IE11

Hope this helps.

[iaincollins]

Thank you for the continued feedback on this, it's much appreciated!

I am still on holiday for another 2-3 weeks and so harder for me to do anything about right now which is why there hasn't been progress on it, but it's still important to address.

[iaincollins]

Updated since I originally replied:

Good news and bad news.

Background

The bundle being generated by webpack did not work in Internet Explorer 11 and was causing it to bomb out. The next-auth package now uses rollup to build the next-auth client; as there were other issues with recent release of webpack no longer generating viable isomorphic code.

I was looking to migrate to using rollup anyway to simplify maintenance.

Good News

It now no longer crashes Internet Explorer (as of NextAuth 1.9.0, which is a seamless upgrade). You can login as it falls back to server side rendering of pages.

Bad News

There is still an issue with Internet Explorer 11. It still crashes, but just raises an error in the console.

This is also true of the demo at http://nextjs-starter.now.sh

I'm going to make a separate issue addressing this which I'll leave open.

If someone wants to provide a working rollup.config.js or .babelrc which can generate an isomorphic client.js file which works in Node.js and Internet Explorer 11 then I'll gladly accept the PR!

[jenssogaard]

@iaincollins I totally understand you not wanting to support IE11. However I am on a project where IE11 needs partial support. Any ideas as to how I could work around that?

[iaincollins]

@jenssogaard Yeah I understand.

So, it needs some config work around babel/rollup.

I had to ditch webpack and move to rollup because they did some refactoring which broke generating isomorphic code that also ran in service worker, and there wasn't a fix for it at the time.

Having had some time to think about it, I think fixing babel config issue and restoring Internet Explorer compatibility, shouldn't be too hard and I'm going to take a look.

There are some edge cases that it makes sense to solve at the same time (e.g. for folks with custom .babel configs, for common use cases like having MobX, etc).

[iaincollins]

@jenssogaard Well that was much less annoying that I thought. A bit of time away from the problem did me good and it's fine now.

I rolled out next-auth 1.11.0 which 'just works' in IE11 (I am not sure about older versions as I only have enough hard disk space for a couple of Virtual Machines and can't test older versions reliably right now).

[jenssogaard]

@iaincollins awesome Ian. Just updated my dependency and gave it a try - so far no issues. Well done.

[iaincollins]

Great! Thanks for the feedback.

Someone has raised an issue that it's bloated the size of the lib (because it pulls in a bunch of babel-polyfill junk), which is fair and I was meaning to raise an issue about myself.

I'll probably try and address the bloat that it's required in a future update by cherry picking which polyfills it pulls in (as we don't need all of them) but now it's working I am not going to remove them or require special configuration for them in any 1.x release, so no one needs to worry about it breaking.

(If we need to make them optional, I hold that change back for a 2.x release.)