TypeError: undefined is not a function

[wardberckmans]

I am using stenciljs (Ionic pwa) and I am trying to embed the firebaseui in the applications. There error I get is this:
TypeError: undefined is not a function at new Sn (app-home.entry.js?s-hmr=367787020388:formatted:4184) at AppHome.componentDidLoad (app-home.entry.js?s-hmr=367787020388:formatted:4225) at safeCall (chunk-3853a083.js:1361) at postUpdateComponent (chunk-3853a083.js:1291) at updateComponent (chunk-3853a083.js:1273) at Array.update (chunk-3853a083.js:1205) at consumeTimeout (chunk-3853a083.js:120) at flush (chunk-3853a083.js:143)

And this is my code:

import { Component, h } from '@stencil/core';
import { firebase } from '@firebase/app';
import '@firebase/auth';
import * as firebaseui from 'firebaseui';
import { firebaseConfig } from '../../helpers/config';

@component({
tag: 'app-home',
styleUrl: 'app-home.css'
})
export class AppHome {

componentDidLoad(){
firebase.initializeApp(firebaseConfig);
var ui = new firebaseui.auth.AuthUI(firebase.auth());
console.log(ui);
ui.start('#firebaseui-auth-container', {
signInOptions: [
{
provider: firebase.auth.EmailAuthProvider.PROVIDER_ID,
requireDisplayName: false
}
]
});
}
render() {
return [

>       <ion-header>
>       </ion-header>,
>       <ion-content class="ion-padding">
>         <div id="firebaseui-auth-container"></div>
>       </ion-content>

];

}
}

[wti806]

With the information you provided, there is no way we can help you debug. The error message doesn't have much useful information. Is there a way that you can check where the error is thrown in firebaseui?

[wardberckmans]

It comes from this line:

var ui = new firebaseui.auth.AuthUI(firebase.auth());

This is what I can see when I click the link to the code in the developer tools. It sets the cursor to the position where you see the undefined.

throw Error('An AuthUI instance already exists for the key "'+c+'"');Un[c]=this;this.g=a;this.A=null;this.s=!1;Vn(this.g);this.v=undefined({apiKey:a.app.options.apiKey,authDomain:a.app.options.authDomain},a.app.name+"-firebaseui-temp").auth()

these are the versions I use:

"firebase": "^6.3.3",
"firebaseui": "^4.1.0"

[wti806]

In your bundled code, this.v=undefined({apiKey:a.app.options.apiKey,authDomain:a.app.options.authDomain},a.app.name+"-firebaseui-temp").auth()
doesn't seem right. It should be
this.v=firebase.initializeApp({apiKey:a.app.options.apiKey,authDomain:a.app.options.authDomain},a.app.name+"-firebaseui-temp").auth()

Can you also provide your package.json? I saw you are using @firebase when you import the firebase SDK. What you should do is: import * as firebase from 'firebase/app' and import 'firebase/auth'.

[wardberckmans]

I changed both imports and the issue is different now. This line in my code firebase.initializeApp(firebaseConfig); results to undefined(firebaseConfig);

This is the package.json content

{
  "name": "yololo",
  "private": true,
  "version": "0.0.1",
  "description": "yololo",
  "license": "MIT",
  "files": [
    "dist/"
  ],
  "scripts": {
    "build": "stencil build",
    "start": "stencil build --dev --watch --serve",
    "test": "stencil test --spec --e2e",
    "test.watch": "stencil test --spec --e2e --watch"
  },
  "dependencies": {
    "@ionic/core": "^4.7.1",
    "firebase": "^6.3.3",
    "firebaseui": "^4.1.0"
  },
  "devDependencies": {
    "@stencil/core": "^1.2.2"
  }
}

[wti806]

I suspected the issue was with your bundler config. I think you will need to exclude the external libs in your bundler config. I don't think the bug is in firebase or firebaseui.

[wardberckmans]

ok makes sense. I will try to find out how to do this. Thx for the help!

[jsolum]

I was temporarily able to fix this by changing the node module's import statement (in the esm.js file) to have import firebase from 'firebase/app' instead of import * as firebase from 'firebase/app', which isn't really an ideal solution. I think @wti806 is correct, that this is probably a bundler config issue, which unfortunately I am not familiar enough with this to know how to fix.

[acoreyj]

I'm having this same issue with Rollup. I think the import in firebaseui is incorrect

[underyx]

I ended up with installing https://github.com/rollup/plugins/tree/master/packages/replace and using this stupid solution in my rollup plugins config:

		replace({
			"import * as firebase from 'firebase/app';": "import firebase from 'firebase/app';"
		}),

[akauppi]

This issue is still there, and reproducible in my repo: akauppi/GroundLevel-firebase-es#18

I don't think the above positively nails it as a bundler configuration problem, and the validity of Firebase and FirebaseUI modules, when used as pure ES modules should be checked.

[akauppi]

Looking back at this (reading all the comments), it's pretty clear to me.

The discussions mention "bundler configs" but I think the common factor is that none of us use them - in the traditional sense at least. We're trying to bake FirebaseUI into native ES module systems. That should be possible.

Related issue:

• Upgrade dialog-polyfill to 0.5 to support ES module imports #674

[akauppi]

ES import in FirebaseUI 4.7.1 has been changed, for the better.

May I suggest closing this issue, since current remaining issues are best discussed elsewhere.