Undefined Variable in Laravel 7 Components

Question

I have a weird issue where I'm setting a variable for a Laravel 7 Component to be displayed in the component. While it works in my development environment (MAMP on MacOS) it does not work when I load it to my shared hosting in HostGator. In HostGator it throws a 500 error complaining about "Undefined Variable: page_title".

Any ideas as to what could be happening here?

App/Components/Layout/ContentHeader.php

class ContentHeader extends Component
{
    public $page_title;
    public $breadcrumbs = [];

    /**
     * Create a new component instance.
     *
     * @return void
     */
    public function __construct()
    {
        $this->page_title = 'Some title';
        $crumb = new \stdClass();
        $crumb->label = 'Home';
        $crumb->active = false;
        $this->breadcrumbs[] = $crumb;

        $crumb = new \stdClass();
        $crumb->label = $this->page_title;
        $crumb->active = true;
        $this->breadcrumbs[] = $crumb;
    }

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

<!-- Resources/views/components/layout/content-header.blade.php -->
<div class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1 class="m-0 text-dark">{{ $page_title }}</h1>
            </div><!-- /.col -->
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    @foreach ($breadcrumbs as $crumb)
                        @if (!$crumb->active)
                            <li class="breadcrumb-item"><a href="#">{{ $crumb->label }}</a></li>
                        @else
                            <li class="breadcrumb-item active">{{ $crumb->label }}</li>
                        @endif
                    @endforeach
                </ol>
            </div><!-- /.col -->
        </div><!-- /.row -->
    </div><!-- /.container-fluid -->
</div>
<!-- /.content-header -->```

Answer 1

There is a whole conversation about this on GitHub. The solution is pretty simple

Your components controller is in lowercase and should be with Uppercase. Go here for the conversation