Why getting firebase is not defined error?

See also questions close to this topic

• how to change prettier format for react native

  my code formatting prettier didn't works well for react native, i don't understand where to config it but it works well with flutter

  from this code

        import { View, Text } from 'react-native'
      
      import React from 'react'
      
      export default function App() {
        return (
          <View>
      
      <Text>Apps</Text>   
  </View>
        )
      }
  

  it's formatted to this

  import {
    View,
    Text
  } from 'react-native'
  
  import React from 'react'
  
  export default function App() {
    return ( <
      View >
  
      <
      Text > Apps < /Text>
  
  
      <
      /View>
    )
  }
  
• MarkLogic server-side JavaScript and XQuery

  I am just starting using NoSQL MarkLogic DB and trying to choose for me the best query language to learn and use in future. On server side MarkLogic provides the possibility to use JavaScript API or XQuery API.

  I want to receive an advice. Which language is better to concentrate on and learn? JavaScript or XQuery?
• Popover in chrome extension using js

  My goal is I want to create a chrome extension like Toucan Extension. I want to highlight some paragraphs in random site then translate it to specific language. The problem is I do not have an idea on how to implement a popover in chrome extension like in the picture below.

  
• How can I fixed my problem"FirebaseError: Firebase: Error (auth/invalid-api-key)."

  My environment variable is ok. No comas and name mistakes but they given me error like "FirebaseError: Firebase: Error (auth/invalid-api-key)". How can I fixed it. Please Help me...

  This my .env file

  REACT_APP_apiKey=AIzaSyBWobnhbdeMdNpXXXXXXXXXXXXXXXXXXXX
  REACT_APP_authDomain=XXXXX.firebaseapp.com
  REACT_APP_projectId=XXXX
  REACT_APP_storageBucket=XXXXX.appspot.com
  REACT_APP_messagingSenderId=4997390XXXXX
  REACT_APP_appId=1:4997390XXXXX:web:cc7bc80aa1bdb78fXXXXXX
  REACT_APP_measurementId=G-M1XDXXXXXX
  

  This my firebase config file

  const firebaseConfig = {
    apiKey: process.env.REACT_APP_apiKey,
    authDomain: process.env.REACT_APP_authDomain,
    projectId: process.env.REACT_APP_projectId,
    storageBucket: process.env.REACT_APP_storageBucket,
    messagingSenderId: process.env.REACT_APP_messagingSenderId,
    appId: process.env.REACT_APP_appId,
    measurementId: process.env.REACT_APP_measurementId,
  };
  
  when I debugging firebaseConfig object
  
  console.log(firebaseConfig.apiKey);  ==========> undefined 
  console.log(firebaseConfig.authDomain);  ==========> undefined 
  console.log(firebaseConfig.projectId);  ==========> undefined 
  console.log(firebaseConfig.storageBucket); ==========> undefined 
  console.log(firebaseConfig.measurementId); ==========> undefined 
  console.log(firebaseConfig.appId); ==========> undefined 
  console.log(firebaseConfig.measurementId); ==========> undefined 
  
  

  client side given error this "FirebaseError: Firebase: Error (auth/invalid-api-key)"
• How to order comments in firebase firestore by createdAt

  I have a document in which there is a comments array of objects and each object has createdAt property. I want to sort all the comments that are inside the comments array using the createdAt property, so, a new comment comes to the top.

  I did some research and found that we can do this in firebase's real-time database but I want to do the ordering of data using firestore.

  Here is my code:

  import { useEffect, useRef, useState } from "react"
  // firebase import
  import { doc, onSnapshot, orderBy, query } from "firebase/firestore"
  
  import { db } from "../firebase/config"
  
  export const useDocument = (c, id, o) => {
    const [document, setDocument] = useState(null)
    const [error, setError] = useState(null)
  
    // realtime document data
    useEffect(() => {
      let docRef = doc(db, c, id)
  
      if (o) {
        docRef = query(docRef, orderBy("createdAt", "desc")) // this is not working
      }
  
      const unsubscribe = onSnapshot(
        docRef,
        (snapshot) => {
          // need to make sure the doc exists & has data
          if (snapshot.data()) {
            setDocument({ ...snapshot.data(), id: snapshot.id })
            setError(null)
          } else {
            setError("No such document exists")
          }
        },
        (err) => {
          console.log(err.message)
          setError("failed to get document")
        }
      )
  
      // unsubscribe on unmount
      return () => unsubscribe()
    }, [c, id])
  
    return { document, error }
  }
  
  

  createdAt property:
• How to group firebase data in flutter with DateTime?

  I am making a chat application in flutter using firebase. I want to show a header with the date whenever the date changes. How can I group messages in flutter coming from firebase on the basis of date and show a header with the changed date?

  I have tried GroupedListView package but I was not able to retrieve the chatmessages successfully.
