Feb 22, 2023

Level 1

Undefined variable error in Laravel view when rendering component on DigitalOcean server

Hi everyone, I have the following code that renders a banner view in my Laravel application. Depending on the current route, the banner displays different content. The code works fine on my local environment, but when I deployed the application to DigitalOcean, I'm getting an error that says the $title variable is undefined. I suspect that the view is being rendered before the component is initialized. How can I fix this issue?"

I hope this helps!

this is my class component


namespace App\View\Components\web\header;

use Illuminate\View\Component;

class banner extends Component
{

    public $title;

    public $description;

    public $imgPath;

    public $referenceId;

    public $referenceClass;

    /**
     * Create a new component instance.
     *
     * @return void
     */
    public function __construct()
    {
        $this->init();
    }

    /**
     * Get the view / contents that represent the component.
     *
     * @return \Illuminate\Contracts\View\View|\Closure|string
     */
    public function render()
    {
        return view('components.web.header.banner');
    }

    private function init(): void
    {
        $attributesToSet = $this->mapRoutes(request()->route()->uri);

        $this->setAttributes($attributesToSet);
    }

    private function mapRoutes(string $currentRoute): array
    {
        $dinamycRoutes = [
            '/' => [
                'title' => "Acompañamiento personalizado en desarrollo de software",
                'description' => "Ofrecemos asesoría y soporte especializado para garantizar el éxito de tu proyecto. Contáctanos y asegura la mejor experiencia en desarrollo de software.",
                // 'imgPath' => "img/banner_image_1.svg",
                'imgPath' => '',
                'referenceId' => "home",
                'referenceClass' => "home-banner",
            ],
            'about-us' => [
                'title' => "Transforma tu empresa con Gestiones Integrales",
                'description' => "Gestiones Integrales, el camino hacia el éxito empresarial con soluciones personalizadas e integrales.",
                'imgPath' => "img/banner_image_2.svg",
                'referenceId' => "about-us",
                'referenceClass' => "about-us-banner",
            ],
            'services' => [
                'title' => "Servicios",
                'description' => "Servicios desc",
                'imgPath' => "img/banner_image_1.svg",
                'referenceId' => "services",
                'referenceClass' => "services-banner",
            ],
            'contact' => [
                'title' => "Contacto",
                'description' => "Contacto desc",
                'imgPath' => "img/banner_image_2.svg",
                'referenceId' => "contact",
                'referenceClass' => "contact-banner",
            ],
        ];

        return filled($dinamycRoutes)
            ? $dinamycRoutes[$currentRoute]
            : null;
    }

    private function setAttributes(array $attributes): void
    {
        foreach ($attributes as $key => $attribute) {
            $this->{$key} = $attribute;
        }
    }
}

and this is my blade componnent

    <div class="container-fluid px-0">
        <div class="page-banner {{ $referenceClass }}">
            <div class="row align-items-center flex-wrap-reverse h-100">
                <div class="col-md-6 py-5 wow fadeInLeft">
                    <h1 class="mb-4">
                        {{ $title }}
                    </h1>
                    <p class="text-lg text-withe mb-5">
                        {{ $description }}
                    </p>
                    {{-- <a href="#" class="btn btn-primary btn-split">Watch Video <div class="fab"><span --}} {{--
                                class="mai-play"></span></div></a> --}}
                </div>
                <div class="col-md-6 py-5 wow zoomIn">
                    <div class="img-fluid text-center">
                        <img src="{{ asset($imgPath) }}" alt="" width="550px">
                    </div>
                </div>
            </div>
            <a href="#{{ $referenceId }}" class="btn-scroll" data-role="smoothscroll"><span
                    class="mai-arrow-down"></span></a>
        </div>
    </div>
</div>

LaryAI

3 years ago

Level 58

It looks like the issue is that the view is being rendered before the component is initialized. To fix this, you can try adding a check to make sure the component is initialized before the view is rendered. You can do this by adding an if statement to the render() method in your component class, like this:

public function render()
{
    if ($this->title) {
        return view('components.web.header.banner');
    }
}

This will make sure that the view is only rendered if the $title variable is set.

kokoshneta

3 years ago

Level 27

Your mapRoutes() method doesn’t make much sense.

You create and fill an array with four string keys.
Then you check with filled() whether the array you just created exists, which is pointless – filled() will always return true at this point
Then you return $dynamicRoutes[$currentRoute] (side note: it’s dynamic, not dinamyc) without checking if the array key $currentRoute is actually set at all

My guess is that you’re loading a route whose name isn’t one of the four values you have in your array, so the mapRoutes() function tries to return a nonexistent array item. What do you want to happen in that case? Do you have a fallback banner (such as the one used for the / route)?

If so, I’d suggest using a switch statement instead:

