Please help with weird loading issue!

Level 73

Show us the view file and the layout file.

Sound to me like you need to tell the code where to render the content somehow.

karlm89

Level 12

Are you using Route Caching?

Level 4

@karlm89 To honest, I'm newish to Laravel - I haven't used it since version 5, but I have ran artisan route:clear and the problem still persists.

karlm89

Level 12

@chrismartinez99 Ok, so it's not a route caching issue.

Level 4

This is the entire Welcome component:

import React from 'react';
import Members from '@/Layouts/Members'
import RulesContent from '@/Content/RulesContent'
import { InertiaLink, Head } from '@inertiajs/inertia-react';
import FlashMessages from '@/newComponents/FlashMessages';


export default function Welcome(props) {

    const flash        = props.flash
    const contest_open = props.contest_open
    const the_title    = 'Welcome | ' + props.appName

    const the_content = () => {
        if (!contest_open) {
            return (<p className="font-bold">The {props.appName} is not available at this time.</p>)
        }
        else {
            if ((flash.success || flash.error)) {
                return (<FlashMessages/>)
            }
            else {
                return (<InertiaLink
                    className="button button-green"
                    href={route('signup')}
                    headers={{ 'pec-valid-path': 'welcome' }}
                >
                    <span>I have read and agree to the terms above.</span>
                </InertiaLink>)
            }
        }
    }

    return (
        <Members
            errors={props.errors}
            header={<h2 className="font-semibold text-xl text-gray-800 leading-tight">{props.appName}</h2>}>

            <Head title={the_title} />

            <div className="py-10 px-4">
                <RulesContent  />

                <div className="flex items-center justify-center my-6">
                    {the_content()}
                </div>


            </div>
        </Members>
    );
}

Level 102

Sounds like an improper inertia response. If it does not return Inertia::render()or a redirect, you get a modal. Any chance you can share the website url?

Edit : found a thread on github https://github.com/inertiajs/inertia/issues/586

Level 4

@Sinnbeck Yes, here is the URL - https://7fpyrkewiqeh33jr2684.cleaver.rocks/. Thank you!

Level 102

@chrismartinez99 so the two subpages are exactly the same except for the button?

Level 4

@Sinnbeck Yep. Well, the home link leads to "/" and rules leads to "/rules" - but both pages will contain the rules. If you click on the logo and the home link they both load in the iframe.

Level 102

@chrismartinez99 just as a test. Can you make one of them link to this? Just to see if it's the url or the code

Route::get('/welcome', [ContestantController::class,'welcome'])->name('welcome2');

Level 4

@Sinnbeck ok, I added the route and made the "home" text link to it.

Level 102

@chrismartinez99 Ok so it seems to be working with the new url? Is this shared hosting? It seems that it is doing something weird with the base url. I notice that when I click on the logo link it does not send x-inertia: true in the request. The other 2 does.

Also how are you handling layout? https://inertiajs.com/pages#persistent-layouts

Level 4

@Sinnbeck This is the createInertiaApp code:

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => require(`./Pages/${name}`),
    setup({ el, App, props }) {
        return render(<App {...props} />, el);
    },
});

Members.js is the main layout, and is used like so (this is from Rules.js since it's shorter):

export default function Rules (props) {

    const the_title = 'Contest Rules | ' + props.appName

    return (
        <Members
            errors={props.errors}
            header={<h2
                className="font-semibold text-xl text-gray-800 leading-tight">{props.appName}</h2>}>

            <Head title={the_title}/>

            <div className="py-10 px-4">
                <RulesContent />
            </div>
        </Members>
    )
}

I did try changing the variable, $contest_open = true;, but that didn't really help either. Let me know if you think I need to change the layout format. Thank you also for all of your help with this.

Best Answer

Level 102

@chrismartinez99 Anytime. Yeah perhaps try implementing persistent layouts as explained in the docs. Or maybe you can install react dev tools to debug what is rendered

Level 4

@Sinnbeck Thanks! I'll give that a shot.

Level 4

Note to anyone who comes across this discussion. This was not resolved; we changed direction to Livewire. BUT I think Inertia would have worked and the issues that I encountered were server related. We moved to Digital Ocean with Forge and other issues were resolved. I don't want to name the original hosting company, because I don't want to appear that I am bashing them. But I believe that they had caching issues that were not present on DO/Forge.

Level 102

@chrismartinez99 I find that very likely. I have used inertia since it was released and never had any such issues :)

1 like

Level 4

@Sinnbeck Thank you again for your help!