Reactfire preventing lazy loading of firebase modules

When using ReactFire I want to lazy load Firestore to reduce build initial build size and improve load times. When using ReactFire lazy loading firestore does not happen even while using import('firebase/firestore').

I have included a version that does not use ReactFire with working lazy loading as shown by the initialisation time. I have also included a version that does use ReactFire where I am trying to use lazy loading but I believe it is not working.

I noticed this in a Nextjs project with the bundle analyzer but haven’t included Nextjs in the examples for simplicity.

Version info

React: 17.02

Firebase: 9.4.1

ReactFire: 4.2.1

Test case

Test case without using ReactFire and lazy loading working: https://codesandbox.io/s/blissful-scott-05qj6?file=/src/App.tsx https://csb-9c5hc.netlify.app/

Test case with using ReactFire and lazy loading not working: https://codesandbox.io/s/elegant-roentgen-2iyt8?file=/src/App.tsx https://csb-2iyt8.netlify.app/

You can use the network tab to see that 6 networks requests are made without ReactFire but only 5 are made with using it, you can also see the breakdown of chunks in the lighthouse analysis.

Lighthouse Treemap without ReactFire Lighthouse Treemap with ReactFire

This is quite a big blocker for me so any help would be appreciated.

Steps to reproduce

Open the two codesandbox’s/netlify deployments above.

Expected behavior

Firestore is loaded in a separate chunk.

Actual behavior

Firestore is loaded in the initial chunk.

[jhuleatt]

It seems that just using FirebaseAppProvider (without any call at all to import or lazy import Firestore) is enough to pull Firestore and Storage into the bundle 😬 🤯

I’m not sure why, because FirebaseAppProvider doesn’t import either of those. It only imports the following:

https://github.com/FirebaseExtended/reactfire/blob/f768f4d3c3be4ab5a3611143b8ceda19ede1dc95/src/firebaseApp.tsx#L1-L2

When I try to just import getApps, initializeApp, registerVersion directly in an app (without importing FirebaseAppProvider), Firestore and Storage are NOT included in the build, so it doesn’t appear to be a bug in the Firebase JS SDK itself.

I think it has something to do with our build.

---

UPDATE: After investigating more, I didn’t have tree shaking properly enabled in my tests for my comment above. Once I got tree shaking set up, the extra stuff was dropped from my bundle

[jhuleatt]

Hi @Mattinton, this is really interesting, thanks for the repros.

My first thought was that maybe we were accidentally only exporting the .cjs build of ReactFire, but we do have the module field in our package.json, so I don’t think that’s it. Will keep investigating.