Reactfire preventing lazy loading of firebase modules

オープン

#488 2021年11月18日に作成コメント 7 件リアクション 1 件担当者 1 名 GitHub で見る

@jhuleatt がすでに取り組んでいます。

2021年11月19日から。

評価

この issue はまだ評価されていません。

説明

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.

主要言語: TypeScript
スター: 3.6k
フォーク: 403
平均マージ: 5日 1時間
マージ済み PR（30日）: 10

コントリビューションガイド

コントリビューションガイドを開く

はじめの一歩

issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
リポジトリをフォークし、ブランチを切って変更します。
issue 番号を参照したプルリクエストを送ります。

FirebaseExtended/reactfire のほかの issue

No bindings for Firebase AI Logic オープン

難易度 5/5 1週間以上初心者へのやさしさ 38/100

FirebaseExtended/reactfire#801 · 2026年8月25日に作成
Suspense mode resumes with the previous observable's value on React 19 オープン

v5

難易度 4/5 3〜5日初心者へのやさしさ 48/100

FirebaseExtended/reactfire#793 · 2026年8月12日に作成
The observable cache leaks subscriptions and is shared across SSR requests オープン

v5

難易度 4/5 3〜5日初心者へのやさしさ 35/100

FirebaseExtended/reactfire#790 · コメント 2 件 · 2026年8月11日に作成
React 19 foundation: run tests against 19, then drop React 16/17 オープン

v5

難易度 4/5 3〜5日初心者へのやさしさ 55/100

FirebaseExtended/reactfire#789 · 2026年8月11日に作成
Tests that keep passing when the code they cover is broken オープン

難易度 5/5 1週間以上初心者へのやさしさ 35/100

FirebaseExtended/reactfire#788 · 2026年8月10日に作成

FirebaseExtended/reactfire の issue をすべて見る

似ている issue

Tapping "Use video" more than once submits the verification twice オープン

難易度 2/5 1〜3時間初心者へのやさしさ 84/100

bcgov/bc-wallet-mobile#4761 · コメント 1 件 · 2026年9月24日に作成
fix(pg-meta): schemas.update and schemas.remove DO blocks fail when a name contains "$$" オープン

external-issue to-triage

難易度 2/5 1〜3時間初心者へのやさしさ 88/100

supabase/supabase#50882 · 2026年9月24日に作成
Azure Sandboxes: Small and ExtraSmall tiers always fail to deploy (disk request exceeds tier maximum) オープン

area-deployment area-integrations triage:bot-seen

難易度 2/5 半日初心者へのやさしさ 86/100

microsoft/aspire#20459 · コメント 1 件 · 2026年9月24日に作成
Mobile builds drop the telemetry and crash-reporting keys, so opting in sends nothing オープン

難易度 2/5 1〜3時間初心者へのやさしさ 82/100

0xMiden/wallet#1118 · 2026年9月24日に作成
[P3] Handle clipboard failures and announce copy status accessibly オープン

refactor

難易度 2/5 1〜3時間初心者へのやさしさ 84/100

nteract/semiotic#1534 · 2026年9月24日に作成

TypeScript の issue をもっと見る