The latest articles on DEV Community by Md. Ibrahim Hossain (@mdibuhossain). https://dev.to/mdibuhossain https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F789792%2Fdd57e613-2173-45f1-b643-39e10cc7dcbe.jpeg https://dev.to/mdibuhossain en Md. Ibrahim Hossain Mon, 10 Jan 2022 20:18:52 +0000 https://dev.to/mdibuhossain/cannot-assign-to-read-only-property-displayname-of-object--2gkl https://dev.to/mdibuhossain/cannot-assign-to-read-only-property-displayname-of-object--2gkl <p>I'm using <code>@reduxjs/toolkit: 1.7.1</code> , <code>firebase: 9.6.1</code> and <code>firebase-tools: 10.0.1</code> on my ReactJS project. I was trying to create a function where users can update their names and avatar photos.</p> <p>For which I used <code>updateProfile()</code> function. But whenever I execute the update function it threw an error <code>Cannot assign to read only property 'displayName' of object '#&lt;Object&gt;'</code>.</p> <p>There is an interesting thing I have noticed that is if I only update the photoURL property still it gives <code>Cannot assign to read only property 'displayName' of object '#&lt;Object&gt;'</code></p> <p><a href="https://github.com/mdibuhossain/Front-end-ReactJS-with-Firebase-template">Project_Link_Github</a></p> <p>Code: <code>useFirebase.js</code>:<br> `import { getAuth, signInWithPopup, GoogleAuthProvider, createUserWithEmailAndPassword, signInWithEmailAndPassword, signOut, onAuthStateChanged, updateProfile } from 'firebase/auth';<br> import { getDownloadURL, getStorage, ref, uploadBytes } from 'firebase/storage';<br> import { useEffect, useState } from 'react';<br> import { useDispatch } from 'react-redux';<br> import { useLocation, useNavigate } from 'react-router-dom';<br> import { setIsLoading } from '../features/isloadingSlice';<br> import { login, logout } from '../features/userSlice';<br> import initAuth from '../Firebase/initAuth';</p> <p>initAuth();</p> <p>export const useFirebase = () =&gt; {<br> const auth = getAuth();<br> const location = useLocation();<br> const navigate = useNavigate();<br> const dispatch = useDispatch();<br> const [updateCount, setUpdateCount] = useState(0);<br> const storage = getStorage();<br> const Redirect = () =&gt; {<br> console.log(location);<br> const destination = location?.state?.from?.pathname || '/';<br> navigate(destination);<br> }</p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>const uploadAvatar = async (file) =&gt; { const fileRef = ref(storage, 'avatar/' + auth?.currentUser?.uid + '.png'); dispatch(setIsLoading(true)); const snapshot = await uploadBytes(fileRef, file); const photoURL = await getDownloadURL(fileRef); updateProfile(auth.currentUser, { photoURL }).then(() =&gt; { setUpdateCount(updateCount + 1); }).catch(e =&gt; console.log(e.message)) dispatch(setIsLoading(false)); console.log(snapshot); } const userRegister = (name, photoURL, email, password) =&gt; { dispatch(setIsLoading(true)); createUserWithEmailAndPassword(auth, email, password) .then(result =&gt; { updateProfile(auth.currentUser, { displayName: name, photoURL }).then(() =&gt; { }) dispatch(login({ displayName: name, email, photoURL })); Redirect(); }).catch(error =&gt; alert(error.message)) .finally(() =&gt; dispatch(setIsLoading(false))) } useEffect(() =&gt; { const unsubscribe = onAuthStateChanged(auth, (result) =&gt; { if (result) { dispatch(login({ ...result })) } else { dispatch(login({})) } dispatch(setIsLoading(false)); }) return () =&gt; unsubscribe; }, [updateCount, auth]) return { logIn, logOut, Redirect, uploadAvatar, userRegister, } </code></pre> </div> <p>}`</p> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--9nUfKvnL--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ugcztgp06zzjtr21te72.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--9nUfKvnL--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ugcztgp06zzjtr21te72.png" alt="issue" width="880" height="427"></a></p> <p>I don't know what's wrong with this <code>displayName</code> property but my previous project works fine.</p> <p>Can anybody please help me with this?</p> firebase react redux javascript