Next.js is throwing an unhandled runtime error of type TypeError, which is causing issues with reading properties of null, specifically the 'default' property

"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 encountered a problem with my web application that seems to be caused by the image tag in the code provided above.

Interestingly, everything works fine when I remove the image tag code. However, as soon as I add it back in, the issue resurfaces.

I have attempted various solutions but have been unable to resolve this issue.

javascriptnext.jstypeerror

Answer №1

In my opinion, Image is not a fan of null src. It would be advisable to update your code as follows:

"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

If the data is missing, you can simply remove the Image or use a fallback image like this:

"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

This approach ensures that you have a fallback image in place.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When utilizing the File System Access API, the createWritable() method functions perfectly within the console environment but encounters issues when executed

I've been diving into the File System Access API for an upcoming project and I'm struggling with using the createWritable() method. Specifically, I'm encountering issues with this line of code: const writable = await fileHandle.createWritab ...

javascriptfile-system-access-api

Retrieve the id for the chosen user name within a function that contains an array of objects

const userList = [ {name:"jonh" ,id:EAD1234}, {name:"peter" ,id:EAD1235}, {name:"matt" ,id:EAD1236}, {name:"henry" ,id:EAD1237}, ] In the array above, there are various users with their respective IDs. The goal is t ...

javascriptreactjsarraysecmascript-6

What is the best way to utilize date-fns for formatting a date retrieved from an API?

After receiving data from an API in the 'yyyy-MM-dd' format, I encountered a display issue when trying to convert it to 'dd-MM-yyyy'. How can I properly adjust the date format without disrupting the table display? onMounted(async () =& ...

javascriptvue.jstypescript2.0date-fns

"Discover the best way to sort through an array of complex objects with varying levels of nesting using a specified search

I have come across similar answers, but none of them go beyond two levels deep. Therefore, I believe this is not a duplicate problem. My task is to filter an array of objects where each object may contain nested objects of unknown depth. In my data structu ...

javascriptreactjsrecursion

Utilizing next.config.js in conjunction with expressjs

1) In the next.js documentation, it is stated that we can start our server using next start. Does this command have the same functionality as simply running next? 2) I noticed when implementing a custom server as outlined in the documentation, the debugge ...

next.js

Delete a filename in Internet Explorer with the power of JavaScript and jQuery

In my attempts to clear the file input field in IE using $('#files').val('');, I found that it was not effective. $('#uploadimgdiv').html(''); var fil1 = document.getElementById("files"); $('#fil1').val(&a ...

javascriptjqueryinternet-explorer

javascript retrieving JSON data through an API request from a redirected URL

I am retrieving JSON data from the Glitch API. Upon opening the link, it redirects to a different domain (the domain was changed from gomix.me to glitch.me) When using Postman for both HTTP requests, I receive identical JSON data. However, there is a d ...

javascriptjqueryjson.htaccessredirect

Error: Node.js exceeds maximum call stack size while inspecting an objectlogging or debugging

After defining a class as shown below, I encountered an error stating RangeError: Maximum call stack size exceeded when attempting to review the properties of the Object. var Individual = (function () { function Individual(name, age) { this.na ...

javascriptnode.js

Incorporate Facebook Friends into Your Website Using Graph API 2.5

In the midst of creating a website where users can connect with their Facebook friends, I encountered a challenge regarding utilizing apprequests. Unfortunately, this feature is only accessible to games from version 2.3 onwards. At present, my solution inv ...

javascriptfacebookfacebook-graph-apifacebook-javascript-sdkfacebook-invite

What sets @vue/cli-plugin-unit-jest apart from vue-jest?

Can you explain the distinction between these two software bundles? @angular/cli-plugin-unit-jasmine angular-jasmin If I already have one, is there a need for the other? And in what circumstances should each be utilized? ...

javascriptunit-testingvue.jsjestjs

Directive fails to trigger following modification of textarea model

There is a block of text containing newline separators and URLs: In the first row\n you can Find me at http://www.example.com and also\n at http://stackoverflow.com. The goal is to update the values in ng-repeat after clicking the copy button. ...

javascriptangularjsangularjs-directive

Supply a JSON parameter as a variable into the .load() function

When a button is clicked, I am attempting to load a page using the .load() method with a POST request. The URL parameters are generated and displayed as JSON formatted in the button attribute btn-url. Problem: The parameter is not being passed to the .loa ...

javascriptjqueryjson

Verifying the name's uniqueness and disregarding it in case of any alterations

I am currently working on a form that includes a modal to allow users to modify their name and email address. The issue I am facing is that the form sends a request to the server to check for unique values in all cases. While this is appropriate when creat ...

javascriptangularjs

Include a novel item into the JSON string that is being received

Recently, I attempted to parse an incoming JSON string and insert a new object into it. The method I used looked like this: addSetting(category) { console.log(category.value); //Console.log = [{"meta":"","value":""}] category.value = JSON.parse(c ...

javascriptjson

Having issues with "return false" not functioning properly in jQuery ajax calls

I have been developing a registration form using jQuery ajax. Below is the code snippet I am working with: function validateData() { var email = jQuery("#email").val(); var username = jQuery("#username").val(); var emailReg = /^([\w-&bsol ...

javascriptjqueryajax

Why is the "&" symbol in my JSON showing as "&amp;" when displayed in an Angular view?

In my project, I am utilizing a json file to store key/strings for localization with angular-translate. One of the strings in this file is 'Profile & Preferences', which I am using in my view. However, when I use ng-bind-html to display this ...

javascriptangularjsjsonspecial-charactersangular-translate

Guide to activating a function by tapping anywhere on a webpage in iPhone Safari

I am attempting to implement a jQuery function that will change the text of a div in the iPhone browser when any area of the page is clicked. Here is my current setup: <div id="alternative_text">traduit</div> <script type="text/javascript ...

javascriptjqueryiphonesafariwebview

Executing a node module in a web browser

I'm attempting to upload and read an Excel file with the help of a node module called read-excel-file. Following the instructions for usage in the browser, I have added the following code snippet to my .js file: import readXlsxFile from 'read-ex ...

javascriptnode.jsnpmnode-moduleshttpserver

What is the process for obtaining intersection set data from an array?

I'm trying to find the intersection set within an array only containing type 1 and 2. Can you help me with that? var arr = [ { id: 1, auths: [ { authId: 1, type: 1, value: 'Test1' }, { authId: 2, type: 1, ...

javascript

What is the best way to choose the unique identifier of an HTML element inside a for loop in a Django template?

I need help selecting an HTML button that is generated within a for loop in a Django template using JavaScript. How can I assign a unique ID to each button and select it correctly in JavaScript? Currently, all buttons have the same ID within the loop, resu ...

javascriptdjangodjango-templatesqueryselector