title: _firebase_js__WEBPACK_IMPORTED_MODULE_9__.db.collection is not a function
body: <p>I learned firebase 8 and now the firebase 9 update is confusing me. i am trying to connect to cloud firestore but it always give me this error
  <em>firebase_js__WEBPACK_IMPORTED_MODULE_9</em>_.db.collection is not a function. already read the documentation but still cant figure out what is wrong.</p>
  <pre><code>    import React ,{useEffect, useState} from 'react';
  import CheckoutProduct from './CheckoutProduct';
  import &quot;./Payment.css&quot;;
  import {useStateValue} from &quot;./StateProvider&quot;;
  import {Link, useNavigate} from &quot;react-router-dom&quot;;
  import {CardElement, useStripe, useElements} from &quot;@stripe/react-stripe-js&quot;;
  import CurrencyFormat from 'react-currency-format';
  import {getBasketTotal} from &quot;./reducer&quot;;
  import axios from &quot;./axios&quot;;
  import { collection, addDoc } from &quot;firebase/firestore&quot;; 
  import {db} from &quot;./firebase.js&quot;;
  
  
  
   const handleSubmit = async (event) =&gt; {
          // do all the fancy stripe stuff...
          event.preventDefault();
          setProcessing(true);
  
          const payload = await stripe.confirmCardPayment(clientSecret, {
              payment_method: {
                  card: elements.getElement(CardElement)
              }
          }).then(({ paymentIntent }) =&gt; {
              // paymentIntent = payment confirmation
  
              setSucceeded(true);
              setError(null)
              setProcessing(false)
  
  
  
              db
                .collection('users')
                .doc(user?.uid)
                .collection('orders')
                .doc(paymentIntent.id)
                .set({
                    basket: basket,
                    amount: paymentIntent.amount,
                    created: paymentIntent.created
                })
  
              dispatch({
                  type:'EMPTY_BASKET'
              })
              navigate('/orders', {replace :true})
          })
  
      }
  
  </code></pre>