auth.currentUser.updateProfile is not a function-CodePudding

I'm trying to change the username and the user's profile img of the user but it misses the function I've imported. I've tried using auth.currentUser.updateProfile but it does not recognize it as a function I cannot even put await on front of the function. It happens when doneHandle is called. Here the auth is basically the "const auth = getAuth(app);" initialization of the application.

import React, { useContext, useState } from 'react';

import { AuthContext } from '../App';
import { updateProfile } from 'firebase/auth';

export default function Dashboard() {
  const { currentUser, auth } = useContext(AuthContext);
  const [content, setContent] = useState('');
  const [open, setOpen] = useState(false);
  const [dia, setDia] = useState('');

  const handleClickOpen = (e) => {
    setDia(e.target.value);
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };

  const doneHandle = (e) => {
    if (e.target.value === 'Profile') {
      auth.currentUser
        .updateProfile({
          displayName: content,
        })
        .then(function (error) {
          console.log(error);
        });
    } else {
      currentUser
        .updateProfile({
          photoURL: content,
        })
        .then(function (error) {
          console.log(error);
        });
    }
  };
  return (


<Removed some code that was not related to the ques>

        <Dialog open={open} onClose={handleClose}>
          <DialogContent>
            <DialogContentText>
              {dia === 'Profile'
                ? 'Enter your name down below.'
                : 'Please paste the direct url to the image. '}
            </DialogContentText>
            <TextField
              autoFocus
              margin='dense'
              id='name'
              type='email'
              fullWidth
              variant='standard'
              value={content}
              onChange={(e) => {
                setContent(e.target.value);
              }}
            />
          </DialogContent>
          <Button
            value={dia}
            onClick={(e) => {
              doneHandle(e);
            }}
          >
            Done
          </Button>
        </Dialog>
      </div>
    </div>
  );
}

CodePudding user response：

You're importing updateProfile as a top-level function from the v9 modular SDK, but then try to invoke a updateProfile method on the user object - which is the namspaced syntax for the v8 SDK. You can't just mix and match those syntaxes.

As shown in the code sample in the documentation on updating a user profile, you should call the top-level function and pass the current user as arguments:

updateProfile(currentUser, {
  displayName: content
})