Laravel "Unable to locate a class or view for component" in production environment

user_11844218 0
Viewed 33882

I develop on a Mac locally. Latest version of Big Sur.

Today I went to deploy my app to production via an Ubuntu server through Forge, and got greeted with an error I've never seen before, and can't find an answer to online. I can see MANY people complaining about it, but all anyone has said on other answers is link to issues that don't have solutions or even explanations really, so that's why I'm asking a new question.

The exact error is this; Unable to locate a class or view for component [layouts.base]. (View: /home/forge/default/releases/20201204084441/resources/views/layouts/app.blade.php)

In my app I have; app\View\Components\Layouts\App.php which looks like this;

<?php

namespace App\View\Components\Layouts;

use Illuminate\View\Component;

class App extends Component
{
    public function render()
    {
        return view('layouts.app');
    }
}

Then I also have; resources\views\layouts\app.blade.php

<x-layouts.base>
<!-- contents -->
</x-layouts.base>

(Also pretty much the same for base)

Works flawlessly on Mac. As soon as I deploy it on Ubuntu, I get the error above that it is "unable to locate a class or view" with those names.

Can someone please instruct me on how I can go about fixing this, since so far I have absolutely no idea and despite knowing that case sensitivity is probably the issue as per the other questions about this, I cannot find any actual solution or way to resolve this.

laravel-blade laravel-livewire laravel php
8 Answers

I had the same problem. Thanks to your question, I could find out how to solve it :D

In my case, I had created a component inside another folder, for better organization sake:

$ php artisan make:component Tutorial/channelName/Alert

So it created the view component inside the following directory:

views/components/tutorial/channel-name/alert.blade.php

Now, to call your component you do it this way:

<x-tutorial.channelName.alert />

That's pretty much it.

user_18832560

I was facing the same issue and I fixed it by cross-checking my folder name.

Please note that the folder name should be components and not component.

Refer the screenshot for a better idea.

enter image description here

Example:

In case you are following the convention, one more thing is that if you have a file at

views/components/admin/side-menu/side.blade.php

You can call your Component as:

<x-admin.side-menu.side></x-admin.side-menu.side>

Explained:

The x- used in the blade syntax basically tells that you are selecting folder or file from the Components folder.

The . (dot) used is for every directory you dig to the blade file you want to use.

user_160346770

Well, I had the same problem but I realized that the error was the class name of the component. I didn't capitalize the class name and when I did capitalize the class name I stopped getting that error and my project worked well.

Please try capitalizing the class name that matches the component in the error message.

user_102095910

In my Case, I didn't provide the namespace in the Component, it solved after providing namespace.

user_110266470

when I was a beginner I got the same error But in my case, there is all ok but there is a small syntax error <x- card /> there is a gap between card and dash which is not correct so there should be no space between dash and card <x-card /> so try once maybe this is your problem.

user_152219920

I had the same problem - solution was to change: <x-forms.inputradio> to: <x-forms.inputRadio> just letter size..

user_39893400

The issue for the mentioned problem is case sensitive,

for local looks like its case insensitive reasons its works for local perfect but breaks on serve.

if you have create new component inside any new folder i.e

$ php artisan make:component Widgets/CustomAlert

it will create two files, class and blade file for the component. class file

app\Views\Components\\CustomAlert.php

blade file

resources\views\components\widgets.custom-alert.blade.php

you can render component with either class or with blade file. for class make sure folder, class name in case sensitive ie.

<x-Widgets.CustomAlert />

to render blade file it should be

<x-widgets.custom-alert />

Note if you have manually relocate the file, make sure your namespace in class file, filename and the component call syntax should be match(with case sensitive)

examples are just for reference try to compare syntax and names with your files,folder.

I hope it will help :)

user_157243850

This happens at server. try not to make components inside folder.. i had the same issue at server but did not get any solution, the only solution worked is to keep your components outside any sub folder

user_177473510
Related