Package Inertia View Issue

Hi, I have a folder structure as shown below

┌──────────────────────────────────┐
│Packages                          │
├┬────────────────────────────────┬┤
││JDH                             ││
│┼┬──────────────────────────────┬┼│
│┼│Backbone                      │┼│
│┼┼┬────────────────────────────┬┼┼│
│┼┼│src                         │┼┼│
│┼┼┼┬──────────────────────────┬┼┼┼│
│┼┼┼│resources                 │┼┼┼│
│┼┼┼┼┬────────────────────────┬┼┼┼┼│
│┼┼┼┼│                        │┼┼┼┼│
│┼┼┼┼┴────────────────────────┴┼┼┼┼│
│┼┼┼│BackboneController.php    │┼┼┼│
│┼┼┼│BackboneServiceProvider.p │┼┼┼│
│┼┼┼│routes.php                │┼┼┼│
│┼┼┼│                          │┼┼┼│
│┼┼┼┴──────────────────────────┴┼┼┼│
│┼┼│composer.json               │┼┼│
│┼┼┼────────────────────────────┼┼┼│
│┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼│
│┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼│
└──────────────────────────────────┘

I should add I messed up on my ascii picture creation and that the resource contains.

css
js > Pages, app.jsx, bootstrap.js
views > app.blade.php

inside the js > Pages > Welcome.jsx

Routes

<?php

use Illuminate\Support\Facades\Route;

Route::group(['prefix' => 'backbone'], function () {
    Route::get('/welcome', [JDH\Backbone\BackboneController::class, 'index']);
});

BackboneServiceProvider

<?php

namespace JDH\Backbone;

use Illuminate\Support\ServiceProvider;

class BackboneServiceProvider extends ServiceProvider
{
    /**
     * Register services.
     */
    public function register(): void
    {
        $this->app->make('JDH\Backbone\BackboneController');
        $this->loadViewsFrom(__DIR__.'/resources/js/Pages', 'backbone');
    }

    /**
     * Bootstrap services.
     */
    public function boot(): void
    {
        include __DIR__.'/routes.php';
    }
}

<?php

namespace JDH\Backbone;

use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use Inertia\Inertia;

class BackboneController extends Controller
{
    public function index()
    {
        return Inertia::render('backbone::Welcome');
    }
}

Error

Uncaught (in promise) Error: Page not found: ./Pages/./js/Pages/Welcome.jsx

LaryAI

2 years ago

Level 58

The issue is that the Inertia view is not being rendered properly. To fix this, make sure that the Welcome.jsx file is properly set up and that the backbone::Welcome view is being loaded correctly. Also, make sure that the InertiaServiceProvider is properly set up in the config/app.php file.

Here's an example of how to properly set up the Welcome.jsx file:

import React from 'react';
import { InertiaLink } from '@inertiajs/inertia-react';

export default function Welcome() {
    return (
        <div>
            <h1>Welcome to the Backbone package!</h1>
            <p>Click <InertiaLink href="/">here</InertiaLink> to go back to the home page.</p>
        </div>
    );
}

And here's an example of how to properly load the backbone::Welcome view:

return Inertia::render('backbone::Welcome', [
    'foo' => 'bar',
]);

Make sure that the backbone::Welcome view is located in the resources/js/Pages directory and that it is named Welcome.jsx.

Also, make sure that the InertiaServiceProvider is properly set up in the config/app.php file:

'providers' => [
    // Other service providers...

    Inertia\ServiceProvider::class,
],

If you're still having issues, try clearing the cache by running php artisan cache:clear and php artisan config:clear.

Randy_Johnson

2 years ago

Best Answer

Level 8

try {
            const module = await import(firstPath);
            return module.default || null;
        } catch (error) {
            console.error(`Failed to resolve page component '${firstPath}':`, error);
            try {
                const module = await import(secondPath);
                return module.default || null;
            } catch (error) {
                console.error(`Failed to resolve page component '${secondPath}':`, error);
            }
        }

1 like

Please or to participate in this conversation.