Modular SDK (v9+) tree-shaking in Firebase - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import only the Firestore function needed to get a document.

Firebase

import { getDoc, [1] } from 'firebase/firestore';

Drag options to blanks, or click blank then click option'

AinitializeApp

Bcollection

CgetDocs

Ddoc

Attempts:

3 left

💡 Hint

Common Mistakes

Importing the entire Firestore module instead of specific functions.

Using 'collection' when you need a document reference.

The doc function is needed to specify the document reference for getDoc. Importing only what you need helps keep the bundle small.

2fill in blank

medium

Complete the code to initialize Firebase app with the modular SDK.

Firebase

import { initializeApp } from 'firebase/app';

const firebaseConfig = { /* config values */ };
const app = [1](firebaseConfig);

Drag options to blanks, or click blank then click option'

AinitializeApp

BgetApp

CcreateApp

DstartApp

Attempts:

3 left

💡 Hint

Common Mistakes

Using getApp before initializing the app.

Trying to use non-existent functions like createApp or startApp.

initializeApp is the correct function to start a Firebase app instance with the given configuration.

3fill in blank

hard

Fix the error in importing Firestore functions for reading a document.

Firebase

import { getDoc, doc, [1] } from 'firebase/firestore';

Drag options to blanks, or click blank then click option'

AinitializeApp

Bcollection

CgetDocs

DgetDoc

Attempts:

3 left

💡 Hint

Common Mistakes

Importing getDoc twice.

Importing initializeApp from Firestore instead of 'firebase/app'.

The collection function is often needed to create references to collections, which is useful when navigating Firestore structure. Importing getDoc twice is redundant and causes errors.

4fill in blank

hard

Fill both blanks to create a Firestore document reference and read it.

Firebase

import { getFirestore, [1], [2] } from 'firebase/firestore';

const db = getFirestore(app);
const docRef = [1](db, 'users', 'user123');
const docSnap = await [2](docRef);

Drag options to blanks, or click blank then click option'

Adoc

BgetDoc

Ccollection

DinitializeApp

Attempts:

3 left

💡 Hint

Common Mistakes

Using collection instead of doc for document references.

Mixing up getDoc and getDocs.

doc creates a reference to a specific document. getDoc reads the document data. Using these two functions together is the modular way to read a Firestore document.

5fill in blank

hard

Fill all three blanks to import, initialize, and get a Firestore document using modular SDK.

Firebase

import { [1] } from 'firebase/app';
import { getFirestore, [2], [3] } from 'firebase/firestore';

const app = [1](firebaseConfig);
const db = getFirestore(app);
const docRef = [2](db, 'products', 'prod001');
const docSnap = await [3](docRef);

Drag options to blanks, or click blank then click option'

AinitializeApp

Bdoc

CgetDoc

Dcollection

Attempts:

3 left

💡 Hint

Common Mistakes

Importing and calling initializeApp incorrectly.

Using collection instead of doc for document references.

Confusing getDoc with getDocs.

First, initializeApp starts the Firebase app. Then doc creates a document reference. Finally, getDoc reads the document data. This sequence uses modular imports to keep the code efficient.

Practice

1. What is the main benefit of using Firebase Modular SDK (v9+) with tree-shaking?

easy

A. It reduces app size by including only needed Firebase features.

B. It automatically backs up your Firebase database.

C. It increases the number of Firebase services loaded by default.

D. It disables Firebase authentication for faster login.

Solution

1. Step 1: Understand tree-shaking purpose

   Tree-shaking removes unused code to reduce app size and improve performance.

2. Step 2: Apply to Firebase Modular SDK

   Using modular imports in Firebase v9+ allows only needed services to be included, enabling tree-shaking.

3. Final Answer:

   It reduces app size by including only needed Firebase features. -> Option A

4. Quick Check:

   Tree-shaking = smaller app size [OK]

Hint: Remember: modular imports keep only what you use [OK]

Common Mistakes:

• Thinking tree-shaking adds features automatically
• Confusing tree-shaking with backup or security
• Assuming all Firebase services load by default

2. Which import statement correctly uses Firebase Modular SDK (v9+) for Firestore to enable tree-shaking?

easy

A. import { Firestore } from 'firebase/app';

B. import { getFirestore } from 'firebase/firestore';

C. import firebase from 'firebase';

D. import * as firestore from 'firebase/firestore';

