Reactfire preventing lazy loading of firebase modules

Offen

#488 erstellt am 18.11.2021 7 Kommentare 1 Reaktion 1 zugewiesene Person Auf GitHub ansehen

@jhuleatt arbeitet bereits daran.

Seit 19.11.2021.

Bewertung

Dieses Issue wurde noch nicht bewertet.

Beschreibung

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.

Vorherrschende Sprache: TypeScript
Sterne: 3.6k
Forks: 403
Ø Merge: 5 T. 1 Std.
Gemergte PRs (30 T.): 10

Beitragsleitfaden

Beitragsleitfaden öffnen

Erste Schritte

Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
Forken Sie das Repository und arbeiten Sie in einem Branch.
Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus FirebaseExtended/reactfire

No bindings for Firebase AI Logic Offen

Schwierigkeit 5/5 Über eine Woche Anfängerfreundlichkeit 38/100

FirebaseExtended/reactfire#801 · Erstellt am 25.8.2026
Suspense mode resumes with the previous observable's value on React 19 Offen

v5

Schwierigkeit 4/5 3-5 Tage Anfängerfreundlichkeit 48/100

FirebaseExtended/reactfire#793 · Erstellt am 12.8.2026
The observable cache leaks subscriptions and is shared across SSR requests Offen

v5

Schwierigkeit 4/5 3-5 Tage Anfängerfreundlichkeit 35/100

FirebaseExtended/reactfire#790 · 2 Kommentare · Erstellt am 11.8.2026
React 19 foundation: run tests against 19, then drop React 16/17 Offen

v5

Schwierigkeit 4/5 3-5 Tage Anfängerfreundlichkeit 55/100

FirebaseExtended/reactfire#789 · Erstellt am 11.8.2026
Tests that keep passing when the code they cover is broken Offen

Schwierigkeit 5/5 Über eine Woche Anfängerfreundlichkeit 35/100

FirebaseExtended/reactfire#788 · Erstellt am 10.8.2026

Alle Issues in FirebaseExtended/reactfire