ES6 module cannot import firebase

[maxwell8888]

[REQUIRED] Describe your environment

• Operating System version: MacOS 10.13.6
• Browser version: Chrome 83.0.4103.61
• Firebase UI version: 3.5.2
• Firebase SDK version: 7.14.0

[REQUIRED] Describe the problem

Steps to reproduce:

I am using import * as firebaseui from 'firebaseui' to import firebaseui as an ES module (built with rollup) from node_modules/firebaseui/dist/esm.js. This module tries to import firebase using import * as firebase from 'firebase/app' from node_modules/firebase/app/dist/index.esm.js, however this does not work an errors with auth is not exported by node_modules/firebase/app/dist/index.esm.js. Instead it should be importing firebase with import firebase from 'firebase/app' which works as expected.

Relevant Code:

https://stackblitz.com/fork/firebase-issue-sandbox

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

var firebaseConfig = {
 // ...
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
import * as firebaseui from "firebaseui";

[bojeil-google]

Try the following:

// tslint:disable-next-line
import * as firebase from 'firebase/app';
// tslint:disable-next-line
import 'firebase/auth';
// Import FirebaseUI dependencies.
import * as firebaseui from 'firebaseui';

[maxwell8888]

import * as firebase from 'firebase/app'; doesn't work for importing the ES module build because node_modules/firebase/dist/index.esm.js has a default export - see line 2: export { default } from '@firebase/app'; so import * as firebase from 'firebase/app'; doesn't make sense. I think import * as firebase from 'firebase/app'; is only for when you are using a build step like Typescript or Webpack, in which case there are probably using the Commonjs build an not the ESmodule build at all.

[bojeil-google]

This repo is for firebaseui issues. For firebase import issues, please file directly in firebase-js-sdk

[maxwell8888]

The issue is with firebaseui not firebase. The issue is that firebaseuis ES module build node_modules/firebaseui/dist/esm.js should be importing firebase from the firebase ES module build node_modules/firebase/app/dist/index.esm.js but it doesn't. Simply the first line of your ES module build needs to be import firebase from 'firebase/app'; instead of import * as firebase from 'firebase/app';.

[bojeil-google]

This was the recommendation that Firebase has given for module bundlers and as far as I can tell all ES6 consumption is via module bundlers.

[maxwell8888]

@bojeil-google They are referring to bundling CommonJS/UMD with "a bundler (like Browserify or webpack)". Webpack and browserify will not use the ES module build, they will use the CommonJS/UMD build. To use the ES module build you need a simple bundler like rollup that only resolves bare module specifiers (i.e. import obj from "lib" into import obj from "./lib.js").

[code14214]

Ran into the same problem and solved it the same way as @maxwell8888 described it very correctly.
So we do have a bug here, which is posted in the correct project and we have the solution to that problem as well. Why not fix it? cheers

[IanBellomy]

Running into the same issue I think. Using rollup resolve with a firebaseui import and get the same message as reported.

Per @maxwell8888's note, @bojeil-google's suggestion to use import * as firebase... causes other issues.

Also tried @maxwell8888 's solution but ended up with a new issue...

[!] Error: 'default' is not exported by node_modules/dialog-polyfill/dialog-polyfill.js, imported by node_modules/firebaseui/dist/esm.js

and had to make the following change:

// import dialogPolyfill from 'dialog-polyfill';
import * as dialogPolyfill from 'dialog-polyfill';

[brandonaaron]

I also experienced this issue and used "string-replace-loader" to replace the import * as firebase from 'firebase/app' to import firebase from 'firebase/app'. This was inspired by an older issue in this project that I stumbled on.

  {
    test: /esm\.js$/,
    loader: 'string-replace-loader',
    include: path.resolve('node_modules/firebaseui/dist'),
    query: {
      search: "import * as firebase from 'firebase/app';",
      replace: "import firebase from 'firebase/app';",
    }
  }

I'm using the latest preact-cli and I'm not sure this is a universal fix for other setups but this worked for me. Open source project for reference.

@bojeil-google this still seems like an active issue related to esm builds.

[Doetheman]

Failed to compile.

./node_modules/firebaseui/dist/esm.js
Attempted import error: 'app' is not exported from 'firebase/app' (imported as 'firebase').

Been stuck on this and been a pain in the ass. No solution resolved this error.
import "firebase/firestore";
// tslint:disable-next-line
import * as firebase from 'firebase/app';
// tslint:disable-next-line
import 'firebase/auth';
// Import FirebaseUI dependencies.
import * as firebaseui from 'firebaseui';

class App extends Component {
componentDidMount() {
const fbase = firebase.initializeApp(firebaseConfig);
const uiConfig = {
signInSuccessUrl: "https://netflix-clone-ankur.herokuapp.com/", //This URL is used to return to that page when we got success response for phone authentication.
signInOptions: [firebase.auth.PhoneAuthProvider.PROVIDER_ID],
tosUrl: "https://netflix-clone-ankur.herokuapp.com/"
};
var ui = new firebaseui.auth.AuthUI(firebase.auth());
ui.start("#firebaseui-auth-container", uiConfig);
}
render() {
return (
<>

REACT PHONE AUTHENTICATION

</>
)
}
}

export default App;

[LeadDreamer]

@bojeil-google Your comment "This is the recommendation..." is out-of-date; noting DIRECTLY FROM THE DOCUMENTATION you cite (https://firebase.google.com/docs/web/setup#using-module-bundlers):

// Firebase App (the core Firebase SDK) is always required and must be listed first
import firebase from "firebase/app";
// If you are using v7 or any earlier version of the JS SDK, you should import firebase using namespace import
// import * as firebase from "firebase/app"

I note your package.json has the line:

    "firebase": "^7.23.0",

Since current version is at least 8.1.1, why haven't you come up-to-date? I am also using CRA (and have no reason yet to eject), so hacking webpack configuration is not reasonable. Come up to date, and everybody will be happy and stop bugging you.

[bojeil-google]

v4.7.1 updates ES6 import:
We now import firebase via import firebase from 'firebase/app' as recommended in version 8+