You're experimenting with Laravel 12 and React. You’ve successfully created a new component, set up routes, controllers, and a model, and added the corresponding page. However, when you try to load the page, it displays a blank screen.

Problem:

Upon inspecting the browser console, you encountered this JavaScript error:

Uncaught TypeError: can't access property "avatar", is null

This error indicates that your React component is trying to access auth.user.avatar, but auth.user is currently null.

Root Cause:

You're not logged in. The application expects a logged-in user object (auth.user) to exist, but since you're not authenticated, auth.user is null, causing the error when trying to access its properties.

💡 Solution:

To prevent this error, you need to conditionally render the part of your component that accesses auth.user.avatar. Around line 159 in your app-header component, wrap the relevant JSX in a conditional check:

Found this bug in both of these file:

$ code resources\js\components\laravel-starter\app-header.tsx

$ code resources\js\components\laravel-starter\user-info.tsx

Change code from:

<Avatar className="size-8 overflow-hidden rounded-full">
...
</Avatar>

TO:

{auth.user && (
    <Avatar className="size-8 overflow-hidden rounded-full">
...
    </Avatar>
)}