View Component - Undefined variable in blade template

I'm at a bit of a loss on this one.

Just deployed a major site update to production and I get the following error when trying to access the home page

production.ERROR: Undefined variable $page (View: /home/path/to/site/resources/views/components/sections/about.blade.php)

The record exists, I can access it in the Admin panel for the site (FilamentPHP) - and everything works locally (site developed in Herd pro, deployed via a Forge provisioned server).

My view component:


namespace App\View\Components\sections;

use App\Models\Page;
use Closure;
use Illuminate\Contracts\View\View;
use Illuminate\View\Component;

class About extends Component
{
    public Page $page;
    
    /**
     * Create a new component instance.
     */
    public function __construct()
    {
        $this->page = Page::first();
    }

    /**
     * Get the view / contents that represent the component.
     */
    public function render(): View|Closure|string
    {
        return view('components.sections.about');
    }
}

and the blade template

    
    <div class="w-full ceu-bg-banner relative 
        before:absolute before:z-10 before:inset-0 before:bg-gradient-to-b before:from-accent/30 before:to-accent/30" 
        style="background-image: url('{{ $page->getImageSrc('banner', 'desktop', 'about_banner') }}')">
        
        <article class="bg-pale relative w-4/5 sm:w-2/3 md:w-1/2 lg:w-1/3 -translate-y-16 lg:-translate-y-32 left-[20%] sm:left-[30%] md:left-[40%] lg:left-[60%] z-30 ceu-offset-border
            after:absolute after:-right-2 after:-bottom-2 after:border-r after:border-r-pale/60 after:border-b after:border-b-pale/60">
            <h2 class="font-title text-pale text-2xl lg:text-3xl bg-dark pt-16 pb-10 px-12 leading-10 lg:leading-12" >{{ $page->about_intro }}</h2>

            <p class="font-body text-dark text-sm leading-8 text-justify py-12 px-12">{!! nl2br($page->about_detail) !!}</p>
       
        </article>
    </div>
</section>

PHP 8.2.14 Laravel 11.41.3

Any help or pointers gratefully received

LaryAI

1 year ago

Level 58

The error you're encountering, "Undefined variable $page," suggests that the $page variable is not being passed to the Blade view as expected. This can happen if the variable is not properly set or passed from the component to the view.

Here's a step-by-step solution to address this issue:

Ensure the Variable is Passed to the View:

In your About component, you need to explicitly pass the $page variable to the view. You can do this by returning an array of data from the render method.

Update your render method like this:
```
public function render(): View|Closure|string
{
    return view('components.sections.about', [
        'page' => $this->page,
    ]);
}
```
Check the Database Query:

Ensure that the Page::first() query is returning a valid Page object. If the database is empty or the query fails, $page will be null, which could lead to this error. You might want to add a check to handle this scenario gracefully.
Verify the Component Usage:

Ensure that the component is being used correctly in your Blade files. For example, if you're using the component in a Blade file, it should look something like this:
```
<x-sections.about />
```
Clear Cache:

Sometimes, cached views can cause issues. Clear your application cache and compiled views:
```
php artisan view:clear
php artisan cache:clear
```
Check for Environment Differences:

Since the issue occurs in production but not locally, ensure that your production environment is correctly set up and that there are no differences in the database or environment configuration that could affect the query.

By following these steps, you should be able to resolve the "Undefined variable $page" error in your Blade template. If the problem persists, double-check your database and ensure that the Page model is correctly configured and accessible in the production environment.

Blackpig

1 year ago

Level 4

I've already tried all of those suggestions - it's almost as if the constructor method isn't being called

jlrdw

1 year ago

Level 75

if you echo $page in the view what shows?

Also see https://livewire.laravel.com/docs/components#setting-properties

I believe your variable is setup wrong.

Blackpig

1 year ago

Level 4

These are standard blade component, not Livewire https://laravel.com/docs/11.x/blade#components and as stated above everything works locally.

It appears that any calls to the DB for the components are returning null/not

My resources/views/components/layouts/master.blade.php

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>{{ $title }}</title>
        
        @vite(['resources/css/app.css'])

    </head>

    <body class="antialiased overflow-x-hidden bg-pale">

        <x-header />

        <div id="page-content" class="relative top-0">
            
            {{ $slot }}
    
        </div>

        <div class="w-full mx-auto">
            <x-common.footer />
        </div>

        @vite(['resources/js/app.js'])

    </body>
</html>

The <x-header /> component makes the same call to populate the $page variable and that is set correctly

$this->page = Page::first();

and my resources/views/welcome.blade/php calls the various page components

<x-layouts.master>
    <x-slot name="title">Welcome</x-slot>

    <x-sections.about />
    
    <x-sections.process />

    <x-sections.packages />

    <x-sections.meet />

    <x-sections.contact />

</x-layouts.master>

It only seems to be these resources/views/components/sections components that aren't retrieving anything from the DB

If I dd or echo or var_dump from the constructor method I get nothing.

Blackpig

1 year ago

Level 4

It's not a Livewire component

Blackpig

1 year ago

Best Answer

Level 4

It's a PSR-4 issue - my folder is lowercase 'sections' and should be 'Sections` so composer throws a hissy and is skipping the components

Please or to participate in this conversation.