firebaseui-web Upgrade dialog-polyfill to 0.5 to support ES module imports

[REQUIRED] Describe your environment

Operating System version: Ubuntu 19.10
Browser version: Chrome 81
Firebase UI version: 4.4.0
Firebase SDK version: 7.8.2

[REQUIRED] Describe the problem

firebaseui tries to import the default export of dialog-polyfill, only available in v0.5. But firebaseui 4.4 depends on 0.4.x

Steps to reproduce:

Use es-dev-server to load a boilerplate web app use relevant code below

Relevant Code:

import firebase from "firebase/app";
import "firebase/auth";
import * as firebaseui from 'firebaseui';

Feb 15 '20 07:02 nomego

I'm having the same problem. Below is the error I get:

Uncaught SyntaxError: The requested module '../../dialog-polyfill/dialog-polyfill.js' does not provide an export named 'default'

Apr 07 '20 21:04 denaszune

I'm also getting this issue. No love on the thread?

Aug 10 '20 00:08 evancaldwell

@samhorlbeck please fix it.

Aug 28 '20 09:08 JosefJezek

@bojeil-google Could you add high priority to this issue?

Sep 27 '20 01:09 JosefJezek

I've filed this as a bug (internal reference: b/169612385)

Sep 28 '20 22:09 sam-gc

I suspect that getting FirebaseUI working with ES module imports, within browser, takes more than just updating that dependency. My experience so far:

Firebase itself cannot be loaded as an ES module, the advertised way: import { firebase } from 'firebase/app'
Since FirebaseUI has code that does this, it either needs to change or Firebase packaging itself needs to be fixed.
FirebaseUI 4.6.1 dist/esm.js does not end in export { firebaseui } as one would expect by the documented way of importing it. Instead:
```
$ tail -n 1 node_modules/firebaseui/dist/esm.js
... self : window );if(typeof window!=='undefined'){window.dialogPolyfill=dialogPolyfill;}const auth = firebaseui.auth;export { auth } ;
```
It exports the auth directly. This is fine, but at adds with the docs.

I'm eager to get a working FirebaseUI, via npm. Currently loading it via CDN when other dependencies come from npm.

Oct 08 '20 07:10 akauppi

This critical bug is very old without any fix from Feb 15 :-(

Oct 17 '20 11:10 JosefJezek

I know that FirebaseUI is an open source (community?) project, but it's also a pretty vital part of the Firebase web ecosystem.

Firebase client updated to 8.0.0 this week. That changes e.g. the recommended way of importing the client. Would we see such changes implemented, by Firebase, or should we team up as volunteers to bail water out of the boat?

Oct 29 '20 18:10 akauppi

I know that FirebaseUI is an open source (community?) project, but it's also a pretty vital part of the Firebase web ecosystem.

Firebase client updated to 8.0.0 this week. That changes e.g. the recommended way of importing the client. Would we see such changes implemented, by Firebase, or should we team up as volunteers to bail water out of the boat?

Please see https://github.com/firebase/firebaseui-web/pull/772 on the 8.0.0 issue. We will squeeze in some other fixes before we release this.

Oct 29 '20 18:10 bojeil-google

4.7.1 is out. While it still depends on dialog-polyfill < 0.5, I don't see this problem in practise.

$ npm list dialog-polyfill
@app/[email protected] /Users/asko/Git/GroundLevel-es-firebase-app
└─┬ [email protected]
  └── [email protected]

Nov 03 '20 10:11 akauppi

Attempted to add latest version to a new project, tried:

import firebaseui from 'firebaseui';

This produces:

Attempted import error: 'firebaseui' does not contain a default export (imported as 'firebaseui')

Then tried to copy paste from docs:

var firebase = require('firebase');
var firebaseui = require('firebaseui');
const ui = new firebaseui.auth.AuthUI(firebase.auth());
ui.start('#firebaseui-auth-container', {
  signInOptions: [
    firebase.auth.EmailAuthProvider.PROVIDER_ID
  ],
});

This produces:

TypeError: firebase.auth is not a function

Am I missing something? This is a copy paste 1st step of the web guide for this library and I can't get it to work at all.

Nov 21 '20 18:11 maciej-gurban

@maciej-gurban What works for me in an ES modules only browser project (package.json has type: "module"):

  import firebase from 'firebase/app'
  import '@firebase/auth'

  import { auth as uiAuth } from 'firebaseui'
  import 'firebaseui/dist/firebaseui.css'   // needed; otherwise the login buttons look broken

Firebase 8.0.2 FirebaseUI 4.7.1

The information in the README is certainly wrong, as you state (and would likely be best to be removed until the story is clear). Firebase changed their ES module capabilities in 8.0 and that hasn't really been carried over to FirebaseUI side.

I am also confused by this ticket. It seems to be about ES module compatibility, but the dialog-polyfill version no longer seems to play a role in that... Well, I am too distant to the project to be able to tell the whole story. Let us know if the above helps. :)

Nov 21 '20 20:11 akauppi

any updates on this? This means firebaseui doesn't work with any apps built on Vite :(