Unhandled Runtime Error TypeError: Cannot read properties of null (reading 'default') in my next.js

Question

"use client"
import { useKindeBrowserClient } from '@kinde-oss/kinde-auth-nextjs'
import Image from 'next/image';
import React from 'react'

function DashboardHeader() {

  const {user} = useKindeBrowserClient();
  return (
   <div>
    <Image src={user?.picture} alt='logo'
    width={40}
    height={40}
    /> 
   </div>
  )
}

export default DashboardHeader

I am getting this error in my webapp, I m getting this error because of image tag in the provided code.

I have noticed once I remove this image tag code, everything works fine. But the moment I write this image tag code, this issue pop up.

I tried everything but can't solve this.

Answer 1

I believe that Image doesn't like null src. You should change your code to something like:

"use client"
import { useKindeBrowserClient } from '@kinde-oss/kinde-auth-nextjs'
import Image from 'next/image';
import React from 'react'

function DashboardHeader() {

  const {user} = useKindeBrowserClient();
  return (
   <div>
    {user?.picture && <Image src={user?.picture} alt='logo'
    width={40}
    height={40}
    />}
   </div>
  )
}

export default DashboardHeader

To drop the Image if you don't have the data or:

"use client"
import { useKindeBrowserClient } from '@kinde-oss/kinde-auth-nextjs'
import Image from 'next/image';
import React from 'react'

function DashboardHeader() {

  const {user} = useKindeBrowserClient();
  return (
   <div>
    <Image src={user?.picture ? user.picture : '/some/fallback.png'} alt='logo'
    width={40}
    height={40}
    /> 
   </div>
  )
}

export default DashboardHeader

to get a fallback image.