Comments (15)
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!
from next-auth.
@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).
from next-auth.
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 :)
from next-auth.
@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?
from next-auth.
@iaincollins awesome Ian. Just updated my dependency and gave it a try - so far no issues. Well done.
from next-auth.
@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.
from next-auth.
Thank you, that's super useful to have confirmed and to help prioritise a fix.
from next-auth.
@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.
from next-auth.
😶 (!) 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.
from next-auth.
@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.
from next-auth.
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
from next-auth.
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.
from next-auth.
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.
from next-auth.
@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).
from next-auth.
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.)
from next-auth.
Related Issues (20)
- Tiktok provider is missing url in token object HOT 1
- Tiktok provider is missing url in token object / Second Attempt HOT 1
- Google Provider TODO: Handle OIDC response body error HOT 26
- Provider configs `token` and `userinfo` ignore `url` and `request` properties HOT 2
- Docker setup guide needed HOT 1
- Missing Link on PG documentation for schema HOT 1
- How to enable refresh token in v5 - ^5.0.0-beta.16 HOT 4
- Authentik or OIDC like provider not recognize the same user. HOT 1
- Fix Github stars icon HOT 1
- [next-auth][error][OAUTH_CALLBACK_ERROR] | facebook provider HOT 1
- [framework-sveltekit] minor issue in: `SignIn` component HOT 1
- Middleware Route Protection nextjs example result in Middleware relative urls error HOT 1
- Allow installing svelte 5 (pre-releases) as a peer dependency HOT 1
- Allow installing svelte 5 (pre-releases) as a peer dependency HOT 1
- EDGE_FUNCTION_INVOCATION_TIMEOUT when using DrizzleAdapter | timeout Vercel edge functions
- Missing: https://authjs.dev/guides/providers/credentials HOT 1
- Cannot leverage platform attribute in SvelteKit during sign-in HOT 5
- Fix typo
- Documentation on Custom Providers
- Auth.js Pages Documentation Page link is broken - Shows 404 HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from next-auth.