Package Causes rendering issue in InertiaJs with VueJs.

[alsong]

Describe the bug A clear and concise description of what the bug is. So i wanted to test the package with inertiajs. I got the dummy project used for inertiajs. Which is here. When you run the project its okay. But just after installing the project, then the Vuejs shows error in console, ofcourse the screen is blank

To Reproduce Steps to reproduce the behavior:

1. Download this Inertiajs custom project [PingCRM]
2. Setup the project with installations
3. Launch the project and login. All will work well
4. Install Firestore Eloquent and the whole page will be white

Expected behavior The expected behavior is that the page is rendered

Screenshots In the screenshot it will contain the error that is returned after you installed the package and then navigate to another page.

I noticed that the requests from the backend comeback as expected but the file rendering is affected

Desktop (please complete the following information):

• OS: Windows 10
• Browser Opera and Edge

Additional context Am using Laravel 10

[Freddywhest]

[PingCRM] comes with laravel 8. Try setting up inertiajs manually or with laravel >= 9.

[alsong]

I went to laravel and created a new inertiajs project using laravel breeze. I ran the project and it opens. Now when i install the package, this package sort of destroys the auth session and i am logged out. Then it routes me to the login page, now the login and register pages open because you don't have to be authenticated to view them.

The welcome page returns a white blank screen. In this scenario its looking for 'user' promise) TypeError: Cannot read properties of undefined (reading 'user')

That means this package it blocking the Auth session that provides the details of the authenticated user. I think this is where the issue is.

[alsong]

@Freddywhest Okay for example in welcome route "/"

Route::get('/', function () {
    return Inertia::render('Welcome', [
        'canLogin' => Route::has('login'),
        'canRegister' => Route::has('register'),
        'laravelVersion' => Application::VERSION,
        'phpVersion' => PHP_VERSION
    ]);
});

in the vue file it has

 <Link
                v-if="$page.props.auth.user"
                :href="route('dashboard')"
                class="font-semibold text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white focus:outline focus:outline-2 focus:rounded-sm focus:outline-red-500"
                >Dashboard</Link
            >

and your package prevents this $page.props.auth.user

but when i do

  $user = auth()->user(); // Using the auth() helper function
    return Inertia::render('Welcome', [
        'canLogin' => Route::has('login'),
        'canRegister' => Route::has('register'),
        'laravelVersion' => Application::VERSION,
        'phpVersion' => PHP_VERSION,
        'user' => $user
    ]);

and then in the vue file

 <Link
                v-if="user"
                :href="route('dashboard')"
                class="font-semibold text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white focus:outline focus:outline-2 focus:rounded-sm focus:outline-red-500"
                >Dashboard</Link
            >

it works, so that means one has to change alot in their code to work with this package

[Freddywhest]

The issue has been successfully addressed. To ensure you benefit from the latest improvements and bug fix, consider updating to the latest version (1.1.3). If your issue is resolved with the latest update, please consider closing the issue. However, if you continue to encounter challenges, feel free to provide details about the issues you are facing. Thank you!

[Freddywhest]

@Freddywhest Okay for example in welcome route "/"

Route::get('/', function () {
    return Inertia::render('Welcome', [
        'canLogin' => Route::has('login'),
        'canRegister' => Route::has('register'),
        'laravelVersion' => Application::VERSION,
        'phpVersion' => PHP_VERSION
    ]);
});

in the vue file it has

 <Link
                v-if="$page.props.auth.user"
                :href="route('dashboard')"
                class="font-semibold text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white focus:outline focus:outline-2 focus:rounded-sm focus:outline-red-500"
                >Dashboard</Link
            >

and your package prevents this $page.props.auth.user

but when i do

  $user = auth()->user(); // Using the auth() helper function
    return Inertia::render('Welcome', [
        'canLogin' => Route::has('login'),
        'canRegister' => Route::has('register'),
        'laravelVersion' => Application::VERSION,
        'phpVersion' => PHP_VERSION,
        'user' => $user
    ]);

and then in the vue file

 <Link
                v-if="user"
                :href="route('dashboard')"
                class="font-semibold text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white focus:outline focus:outline-2 focus:rounded-sm focus:outline-red-500"
                >Dashboard</Link
            >

it works, so that means one has to change alot in their code to work with this package

Please update to the latest version (1.1.3)

[Freddywhest]

The bug is been fixed with the latest version (1.1.3)

[alsong]

okay let me update and i see

[Freddywhest]

Great! Take your time with the update, and feel free to reach out if you need any help or have any questions afterward.

[alsong]

I have updated in laravel 10 and in the PingCRM project and they have both worked. Thanks for the great work