title: This is driving me crazy - Line 42:40: 'firebase' is not defined no-undef
body: <p>I'm having trouble figuring out what is wrong with my code. I am still learning react so please bear with me :) This is coming from a tutorial I am following, and while they have no issue, for some reason my code is not compiling. Driving me nuts for 8 hours already! please scroll down to where ** ** is thanks guys!!</p>
  <pre><code>import React, { useState } from 'react'
  import { Button } from &quot;@material-ui/core&quot;;
  import { storage, db } from &quot;./firebase&quot;;
  
  function ImageUpload({username}) {
      const [image, setImage] = useState('null');
      const [progress, setProgress] = useState(0);
      const [caption, setCaption] = useState('');
  
      const handleChange = (e) =&gt; {
          if (e.target.files[0]) {
              setImage(e.target.files[0]);
          }
      };
  
      const handleUpload = () =&gt; {
          const uploadTask = storage.ref(`images/${image.name}`).put(image);
  
          uploadTask.on(
              &quot;state_changed&quot;,
              (snapshot) =&gt; {
                  // progress function...
                  const progress = Math.round(
                  (snapshot.bytesTransferred / snapshot.totalBytes) * 100
                  );
                  setProgress(progress);
              },
              (error) =&gt; {
                  // error function...
                  console.log(error);
                  alert(error.message);
              },
              () =&gt; {
                  // complete function...
                  storage
                      .ref(&quot;images&quot;)
                      .child(image.name)
                      .getDownloadURL()
                      .then(url =&gt; {
                          // post image inside db
                          db.collection(&quot;posts&quot;).add({
                              **timestamp: firebase.firestore.FieldValue.serverTimestamp(),**
                              caption: caption,
                              imageUrl: url,
                              username: username,
                          })
  
                      })
              }
          )
      }
  
      return (
          &lt;div&gt;
              &lt;h1&gt;abc&lt;/h1&gt;
  
              &lt;input type=&quot;text&quot; placeholder='Enter a caption...' onChange={event =&gt; setCaption(event.target.value)} value={caption}/&gt;
              &lt;input type=&quot;file&quot; onChange={handleChange} /&gt;
              &lt;Button onClick={handleUpload}&gt;
                  Upload
              &lt;/Button&gt;
          &lt;/div&gt;
      )
  }
  
  export default ImageUpload
  </code></pre>