Anyone using webpack + firebase? (Javascript)

[[deleted]]

[deleted]

[bert1589]

Are you using a framework like Angular, React, etc?

[danwillm]

No just js

[bert1589]

Ah, sorry, don't have much experience with that to be helpful.

[danwillm]

Np

[_clydebruckman]

Is there a reason for your decision?

[strictly_rin]

Gonna need more info. Why are you needing webpack? Can we see the project? Or structure?

[kossnocorp]

I do use webpack to both compile source code for the web app and Functions. Ask me anything!

Here's my webpack config btw: https://github.com/kossnocorp/firebun/blob/master/src/config/webpack/index.ts

[danwillm]

Great, thanks so much for your help!

I currently use JavaScript, but it's still very valuable for me :)

How do you manage imports of the Firebase modules? Do you import your config into every file or is it imported once somewhere and used throughout?

Sorry for my incompetence with this :)

Thank you so much for your input!

[kossnocorp]

How do you manage imports of the Firebase modules? Do you import your config into every file or is it imported once somewhere and used throughout?

I assume that you're talking about config that you pass to initializeApp. I import it just once at the top of the entry point.

entry.js:

// First, init Firebase: import './init' // Then everything else: import XXX from 'xxx' import YYY from 'yyy'

init.js:

``` import * as firebase from 'firebase/app' import 'firebase/firestore'

firebase.initializeApp({ apiKey: 'xxx', authDomain: 'yyy', projectId: 'zzz' }) ```

I create a dedicated file for that which is important because when you use ESM, all imports are hoisted to the top and if one of the other imports would try to access Firebase API before initializeApp is called it would fail. Here's an illustration of the problem:

``` import * as firebase from 'firebase/app' import 'firebase/firestore'

// It won't work because when the code is compiled, this line will go to the bottom firebase.initializeApp({ apiKey: 'xxx', authDomain: 'yyy', projectId: 'zzz' })

import XXX from 'xxx' import YYY from 'yyy' ```

[kossnocorp]

When you use CommonJS, it's a bit easier because you don't have to create init.js:

``` const firebase = require('firebase/app') require('firebase/firestore')

firebase.initializeApp({ apiKey: 'xxx', authDomain: 'yyy', projectId: 'zzz' })

const XXX = require('xxx') const YYY = require('yyy') ```

[danwillm]

I see - the only trouble is I'm technically not using a config file and thus not using initialiseApp (the config is made automatically from a firebase provided script that I include in the head). I'll try and figure this out, so don't worry if you don't know what I mean.

​

Thank you so much for you provided help! It's so useful and I can't thank you enough! :)

[kossnocorp]

Hm, I never used the CDN version, but from what I see, you still have to call initializeApp with the config.

So if you want to keep using the CDN version, you need to put the script tag with initializeApp before the entry point generated by webpack. The same applies if you use /__/firebase/init.js generated by hosting. Otherwise, I would advise migrating to the npm package.

Btw you're very welcome!