TypeError: u.indexOf is not a function for Reactjs and Firebase

Question

I am running into the following Error while following this tutorial https://www.youtube.com/watch?v=QiTq5WrWoJw&t=8176s

I am having issues connecting my individual messages into my firebase application. My error in the console focuses on the following code.

I am trying to send a message within in an indvidiual "room" within firebase so a collection of rooms with unique messages within each room.

function ChatInput(channelName, channelId) {

    const [input, setInput] = useState('');

    const sendMessage = (e) => {
        e.preventDefault(); //prevents refresh of the page

        if(!channelId) {
            return false;
        }
            db.collection("rooms").doc(channelId).collection("messages").add({
              message: input,
              timestamp: firebase.firestore.FieldValue.serverTimestamp(),
              user: 'Daniel Peters',
              userImage:'https://wallpapercave.com/wp/j8Sd6Uv.jpg',

            });

            setInput('');
    };

    return (
        <ChatInputContainer>
            <form>
                <input value={input} onChange={(e) => setInput(e.target.value)} placeholder= {`Message #${channelName}`} />
                <Button hidden type='submit' onClick={sendMessage}>
                    SEND
                </Button>
            </form>



        </ChatInputContainer>
    )
}

export default ChatInput;

I have tried different version of redux and firebase to see if that was the issue, however the issue is obviously not resolved. Any guidance would be great!

Nepil

Have you written something.indexOf... anywhere in code? – Steib

Out of my whole code the only thing that has ".index" is in my serviceWorker.js, nothing that I have written that was wasn't a dependency. – Nepil

Answer 1

I just faced this issue and eventually my "mistake" Was that I was trying to use numeric ids as firestore document keys.

So this one gave that u.indexOf is not a function error:

      let ref = db.collection(`userPreferences/${userId}/venues`).doc(venue.id);

Where as this one worked:

  let ref = db.collection(`userPreferences/${userId}/venues`).doc(`${venue.id}`);

I just surrounded the second one in quotes to make it a string. Hope that saves someone's day!

Godmother

Indeed it did! Had the same issue with angular fire. Solved by using the back ticks. +1 – Exponent

Thanks! you're a life saver! I was trying to store id as Date.now() timestamp but it was a number so i did using Date.now().toString() and it stored it. I wish the error message was more precise – Discordant

this saved my day. I have been debugging for 2 hours. – Untitled

Saved my day! You are a hero to the people!! 🙏 – Torsk

Answer 2

I fixed this error by changing my key name from a number to a string:

export const addRecord = async () => {
    for (let i = 1; i < 3; i++) {
        const keyName = i + '' // converting the number to a string is the solution!
        await setDoc(doc(db, "names", keyName), {
            name: "hello world",
        })
    }
}

Kansas

Answer 3

In this case Make the channelId string and then pass to doc()

Just like:

function ChatInput(channelName, channelId) {

const [input, setInput] = useState('');

const sendMessage = (e) => {
    e.preventDefault(); //prevents refresh of the page

    if(!channelId) {
        return false;
    }
        db.collection("rooms").doc(`${channelId}`).collection("messages").add({
          message: input,
          timestamp: firebase.firestore.FieldValue.serverTimestamp(),
          user: 'Daniel Peters',
          userImage:'https://wallpapercave.com/wp/j8Sd6Uv.jpg',

        });

        setInput('');
};

return (
    <ChatInputContainer>
        <form>
            <input value={input} onChange={(e) => setInput(e.target.value)} placeholder= {`Message #${channelName}`} />
            <Button hidden type='submit' onClick={sendMessage}>
                SEND
            </Button>
        </form>



    </ChatInputContainer>
)

}

export default ChatInput;

Chef

Answer 4

I Have faced this error and after a long time finally fixed it, just like this

change this :

useEffect(() => {
  onSnapshot(
   doc(db, 'users', `${user?.email}`, (doc) => {
     setMovies(doc.data()?.savedShows);
   })
  );
}, [user?.email]);

to this :

useEffect(() => {
  onSnapshot(doc(db, 'users', `${user?.email}`), (doc) => {
   setMovies(doc.data()?.savedShows);
  });
 }, [user?.email]);

Haemic