private function mapRoutes(string $currentRoute): ?array {
	switch ($currentRoute) {
		case 'about-us':
			return [
				'title' => "Transforma tu empresa con Gestiones Integrales",
				'description' => "Gestiones Integrales, el camino hacia el éxito empresarial con soluciones personalizadas e integrales.",
				'imgPath' => "img/banner_image_2.svg",
				'referenceId' => "about-us",
				'referenceClass' => "about-us-banner",
			];
		
		case 'services':
			return [
				'title' => "Servicios",
				'description' => "Servicios desc",
				'imgPath' => "img/banner_image_1.svg",
				'referenceId' => "services",
				'referenceClass' => "services-banner",
			];
		
		case 'contact':
			return [
				'title' => "Contacto",
				'description' => "Contacto desc",
				'imgPath' => "img/banner_image_2.svg",
				'referenceId' => "contact",
				'referenceClass' => "contact-banner",
			];

		default:
			return [
				'title' => "Acompañamiento personalizado en desarrollo de software",
				'description' => "Ofrecemos asesoría y soporte especializado para garantizar el éxito de tu proyecto. Contáctanos y asegura la mejor experiencia en desarrollo de software.",
				// 'imgPath' => "img/banner_image_1.svg",
				'imgPath' => '',
				'referenceId' => "home",
				'referenceClass' => "home-banner",
			];
	}
}

chechogrom

3 years ago

Level 1

@kokoshneta the problem is not that the mapRoutes method returns null, since I know that the routes are well defined in the routes file, because in my local everything works fine, the problem is when I test in DigitalOcean, unless I have to do some extra verification in the routes when it is a productive environment.

this is my route file

Route::get('/', function () {
    return view('components.web.pages.welcome');
});

Route::get('/about-us', function () {
    return view('components.web.pages.about');
});

Route::get('/services', function () {
    return view('components.web.pages.services');
});

Route::get('/contact', function () {
    return view('components.web.pages.contact');
});

chechogrom

3 years ago

Level 1

@kokoshneta thanks, according to your code suggestion, how can I send the variables to the component ?

kokoshneta

3 years ago

Level 27

@chechogrom You don’t need to pass the data to the view – public properties are automatically available. To make absolutely sure that the data is set before the component is rendered, you could do this:

public function render() {
	if (empty($this->title)) $this->init();
	return view…
}

What do you see if you dd() the value instead of returning it in mapRoutes() on DigitalOcean? Do you see the expected array, or do you see an empty one? Or indeed if you dd($currentRoute) – what’s the output there?

I notice that your routes are defined with URIs beginning with slashes, but in the method that checks, there are no slashes. I’m not sure if this may cause problems on some platforms and not others, but it’s possible. Have you tried adding slashes to the values it tries to match in the mapRoutes() method?

chechogrom

3 years ago

Level 1

@kokoshneta I have already made several tests, and I still get the same error, try placing a dd, but I can not see it in DigitalOcean, the dd does not run, in the environment variables I have APP_DEBUG=true and APP_ENV=local.

It seems that in DigitalOcean the class that returns the component is not executed, I have cleared the caches everything, but in my local environment it works normal.

I tried placing logs, but apparently they do not run as well as the dd

chechogrom

3 years ago

Best Answer

Level 1

I managed to load the component on the DigitalOcean server by registering the component manually, I could never understand why the server did not load the class or register automatically, I attach the folder tree to see if someone finds out if it was with a capital letter in a file or folder name because in linux is case sensitive, although it would be rare also because my local environment is in homestead with ubuntu.

tree of the component classes.

app/View/
└── Components
    ├── Alert.php
    └── web
        └── header
            └── Banner.php

3 directories, 2 files

and here I share with you the folder tree of the blade components.

resources/views/
└── components
    ├── layouts
    │   └── app.blade.php
    └── web
        ├── footer
        │   ├── index.blade.php
        │   └── sections
        │       ├── col-1.blade.php
        │       ├── col-2.blade.php
        │       ├── col-3.blade.php
        │       └── col-4.blade.php
        ├── header
        │   ├── banner.blade.php
        │   ├── index.blade.php
        │   └── nav.blade.php
        ├── main
        │   ├── index.blade.php
        │   └── sections
        │       ├── about.blade.php
        │       ├── hook.blade.php
        │       ├── our-clients.blade.php
        │       ├── our-plans.blade.php
        │       ├── our-services.blade.php
        │       └── section-1.blade.php
        └── pages
            ├── about.blade.php
            ├── contact.blade.php
            ├── services.blade.php
            └── welcome.blade.php

9 directories, 20 files

the solution as I mentioned before was to register it manually as the documentation says in the AppServiceProvider.

app/Providers/AppServiceProvider.php

use Illuminate\Support\Facades\Blade;
use App\View\Components\web\header\Banner;

...
public function boot()
{
    Blade::component('banner', Banner::class);
}

resources/views/components/web/header/index.blade.php

<header>
    <x-web.header.nav />

    <x-banner />
</header>

Please or to participate in this conversation.