how to bundle firebase and firebaseui #3519

lhk · 2019-09-15T15:13:08Z

lhk
Sep 15, 2019

❔ Question

How can I bundle Firebase and FirebaseUI, installed with npm, with Parcel ?

🔦 Context

My webapp uses FirebaseUI to let users log in. The installation instructions list a variety of options to install FirebaseUI: https://github.com/firebase/firebaseui-web#installation

by adding firebase's CDN and adding <script> tags to the HTML
by installing and importing npm modules

The first option works fine for me. But CDN imports in the HTML are messy, I would like to use parcel to bundle the imports instead.
As soon as I add the import statements to my typescript code, FirebaseUI stops working and complains that firebaseui.auth is undefined. It works only, if there are only the CDN script tags in the HTML.

💻 Code Sample

To run the following code, you have to enter a correct Firebase config in the typescript code and bundle index.html with parcel. Please note, you can't just open the compiled html in your browser. Firebase expects a hosted environment.

npm install -g serve
serve dist/

index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Sample FirebaseUI App</title>

    <script src="https://www.gstatic.com/firebasejs/6.6.1/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/6.6.1/firebase-auth.js"></script>
    <script src="https://cdn.firebase.com/libs/firebaseui/4.2.0/firebaseui.js"></script>
    <link type="text/css" rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/4.2.0/firebaseui.css" />

    <script type="text/javascript" src="index.ts"></script>
  </head>
  <body>
    <h1>Welcome to My Awesome App</h1>
    <div id="firebaseui-auth-container"></div>
  </body>
</html>

index.ts:


// TODO: remove these imports to make it work
import firebase from "firebase"
import "firebase/auth"
import firebaseui from "firebaseui"

window.onload = () => {
    // this is defined
    console.log("firebase.auth", firebase.auth);

    // this is undefined
    console.log("firebaseui.auth", firebaseui.auth);

    // configure firebase
    var config = {
          // TODO: add your Firebase web app credentials to make it work
      };

    firebase.initializeApp(config);

    // code crashes here
    var ui = new firebaseui.auth.AuthUI(firebase.auth())

    var uiConfig = {
        callbacks: {
            signInSuccessWithAuthResult: function (authResult, redirectUrl) {
                return false;
            }
        },
        signInFlow: 'popup',
        signInOptions: [
            firebase.auth.EmailAuthProvider.PROVIDER_ID
        ]
    };
    ui.start('#firebaseui-auth-container', uiConfig);
}

package.json:

{
  "name": "temp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "firebase": "^6.6.1",
    "firebaseui": "^4.2.0",
    "serve": "^11.1.0"
  },
  "devDependencies": {
    "typescript": "^3.6.3"
  }
}

🌍 Your Environment

Software	Version(s)
Parcel	1.12.3
Node	v12.10.0
npm/Yarn	6.10.3
Operating System	64bit Pop!_os

mischnic · 2019-10-01T14:16:48Z

mischnic
Oct 1, 2019
Collaborator

This should work 🤷‍♂

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

0 replies

lhk · 2019-10-01T15:30:38Z

lhk
Oct 1, 2019
Author

@mischnic did you try it, does it work for you ?

0 replies

mischnic · 2019-10-01T15:49:32Z

mischnic
Oct 1, 2019
Collaborator

According to the documentation, it should. I've looked at the published firebaseui npm package and this is the import syntax that is needed. Don't know if this is firebase's fault or Parcel does something wrong.

0 replies

dawogfather · 2019-10-06T15:09:50Z

dawogfather
Oct 6, 2019

Same issue here. Did you get it resolved? I was using the above import syntax exactly and it doesn’t work.

0 replies

mischnic · 2019-10-06T15:34:33Z

mischnic
Oct 6, 2019
Collaborator

