CODEWITHSUNDEEP
reactjsnext.jsnext-auth
Azr.em
Azr.em

Reputation: 83

TypeError: Cannot read properties of undefined (reading 'user')

I am trying to create a Facebook clone using Nextjs and created nextjsAuth and configured the login now I tried to get my Facebook profile picture into my clone and this error is shown and I tried to run but this error showing and I don't know what to do here can anyone solve this, please

pages\components\Header.js (69:23) @ Header

  67 | onClick={signOut}
  68 | className="rounded-full cursour-pointer"
> 69 | src={session.user.image}
     |             ^
  70 | width="40"
  71 | height="40"
  72 | layout="fixed"

full code is shown below you can checkout can you solve this error

import React from "react";

import Image from "next/image";
import {
  BellIcon,
  ChatIcon,
  ChevronDownIcon,
  HomeIcon,
  UserGroupIcon,
  ViewGridIcon,
} from "@heroicons/react/solid";
import {
  FlagIcon,
  PlayIcon,
  SearchIcon,
  ShoppingCartIcon,
} from "@heroicons/react/outline";

import HeaderIcon from "./HeaderIcon";
import { signOut, useSession } from "next-auth/react";

function Header() {
  const {session} = useSession();

  return (
    <div
      className="sticky top-0 z-50 bg-white 
    flex items-center p2
     lg:px-5 shadow-md"
    >
      <div className="flex items-center">
        {/* Left */}

        <Image
          alt="facebook"
          src="https://links.papareact.com/5me"
          width={40}
          height={40}
          layout="fixed"
        />
        <div className="flex ml-2 item-center rounded-full bg-gray-100 p-2">
          <SearchIcon className="h-6 text-gray-600" />
          <input
            className=" hidden md:inline-flex flex ml-2 items-center bg-transparent outline-none 
            placeholder-gray-502 flex-shrink"
            type="text"
            placeholder="Search Facebook"
          />
        </div>
      </div>

      {/* Center */}
      <div className="flex justify-center flex-grow">
        <div className="flex space-x-6 md:space-x-2  ">
          <HeaderIcon active Icon={HomeIcon} />
          <HeaderIcon Icon={FlagIcon} />
          <HeaderIcon Icon={PlayIcon} />
          <HeaderIcon Icon={ShoppingCartIcon} />
          <HeaderIcon Icon={UserGroupIcon} />
        </div>
      </div>

      {/* Right */}
      <div className="flex items-center sm:space-x-2 justify-end">
        {/* Profile pic */}
        <Image
          onClick={signOut}
          className="rounded-full cursour-pointer"
          src={session.user.image}
          width="40"
          height="40"
          layout="fixed"
        />
        <p className="whitespace-nowrap font-semibold pr-3">Asram Ahamed</p>
        <ViewGridIcon className="icon" />
        <ChatIcon className="icon" />
        <BellIcon className="icon" />
        <ChevronDownIcon className="icon" />
      </div>
    </div>
  );
};

export default Header;

Upvotes: 1

Views: 5029

Answers (3)

Beaumont
Beaumont

Reputation: 363

Just solved the issue. You are getting the session on the client side, so there is a delay in fetching the client data - which would cause an error as the session was 'null' before it was fetched.

To resolve it, try to load the session on the server side with the following example:

import { useSession, getSession } from 'next-auth/react'

const Example = () => {
   const { data: session } = useSession();
   console.log(session)
...
   <div><Image src={session.user.image} /></div>
...
}

export async function getServerSideProps(context) {
    return {
        props: {
            session: await getSession(context)
        },
    }
  }

export default Example;

Upvotes: 1

Azr.em
Azr.em

Reputation: 83

I fixed it with

  const { data: session } = useSession();

and it worked

Upvotes: 1

Dev-2019
Dev-2019

Reputation: 557

the variable session probably undefined.

try to access like below to resolve this issue

<Image
    onClick={signOut}
    className="rounded-full cursour-pointer"
    src={session?.user?.image}
    width="40"
    height="40"
    layout="fixed"
/>

Upvotes: 0

Related Questions