ES6 module cannot import firebase

[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";

[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.

[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';