Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

esm build seems to be broken (initializeApp is not a function)

See original GitHub issue

Operating System version: macOS Mojave 10.14.5
Browser version: Chrome 76
Firebase UI version: 4.2.0
Firebase SDK version: 7.2.0

Trying to import firebaseui as described in the docs for webpack users throws a runtime error:

Uncaught TypeError: firebase_app__WEBPACK_IMPORTED_MODULE_0__.initializeApp is not a function
    at new Vn (esm.js:406)
    at Module../src/client.js (client.js:28)
    at __webpack_require__ (bootstrap:63)
    at bootstrap:198
    at bootstrap:198

Warning are also shown at build time:

WARNING in ./node_modules/firebaseui/dist/esm.js 192:218-231
"export 'auth' (imported as 'firebase') was not found in 'firebase/app'
 @ ./src/client.js

WARNING in ./node_modules/firebaseui/dist/esm.js 193:159-172
"export 'auth' (imported as 'firebase') was not found in 'firebase/app'
 @ ./src/client.js

WARNING in ./node_modules/firebaseui/dist/esm.js 193:229-242
"export 'auth' (imported as 'firebase') was not found in 'firebase/app'
 @ ./src/client.js

WARNING in ./node_modules/firebaseui/dist/esm.js 193:320-333
"export 'auth' (imported as 'firebase') was not found in 'firebase/app'
 @ ./src/client.js

... and so on

Relevant Code:

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

firebase.initializeApp({
  apiKey: '***',
  authDomain: '***',
  databaseURL: '***',
  projectId: '***',
  storageBucket: '***',
  messagingSenderId: '***',
  appId: '***',
});

const auth = firebase.auth();
new firebaseui.auth.AuthUI(auth);

In order to solve the problem I had to import the npm build instead like so:

import * as firebaseui from 'firebaseui/dist/npm';

After that, it started to work fine and the warnings at build time are also gone.

Issue Analytics

State:
Created 4 years ago
Reactions:2
Comments:8 (2 by maintainers)

Top GitHub Comments

1reaction

wti806commented, Oct 14, 2019

You need to import the Firebase Core SDK as follow:

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

0reactions

dwivedithedevcommented, Jun 6, 2020

import * as firebase from “firebase/app”; import “firebase/auth”;

Why don’t they write this in the main docs?! It fixed the issue I was having when implementing the same in svelteJS based webapp.

Top Results From Across the Web

firebase.firestore() is not a function when trying to initialize ...

For me, the issue came from using the wrong import. I create the firebase app elsewhere in my code with initializeApp . This...

export 'initializeapp' (imported as 'initializeapp') was not found ...

Attempted import error: 'initializeApp' is not exported from 'firebase/app' (imported as ... I am building my first firebase app using JS and Webpack....

_firebase2.default.initializeApp is not a function - Google Groups

Your first import looks wrong. Try using: import * as firebase from 'firebase';. instead of just: import 'firebase';. Also make sure you are...

Firebase JavaScript SDK Release Notes - Google

Fixed the Node.js ESM bundle to build from the Node.js entry point (it was ... Fixed a packaging issue that broke the Firebase...

oss-product.txt - Glide Apps

Run `yarn build` in Firebase package 1. ... if and wherever such third-party notices normally appear. ... initializeApp({ apiKey: '<your-api-key>', ...