Solution

1. Step 1: Identify modular import syntax

   Firebase v9+ uses named imports from specific service packages like 'firebase/firestore'.

2. Step 2: Check each option

   import { getFirestore } from 'firebase/firestore'; correctly imports getFirestore from 'firebase/firestore' for modular usage. Others use old or incorrect syntax.

3. Final Answer:

   import { getFirestore } from 'firebase/firestore'; -> Option B

4. Quick Check:

   Modular import = named import from service path [OK]

Hint: Use named imports from 'firebase/service' for modular SDK [OK]

Common Mistakes:

• Using default import from 'firebase' package
• Importing from 'firebase/app' instead of service path
• Using wildcard imports that prevent tree-shaking

3. Given the code below, what will be the output in the console?

import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';

const app = initializeApp({ apiKey: 'abc', authDomain: 'xyz' });
const auth = getAuth(app);
console.log(typeof auth.currentUser);

medium

A. 'null'

B. 'undefined'

C. 'function'

D. 'object'

Solution

1. Step 1: Understand getAuth and currentUser

   getAuth returns an Auth instance; currentUser is a property that is either null or a user object.

2. Step 2: Check typeof currentUser before login

   Before login, currentUser is null, and typeof null is 'object' in JavaScript.

3. Final Answer:

   'object' -> Option D

4. Quick Check:

   typeof null = 'object' in JS [OK]

Hint: Remember: typeof null returns 'object' in JavaScript [OK]

Common Mistakes:

• Assuming currentUser is undefined before login
• Confusing typeof null with 'null' string
• Thinking currentUser is a function

4. Identify the error in this Firebase Modular SDK (v9+) import code:

import { initializeApp } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';

const app = initializeApp(config);
const db = getFirestore();

medium

A. getFirestore() requires the app instance as an argument.

B. initializeApp should be imported from 'firebase/firestore'.

C. config object is missing from the code.

D. getFirestore must be called before initializeApp.

Solution

1. Step 1: Check usage of initializeApp

   initializeApp requires a config object to initialize Firebase app.

2. Step 2: Verify presence of config object

   The code uses 'config' but does not define or import it, causing a ReferenceError.

3. Final Answer:

   config object is missing from the code. -> Option C

4. Quick Check:

   Missing config causes initialization error [OK]

Hint: Always define config before initializeApp call [OK]

Common Mistakes:

• Forgetting to pass app to getFirestore (optional but recommended)
• Importing initializeApp from wrong package
• Calling getFirestore before app initialization

5. You want to optimize your Firebase app bundle size by importing only Authentication and Firestore services using Modular SDK (v9+). Which code snippet correctly achieves this with tree-shaking?

hard

A. import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';
import { getFirestore } from 'firebase/firestore';

const app = initializeApp(config);
const auth = getAuth(app);
const db = getFirestore(app);

B. import firebase from 'firebase';

const app = firebase.initializeApp(config);
const auth = firebase.auth();
const db = firebase.firestore();

C. import { initializeApp, getAuth, getFirestore } from 'firebase/app';

const app = initializeApp(config);
const auth = getAuth(app);
const db = getFirestore(app);

D. import { initializeApp } from 'firebase/app';
import { auth, firestore } from 'firebase';

const app = initializeApp(config);
const authInstance = auth(app);
const dbInstance = firestore(app);

Solution

1. Step 1: Use modular imports from correct packages

   Authentication and Firestore must be imported from 'firebase/auth' and 'firebase/firestore' respectively for tree-shaking.

2. Step 2: Initialize app and pass it to service getters

   Initialize app with config, then pass app instance to getAuth and getFirestore functions.

3. Step 3: Check each option

   import { initializeApp } from 'firebase/app'; import { getAuth } from 'firebase/auth'; import { getFirestore } from 'firebase/firestore'; const app = initializeApp(config); const auth = getAuth(app); const db = getFirestore(app); correctly imports and initializes services modularly. Others use old syntax or wrong imports preventing tree-shaking.

4. Final Answer:

   Option A code snippet -> Option A

5. Quick Check:

   Modular imports + app passed = optimized bundle [OK]

Hint: Import each service from its own package and pass app [OK]

Common Mistakes:

• Using default firebase import disables tree-shaking
• Importing multiple services from 'firebase/app' only
• Not passing app instance to service getters