(Maybe related to #3387?)

0 replies

lhk · 2019-10-07T16:47:35Z

lhk
Oct 7, 2019
Author

@dawogfather, I haven't gotten it resolved yet :(
As a workaround I'm importing the dependencies in html. Not maintainable at all, but currently seems like the easiest way.

0 replies

lhk · 2019-10-07T16:49:18Z

lhk
Oct 7, 2019
Author

@mischnic , the linked issue does indeed look very similar. Fingers crossed that the PR fixes

Do you know the correct procedure here?
Do I close the issue and wait for results from #3387, to maybe reopen it?
Or should I leave it open for now ?

0 replies

mischnic · 2019-10-07T16:54:09Z

mischnic
Oct 7, 2019
Collaborator

Let's keep both open until the next release with that PR and then test both issues.

0 replies

lhk · 2020-04-07T15:33:09Z

lhk
Apr 7, 2020
Author

not stale

0 replies

ninest · 2020-05-29T05:52:36Z

ninest
May 29, 2020

Is there a full example we can refer to? I found this one, but I'm not sure if it's the best because the config is directly in index.html, and they're not using the packages for firebase

1 reply

mischnic May 29, 2020
Collaborator

Does this help? https://github.com/parcel-bundler/parcel-benchmark-action/blob/master/benchmarks/react-hn/src/services/HNService.js

ninest · 2020-05-30T07:48:23Z

ninest
May 30, 2020

@mischnic Thanks for the help, but I figured it out. Not sure if this is the best way, but I made file called firebase.js:

import firebase from 'firebase/app';
import 'firebase/auth';

const firebaseConfig = {
  // config here
};
export const app = firebase.initializeApp(firebaseConfig);

Then whenever I need to use firebase, I can import in my script like this:

import { app } from './firebase.js';
import firebase from 'firebase/app';
import 'firebase/firestore';
import 'firebase/auth';

...

const db = firebase.firestore(app);

0 replies

ksmigiel · 2020-06-22T07:01:04Z

ksmigiel
Jun 22, 2020

I am also having problem with Parcel and firebase/firebaseui. CDN of course works, but when using npm modules I cannot import neither firebase or firebaseui successfully.

0 replies

ksmigiel · 2020-06-22T07:58:28Z

ksmigiel
Jun 22, 2020

Ok after some research I have managed to have working imports in Parcel by importing manually CommonJS instead of ES6 modules:

import firebase from "firebase/app/dist/index.cjs";
import "firebase/auth/dist/index.cjs";

import firebaseui from "firebaseui/dist/npm";
import "firebaseui/dist/firebaseui.css";

Anyone from Parcel Team could look into this why we need to do this? Is that connected with fact that firebase is exported using Google Closure Compiler?

1 reply

mischnic Jun 22, 2020
Collaborator

I'm not familiar with firebase, could you provide a JS sample that should work but throws an error?

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

how to bundle firebase and firebaseui #3519

{{title}}

Replies: 13 comments 2 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

how to bundle firebase and firebaseui #3519

lhk Sep 15, 2019

❔ Question

🔦 Context

💻 Code Sample

🌍 Your Environment

Replies: 13 comments · 2 replies

mischnic Oct 1, 2019 Collaborator

lhk Oct 1, 2019 Author

mischnic Oct 1, 2019 Collaborator

dawogfather Oct 6, 2019

mischnic Oct 6, 2019 Collaborator

lhk Oct 7, 2019 Author

lhk Oct 7, 2019 Author

mischnic Oct 7, 2019 Collaborator

lhk Apr 7, 2020 Author

ninest May 29, 2020

mischnic May 29, 2020 Collaborator

ninest May 30, 2020

ksmigiel Jun 22, 2020

ksmigiel Jun 22, 2020

mischnic Jun 22, 2020 Collaborator

lhk
Sep 15, 2019

Replies: 13 comments 2 replies

mischnic
Oct 1, 2019
Collaborator

lhk
Oct 1, 2019
Author

mischnic
Oct 1, 2019
Collaborator

dawogfather
Oct 6, 2019

mischnic
Oct 6, 2019
Collaborator

lhk
Oct 7, 2019
Author

lhk
Oct 7, 2019
Author

mischnic
Oct 7, 2019
Collaborator

lhk
Apr 7, 2020
Author

ninest
May 29, 2020

mischnic May 29, 2020
Collaborator

ninest
May 30, 2020

ksmigiel
Jun 22, 2020

ksmigiel
Jun 22, 2020

mischnic Jun 22, 2020
Collaborator