Error “Unable to find component: [landing.slider]” in subfolder

I’m encountering an issue in my Laravel project where the Livewire components work perfectly in my local development environment, but when I deploy the project to production, I receive the following error:

Unable to find component: [landing.slider]

For landing.slider component, but header and footer components work without any issues! This issue does not occur in the local development environment, only in production on server.

Here’s the setup of my landing.blade.php file:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
       ...
    </head>
    <body>
    <main class="site-main">
         <livewire:header />
        <livewire:landing.slider /> <!-- This component works fine -->
        <livewire:landing.menu /> <!-- Error: Unable to find component -->
        <livewire:landing.order-details /> <!-- Error: Unable to find component -->
        <livewire:landing.reviews />
        <livewire:landing.delivery-zone />
        <livewire:landing.features />
        <livewire:landing.banner />
        <livewire:landing.faq />
        <livewire:footer /> <!-- This component works fine -->
        <livewire:popup-wrapper />
    </main>
    </body>
</html>

The project is structured as follows:

app/
│   ├── Livewire/
│   │   ├── Header.php <!-- This component works fine -->
│   │   ├── Footer.php <!-- This component works fine -->
│   │   ├── landing/
│   │   │   ├── Slider.php <!-- Error: Unable to find component -->
│   │   │   ├── Menu.php <!-- this and all subsequent components inside landing were not found ->
│   │   │   ├── OrderDetails.php
│   │   │   ├── Reviews.php
│   │   │   ├── DeliveryZone.php
│   │   │   ├── Features.php
│   │   │   ├── Banner.php
│   │   │   ├── Faq.php

Here are detailed screenshots of my structure:

Resources folder
App folder

Question:

What could be causing this issue in the production environment, and how can I resolve it so that the Livewire components nested in subdirectories are properly recognized?

What I’ve Tried:

Correct Structure and Naming Conventions:

I verified that my Livewire components are correctly named and placed within the appropriate directories. For example, the Slider component is located at app/Livewire/landing/Slider.php, and the namespace is App\Livewire\landing.

Correct Usage in Blade:

I’m using the correct syntax for components that are nested within folders, such as:

<livewire:landing.slider />

Clearing Cache:

I ran the following commands to clear various caches, hoping to resolve the issue:

php artisan config:clear
php artisan route:clear
php artisan view:clear
php artisan cache:clear
php artisan config:cache

twinkledev

1 year ago

Best Answer

Level 1

The issue was that my folder names started with a lowercase letter, but in Livewire, all folders, components, and classes must start with an uppercase letter. So, everything inside the App/Livewire directory should begin with a capital letter. Once I renamed the folders to start with uppercase letters, the components were recognized correctly in production.

app/
│   ├── Livewire/
│   │   ├── Header.php 
│   │   ├── Footer.php 
│   │   ├── Landing/ (not "landing")
│   │   │   ├── Slider.php 
│   │   │   ├── Menu.php 
│   │   │   ├── OrderDetails.php
│   │   │   ├── Reviews.php
│   │   │   ├── DeliveryZone.php
│   │   │   ├── Features.php
│   │   │   ├── Banner.php
│   │   │   ├── Faq.php

1 like

MouteeSabouni

1 year ago

Level 11

I was going to write this, but I checked the one reply your thread had, and it turned out that it was you saying that the problem has been solved. Anyway, It's very good that you were able to catch it. Keep up the hard work!

Please or to participate in this conversation.