Issues when redirecting to root route
n00ki opened this issue · 4 comments
Hey :)
So I've recently decided to make my SvelteKit projects just a bit less dependent on JavaScript (I do understand the irony, yet isn't that just a beautiful thing to be able to say? 😎 )
sveltekit-flash-message
quickly became a crucial addition to my toolbox as I'm trying to create equivalently great interfaces for both JS-enabled/disabled environments, and I believe this is a great opportunity to thank @ciscoheat once again for his amazing work on both sveltekit-flash-message
and sveltekit-superforms
. these are absolutely fantastic solutions for meaningful problems!
I did find a possible issue, though:
When redirecting to the root route using the custom redirect
helper, and client-side isn't directly involved (Implementing a logout form action, for example) - flash messages aren't displayed. refreshing the page makes the message appear (I suspect the load function gets retriggered, hence the update). redirecting to any other route works as expected.
The same behavior was noticed when trying to redirect to root after form submissions with actual data validation (login, for example), yet that was fixed by setting flashModule
as the module on the client side (in superForm
options).
i also tried to hack a workaround by redirecting to the same URL and triggering the load function which redirects again to the root route with the flash message using invalidateAll
. still, nothing.
Any ideas? am I missing something here?
Hey, thank you so much for your kind words. :)
If the flash message appears after refresh, it's a sign that the request wasn't detected as a server-side request, so it is kept for the client to handle, which in your case won't do anything since there is no javascript active on the page? Very strange that it happens only on the root route.
Here is the client request detection: https://github.com/ciscoheat/sveltekit-flash-message/blob/master/src/lib/server.ts#L37-L53
Can you look at the request and see if it for some reason matches the client request detection here?
When logging the request, I see that sec-fetch-dest
is empty
, and accept
is */*
.
You pointing me in this direction was very helpful, though.
It seems like using enhance
on the form was the root cause of this issue.
Removing use:enhance
from the form solved it immediately.
<form
id="logout"
action="/logout"
method="POST"
use:enhance={() => {
return async ({ result }) => {
await applyAction(result);
invalidateAll();
};
}} />
// to
<form
id="logout"
action="/logout"
method="POST"
/>
even though it works, i still wonder why it is happening...? and why exclusively when redirecting to root?
If you're using SvelteKit's use:enhance
, you need to update the flash message in the callback: https://github.com/ciscoheat/sveltekit-flash-message#example-1-enhance
If you're using SvelteKit's
use:enhance
, you need to update the flash message in the callback: https://github.com/ciscoheat/sveltekit-flash-message#example-1-enhance
I'm really not sure how I managed to miss that part in the docs🤷♂️sorry for that.
Although still quite baffled by the fact it only happens when redirecting to root, my best guess is that it has something to do with my specific project setup. I'll try to find out what exactly is going on...
Anyhow, thanks again for being so communicative and for truly helping us all!