inertiajs / inertia

Inertia.js lets you quickly build modern single-page React, Vue and Svelte apps using classic server-side routing and controllers.
https://inertiajs.com
MIT License
6.34k stars 427 forks source link

Deferred svelte component renders the default slot too early #2012

Open saml-dev opened 7 hours ago

saml-dev commented 7 hours ago

Version:

Describe the problem:

There is a bug with the Deferred svelte component. It will render the components of the default slot before the props for the Svelte component have been updated. This is because the $page.props store is updated first, or at least a render happens after the store is updated but before the regular export let prop is updated.

Since the Deferred component decides what to render based on the $page store, it renders the default slot too early.

Note that passing a primitive as the deferred prop does not throw an error on the frontend, because it will just render undefined for that single render cycle. But when you pass an object as a deferred prop and try to access its properties, it throws when trying to access a property on undefined.

Steps to reproduce:

I created a repro here: https://github.com/saml-dev/inertia2-repro It includes the .env and database.sqlite to make your lives easier

  1. clone above repo
  2. npm i
  3. composer install
  4. npm run dev (and php artisan serve if not using herd/valet :D )
  5. open the app to / and use the two links to see how one works and one doesn't

Relevant files in the code are:

saml-dev commented 7 hours ago

I don't have time tonight to dig into Inertia to see where the bug is, but I'll try to do that tomorrow if I have time!