"updateCurrentUser failed" error on screen, after using 4.7.1 via ES module import

[akauppi]

Describe your environment

• Operating System version: macOS
• Browser version: Chrome 85
• Firebase UI version: 4.7.1
• Firebase SDK version: 8.0.0

Describe the problem

The ability to import as ES module in 4.7.1 is something I have been looking forward to. Bringing it in in my application, I found two problems. This issue describes the more crucial one, which I don't understand and can not find a way around.

After changing my code to use import instead of loading via the globals, and signing in with Google account, I see this:

I have no idea, where it comes from.

Steps to reproduce:

1. Clone https://github.com/akauppi/GroundLevel-es-firebase-app
2. Set up a Firebase project to work against (please read the README, until you can npm run dev:online).
3. npm run dev:online

Open the browser at http://localhost:3001 and try Google sign-in.

Expected: one should get to the app
Actual: the above error is shown

Relevant Code:

Unfortunately, I don't have a minimum reproducing project available. Merely scouting, if other are also seeing this.

[sam-gc]

Thanks for reaching out--

Is there anything that's logged to the JS console (like a stack trace for example)?

[akauppi]

@samhorlbeck Nothing out of the ordinary in the browser console. Is there something on the FirebaseUI side, to enable more tracing?

[bojeil-google]

The error you are receiving is related to the core Auth library. I would investigate there first.

[bojeil-google]

A quick search in your repo seems that you are creating wrappers or new references of the user. I suspect that could be related.

[akauppi]

So you are saying this is not occurring with others.

@bojeil-google The wrapping code should not affect Firebase in any way. It has worked before, the only change was bringing ’firebaseui’ via ES import, instead of via globals (window.firebase and window.firebaseui).

[bojeil-google]

The issue is unlikely to be related to firebaseui as I explained in my first comment.

We have not seen any other reports of this issue.

Try changing your auth import from import '@firebase/auth' to import 'firebase/auth';. That worked for us and this matches the firebase guidelines.

[akauppi]

I saw your first comment (and appreciate the help). I am simply reporting that importing Firebase and FirebaseUI as browser-native ES modules does not currently work. To me, it does not play a huge role whether the reason is in the auth, the FirebaseUI or their mutual bridging.

Try changing your auth import from import '@firebase/auth' to import 'firebase/auth';. That worked for us and this matches the firebase guidelines.

That's a good point. I tried it, but it makes no difference. In fact, the latter is just a redirect to the former:

$ cat node_modules/firebase/auth/dist/index.esm.js
import '@firebase/auth';
//# sourceMappingURL=index.esm.js.map

I'll come back to this, eventually. For a couple of weeks, I likely have other work to do.

[Scino]

I have the same problem, in localhost only, using npm nuxtjs/firebase with npm firebase and npm firebaseui.

"@nuxtjs/firebase": "^7.1.1",
"firebase": "^8.0.2",
"firebaseui": "^4.7.1",

While it perfectly works in production.

[akauppi]

Have now time to look into this.

@bojeil-google Thank you for your comments.

We have not seen any other reports of this issue.

I did find the issue discussed in #536 (Dec 2018 - May 2019).

Try changing your auth import from import '@firebase/auth' to import 'firebase/auth';. That worked for us and this matches the firebase guidelines.

I did. It doesn't change anything.

[akauppi]

Did not find a way to make FirebaseUI live with ES modules.

Instead, wrote my own authentication components which is available as a web component. If anyone is interested, you find it here.