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

What is the secret behind Node.js's ability to efficiently manage multiple requests using just one thread

After conducting some research on the topic, I noticed that most people tend to focus solely on Non-blocking IO. For instance, if we consider a basic application that simply responds with "Hello World" text to the client, there will still be some executio ...

javascriptnode.jsmultithreading

Unit Testing in Aurelia: Creating a Mock for a Custom Resolver

Below is the snippet of code that I am currently trying to test: import {inject} from 'aurelia-framework'; import {CrudResource, DependencyFactory} from 'utils'; let commonData = {}; @inject(DependencyFactory.of(CrudResource)) ...

javascriptunit-testingaurelia

Adjust the size of the image within a designated container to decrease its proportions when there is an excess of text present

I am working on a project where I need to resize an image based on the available space within its container. When there is text in the description, the image should adjust its size accordingly without pushing the text upwards. I am using React for this pro ...

javascripthtmlcssreactjs

Click a button to load a different view in CodeIgniter

How can I show another view of Controller using Ajax/Javascript when clicking a button? I attempted something, but it's not working as expected. Javascript: <script> $(document).ready(function(){ $("#details").click(function(){ $( ...

javascriptajaxcodeigniter

When attempting to use JSON.parse, it returns an undefined value

When using PHP to create JSON data and retrieving it through AJAX, why does JSON.parse return an "undefined" object? PHP CODE $emparray = array(); while($row =mysqli_fetch_assoc($result)) { $emparray[] = $row; } echo json_encode($emparray); AJ ...

javascriptphpjqueryjsonajax

Issue with dropdown element not triggering JavaScript onchange event

I am in the process of developing an application that involves searching a database and enabling users to compare the results. To achieve this, I require multiple dependent drop-down menus. While I have some understanding of HTML and PHP, my coding experti ...

javascriptphpjqueryajax

Blogger Extension - Cross Domain Communication

As I work on creating a blogger plugin, my goal is to send information from the blog page for analytic purposes and then display the results on the visitor's page. Initially, I tried sending the page content using an ajax call but encountered an error ...

javascriptajaxjquerycross-domainblogger

Trouble with Next Js Image 'fill' property causing images to not show up on the page

Currently tackling a project involving a simple grid layout with images and text. I'm using Next 13.4.7 along with Tailwind CSS. However, I've encountered an issue when trying to import an image using the Next Image component with the fill prop - ...

reactjsnext.jstailwind-csscss-gridnextjs-image

Creating a <Box /> component in MaterialUI with styled components is a great way to customize the design and layout of your

@material-ui/styles offers a different way to customize default styles: import React from 'react'; import Box from '@material-ui/core/Box'; import { styled } from '@material-ui/core/styles'; const StyledBox = styled(Box)({ ...

javascriptcssreactjsmaterial-uistyled-components

Creating a seamless navigation experience with Next.js: Implementing per-page layouts for efficient 2-link navigation on a single screen

In my next.js project, I have a URL like "http://localhost:3000/forum". If a user goes to "http://localhost:3000/forum/{postId}", I want to redirect them back to "http://localhost:3000/forum" My folder structure is in the 'App' directory and I h ...

javascriptreactjswebnext.jsnext.js13

Looping the Connection between Socket.io and Node

I have encountered a problem with my Unity client connecting to my node server using socket.io. While the initial connection is successful and acknowledged, when I try to emit a message to the connected client, the connection seems to get reopened as if a ...

javascriptnode.jsunity-game-enginesocket.io

How to align two <select> elements side by side using Bootstrap

The issue I am encountering is that these two select elements within the same control-group are being displayed vertically when I want them to be displayed horizontally. I attempted using inline-block in CSS, but there are other <div> elements with ...

javascripttwitter-bootstrap

displaying and activating element using jQuery

I'm currently working on setting up a notification system for my website but seem to be encountering some issues that I can't quite pinpoint. Essentially, I have a link that triggers a JavaScript function upon being clicked. This function is mean ...

javascriptjqueryhtml

Does Firestore arrayunion offer any kind of callback function?

Hey there! I'm currently working on a voting system and I want to prevent the same user from voting multiple times on the same post. let db = firebase.firestore(); var postRef = db.collection("posts").doc(this.pid); postRef.update({ ...

javascriptfirebasevue.jsgoogle-cloud-firestorenuxt.js

Issue with model not displaying after material added in OBLLoader + MTLLoader

After loading a material using MTLLoader and applying it to my model loaded with OBJLoader, the model itself mysteriously disappears. MTLLoader.setPath( 'models/' ); var url = "model.mtl"; MTLLoader.load( url, function( materials ) { materi ...

javascriptthree.js

How to dynamically change the border-top color of an <a> tag in a menu using a jQuery loop

I am interested in adding a colorful border-top to my menu using jQuery. I know this can be achieved with HTML by including style="border-top-color: red;", but I want to explore the jQuery method. Here is what I have attempted so far: var colors = [ ...

javascriptjquerycss

I'm looking for a way to convert an array value to JSON using jQuery

i need assistance in converting an array value into json format. An example is provided below: Sample Array [Management Portal!@!@Production Issue Handling!@!@/IONSWeb/refDataManagement/searchDynamicScripts.do, Management Portal!@!@ Event Browser!@!@/ION ...

javascriptjqueryarraysjson

Issue with static resource fetching when referencing a .js file within an HTML document while using Flask

My HTML file loads my OpenLayers JavaScript file (which displays a map frame) when opened directly. However, when running the HTML from my Flask python app, the JavaScript file/object fails to load (resulting in no map display, just some heading text). I ...

javascriptpythonhtmlcssflask

What is the best way to structure files within the css and js folders after running the build command in Vue-cli?

Vue-cli typically generates files in the following structure: - dist -- demo.html -- style.css -- file.commom.js -- file.commom.js.map -- file.umd.js -- file.umd.js.map -- file.umd.min.js -- file.umd.min.js.map However, I prefer to organize them this way: ...

javascriptvue.jsvue-cli-4

Attempting to retrieve the name of my controller and action within a JavaScript file

After checking out the Stack Overflow link here, I came across a suggested solution: var controllerName = '@ViewContext.RouteData.Values["Controller"].ToString()'; However, despite implementing this code in my JavaScript file, it does not yield ...

javascriptcontroller