Inertia resolves the page twice at first load

[mhelaiwa]

Versions:

• @inertiajs/inertia version: 0.11.0
• @inertiajs/inertia-vue version:0.8.0

Describe the problem:

When open the page the first time, the code inside resolve function will execute twice.

Steps to reproduce:

createInertiaApp({
    resolve: (name) => {
        const page = require(`./Pages/${name}`).default
        page.layout = page.layout || Layout
        return page
    },
    setup({ el, App, props, plugin }) {
        Vue.use(plugin)
        let vm = new Vue({
            render: h => h(App, props),
        }).$mount(el);
    },
})

[craigrileyuk]

Mine's executing 3 times...

[reinvanimschoot]

We are experiencing the same issue. I just tested with a fresh Rails/React project and I see the same behaviour. Anyone found any answer to this?

[rajan-parmar]

I am also facing this issue with: @inertiajs/inertia version: 0.11.0 @inertiajs/inertia-vue version:0.6.0

[reinvanimschoot]

I tried to reproduce this issue in a new project using React, Rails and Inertia (bundled with Webpacker).

The project can be found here

Even in a newly built app, with the most recent versions of both Inertia and Inertia-rails, the page, without even providing it with props or using usePage is rendered twice.

The only solution that fixed the issue is to wrap the page function in React.memo. I haven't tried this in our production app so I don't know whether or not this results in other problems but at least the render only happens once.

Maybe this is something that Inertia could use under the hood?

[RationalFragile]

Also facing this same issue. Any ideas how to fix it with vue3?

[BorisKM]

The same..

[devsaider]

Related issues: #724, #716, https://github.com/inertiajs/inertia-laravel/issues/429

I think it's a framework independent inertia issue. I've faced this when using react It happens because swapComponent is called on page initialisation https://github.com/inertiajs/inertia/blob/0dd3c0fe421f523c905e0720f92ca823a23bab86/packages/core/src/router.ts#L84-L87 and swapComponent updates "current" state, so your component renders twice https://github.com/inertiajs/inertia/blob/c9e12b3158370182a270e887ec9541067826e91c/packages/react/src/App.ts#L32-L38

I commented out handleInitialPageVisit call. It works for me, but i don't use any routes. You can test it too: npm install 'https://gitpkg.now.sh/devsaider/inertia/packages/inertia?fix/double-render&scripts.postinstall=npm%20install%20--ignore-scripts%20%26%26%20npm%20run%20build' I didn't create pull request because i don't have time or will to test this it with routes. Please let me know if this works for you

[fatoskurtishi]

Same here.. using inertia laravel react resolve: (name) => resolvePageComponent( ./Pages/${name}.tsx, import.meta.glob("./Pages/**/*.tsx"), ), is called twice on initial load! any fix for this ?

[craigrileyuk]

https://github.com/inertiajs/inertia/pull/1608 should resolve this issue if it's cleared for release

[fatoskurtishi]

#1608 should resolve this issue if it's cleared for release

my page components rendered 2 or 3 times and I thought that "resolveComponent" is doing it, but after this patch #1608 it dropped from 3 to 2 :) but still 2 renders. this is the console.log() by order.

1. resolve Patched app.tsx
2. createInertiaApp setup app.tsx
3. root.render app.tsx
4. Welcome page Welcome.tsx
5. Welcome page Welcome.tsx

[reinink]

Hey! Thanks so much for your interest in Inertia.js and for sharing this issue/suggestion.

In an attempt to get on top of the issues and pull requests on this project I am going through all the older issues and PRs and closing them, as there's a decent chance that they have since been resolved or are simply not relevant any longer. My hope is that with a "clean slate" me and the other project maintainers will be able to better keep on top of issues and PRs moving forward.

Of course there's a chance that this issue is still relevant, and if that's the case feel free to simply submit a new issue. The only thing I ask is that you please include a super minimal reproduction of the issue as a Git repo. This makes it much easier for us to reproduce things on our end and ultimately fix it.

Really not trying to be dismissive here, I just need to find a way to get this project back into a state that I am able to maintain it. Hope that makes sense! ❤️

[zcuric]

@lepikhinb I've seen your contributions to the repository. This is still an outstanding issue and it happens to me as well. Can you check it out? Is there a way I can help contribute?

[AlvesJorge]

Bump. Happening to me too