• Parse external JSON using Firebase Functions

  I just started using Firebase a couple of days ago for my mobile app, so I’m sorry if this might come off as a stupid question, I’m still learning :)

  Basically, what I want to achieve is to download and parse a JSON from an API and then store the parsed content in the Real Time Firebase Database, so I can later use it in my app. I want to achieve this with Firebase Functions, cause the JSON is pretty large and don’t want to process it on device, it would slow down the app. Basically I’d like for the parsing and storing to be done by one function, which would then automatically execute one time per day, at a given time. Is this something doable? Or should I be looking into Google Cloud for this type of thing.

  I’m also new to JavaScript, so an example function would be really useful, to get a sense of how things look and feel.

  Thank you so much!
• How to get the name of child realtime database kotlin

  I am trying to get the email (in this case mikeyreid2002@gmail.com) however I don't see any method I can use that gets me the name of the child instead of the value.

  https://i.stack.imgur.com/uzonn.png
• Create Firebase dynamic link inside onCreate of firestore using Firebase Cloud functions

  I was wondering to create a dynamic short link when the item is created on firestore. I want to create a dynamic link when onCreate method of firestore cloud function has been called. How can we call the REST api inside onCreate of firestore cloud functions?

  https://firebase.google.com/docs/dynamic-links/rest

  Overall goal is when ShortLink created then update a field in the firestore. I want to generate dynamic link on server side.

  PS- I already integrated creation of dynamic link on Client side, but it takes little time.
• TypeError: doc is not a function at addSubCollectionDocument

  I'm trying to add a new document to a non-existing sub-collection in a document(solutionsCollection/docID/commentsSubCollection). But I'm getting this error message when I add a document to the sub-collection:

  TypeError: doc is not a function at addSubCollectionDocument

  Code to add a new document to a comments sub-collection:

    const addSubCollectionDocument = async (docID, doc) => {
      dispatch({ type: "IS_PENDING" })
      try {
        const docRef = doc(db, c, docID)
        const colRef = collection(docRef, "comments")
        const addedDocument = await addDoc(colRef, doc)
        dispatchIfNotCancelled({ type: "ADDED_DOCUMENT", payload: addedDocument })
        return addedDocument
      } catch (error) {
        console.log(error)
        dispatchIfNotCancelled({ type: "ERROR", payload: error })
        return null
      }
    }
  

  handleSubmit function:

  const handleSubmit = async (e) => {
      e.preventDefault()
  
      try {
        const commentToAdd = {
          id: Math.floor(Math.random() * 10000),
          content: newComment.trim(),
          reactions: [],
          user: {
            userID: user.uid,
            avatarURL: user.photoURL,
            displayName: user.displayName,
            username: user.reloadUserInfo.screenName,
          },
          replies: [],
          createdAt: new Date(),
        }
        await addSubCollectionDocument(id, commentToAdd)
        setNewComment("")
        if (response) {
          console.log(response.error)
        }
      } catch (error) {
        console.log(error)
      }
    }
  

  useFirestore hook code:

  import { useEffect, useReducer, useState } from "react"
  import {
    addDoc,
    collection,
    deleteDoc,
    doc,
    serverTimestamp,
    updateDoc,
  } from "firebase/firestore"
  
  import { db } from "../firebase/config"
  
  export const useFirestore = (c) => {
    const [response, dispatch] = useReducer(firestoreReducer, initialState)
    const [isCancelled, setIsCancelled] = useState(false)
  
    // only dispatch is not cancelled
    const dispatchIfNotCancelled = (action) => {
      if (!isCancelled) {
        dispatch(action)
      }
    }
  
    // add a document
    const addDocument = async (doc) => {
      dispatch({ type: "IS_PENDING" })
  
      try {
        const createdAt = serverTimestamp()
        const addedDocument = await addDoc(collection(db, c), {
          ...doc,
          createdAt,
        })
        dispatchIfNotCancelled({ type: "ADDED_DOCUMENT", payload: addedDocument })
      } catch (err) {
        dispatchIfNotCancelled({ type: "ERROR", payload: err.message })
      }
    }
  
    // Add document to sub collection
    const addSubCollectionDocument = async (docID, doc) => {
      dispatch({ type: "IS_PENDING" })
      try {
        const docRef = doc(db, c, docID)
        const colRef = collection(docRef, "comments")
        const addedDocument = await addDoc(colRef, doc)
        dispatchIfNotCancelled({ type: "ADDED_DOCUMENT", payload: addedDocument })
        return addedDocument
      } catch (error) {
        console.log(error)
        dispatchIfNotCancelled({ type: "ERROR", payload: error })
        return null
      }
    }
  
  
    useEffect(() => {
      return () => setIsCancelled(true)
    }, [])
  
    return {
      addDocument,
      addSubCollectionDocument,
      response,
    }
  }
  

  File where I'm importing addSubCollectionDocument hook:

  import { useFirestore } from "../../hooks/useFirestore"
  import { useAuthContext } from "../../hooks/useAuthContext"
  
  const SolutionComments = ({ solution }) => {
    const [newComment, setNewComment] = useState("")
    const { user } = useAuthContext()
    const { id } = useParams()
    const { addSubCollectionDocument, response } = useFirestore("solutions")
  
    const handleSubmit = async (e) => {
      e.preventDefault()
  
      try {
        const commentToAdd = {
          id: Math.floor(Math.random() * 10000),
          content: newComment.trim(),
          reactions: [],
          user: {
            userID: user.uid,
            avatarURL: user.photoURL,
            displayName: user.displayName,
            username: user.reloadUserInfo.screenName,
          },
          replies: [],
          createdAt: new Date(),
        }
        await addSubCollectionDocument(id, commentToAdd)
        setNewComment("")
        if (response) {
          console.log(response.error)
        }
      } catch (error) {
        console.log(error)
      }
    }
  
    return (...)}
  

  Package.json gist: https://gist.github.com/rishipurwar1/57fbf348cd9755a940e7e3f218de570f

  Firebase rules:

  rules_version = '2';
  service cloud.firestore {
    match /databases/{database}/documents {
          match /challenges/{challenge}{
          allow read: if true
      }
      match /resources/{resource}{
          allow read: if true
      }
      match /solutions/{solution}{
        allow read: if true
        allow create: if request.auth.uid != null;
        allow update, delete: if request.auth.uid == resource.data.userID;
      }
      match /users/{userId}{
          allow create: if true
        allow read: if true
      }
    }
  }
  
• Libopencv Undefined Reference unix?

  I am trying to install a program through unix terminal. I am currently getting this error Error.

  The problem is with libopencv.so.4.5.1 ... but how can i get rid of the undefined reference ?

  I tried to create a symbolic link but didn't understand the point and the error is the same.
• How to set useState initial value of object which is already in my fake data?

  I was declared a state named:

  const [quantity,setQuantity] = useState(products.qty)
  

  I need products.qty will be my initial state value but it showed undefined.

  Below I attached my fake data object:

  products =[{
        "user":"tareque@gmail.com",
        "name": "Mathis England",
         "img":   "https://i.ibb.co/C8JtD0Z/bicycle-1.png",
         "description": "Lorem ipsum dolor sit amet consectetur",
         "price": 300,
         "qty": 20,
         "supplier": "Velocy"
       
  }
  ]
  
• Svelte if block's behavior is different form component's property when is set to undefined

  I prefer to define a visible property for Svelte components rather than writing Svelte's if block in template. In my opinion, it is more clean to set a visible property instead of adding 2 lines of if block codes in the template.

  I am trying to define a visible property for a Svelte component which must have the same behavior of if block.

  Here is the repl.

  El.svelte

  <script>
      export let visible = true // should be visible by default
  </script>
  
  {#if visible}
  <svelte:element this="div" {...$$restProps}>
      <slot />
  </svelte:element>
  {/if}
  

  App.svelte

  <script>
      import El from './El.svelte';   
      let visible = undefined
  </script>
  <El {visible}>Component (undefined)</El>
  {#if visible}
      Svelte if block (undefined)
  {/if}
  

  The if block is working as expected, but the component is rendered which shouldn't be.

  It seems that undefined property isn't passed to component during Svelte compilation.

  What is the best way to make consistent behavior for visible property?

  Update:

  The reason I want to use as visible property is the final code is more readable. Here is a sample code using if block:

  {#if invoice.payment}
    {#if invoice.payment?.approved}
      <Badge>Approved</Badge>
      {#if !order.confirmed}
        <Button>Void Payment</Button>
      {/if}
    {/if}
    {#if invoice.payment?.status }
      <b>{invoice.payment.tranasction.id}</b>
    {/if}
  {/if}
  

  And using visible property:

  <Div visible={invoice.payment?.approved}>
    <Badge>Approved</Badge>
    <Button visible={!order.confirmed}>Void Payment</Button>
  </Div>
  <B visible={invoice.payment?.status}>{invoice.payment.tranasction.id}</B>
  

  The updated repl to support all scenarios.

  But I'm not sure if it's correct implementation or future usage in nested components and event/property/action bindings.

  Update 2:

  I don't think this is a my-opinion-based usage: Vue.js has v-if and Angular has ng-if that does the same thing as visible.