View Transitions + custom 404 breaks client side scripts when trying to navigate away to another page

[erfianugrah]

Astro Info

Astro                    v4.0.8
Node                     v21.5.0
System                   Linux (x64)
Package Manager          npm
Output                   static
Adapter                  none
Integrations             @astrojs/sitemap
                         @astrojs/mdx
                         @astrojs/tailwind
                         @astrojs/markdoc

If this issue only occurs in one browser, which browser is a problem?

All browsers (tried Firefox, Brave, Edge, Chrome, Vivaldi so far)

Describe the Bug

Using the lifecycle components worked fine for other pages, but when navigating away from a 404, nothing works. The hoisted.js is there though but not running unless I put data-astro-reload on the nav, but this just means that navigating to any <a> that's not only on the nav would also fail, and I don't want to have to put that on everything, kinda defeats the purpose of using view transitions, though very curious it only occurs when the path doesn't exist and gives a 404, if i type in 404 manually as the page, then it works when navigating to other pages which has scripts.

You can try this on https://967dd44b.astro-blog-2.pages.dev/ , just use any random path, and it'll have 404, then use the hamburger or click the icon, you'd see the images not rendering (based on js to randomly generate one)

The custom 404 works on Cloudflare Pages but not on Deno Deploy

The routing works on npm run dev, but when building and running on preview, the custom 404 page is not rendered when going to a path that doesn't exist (i.e. 404) or when deployed.

This is the gh repo: https://github.com/erfianugrah/revista-3

Current state: What i've done is to set a is404 prop, and use that conditional to make sure there are no links on the 404 page and do data-astro-reload back to the homepage, which is kinda what the astro docs page is doing I think, though is this a known issue/bug? Cause I've had to edit all my layouts to pass that prop to make sure only the 404 page has the conditional rendering, you can try this on https://www.erfianugrah.com/

What's the expected result?

When a 404 happens, and the 404 page is rendered, navigating away should work like for other pages with View Transitions.

Link to Minimal Reproducible Example

https://967dd44b.astro-blog-2.pages.dev/

Participation

• [X] I am willing to submit a pull request for this issue.

[martrapp]

Hi @erfianugrah, have you updated the deployment since you opened this issue? I think I was able to see the missing images there before, but now I can't reproduce it. I went to the link, appended a non-existent path to the URL and clicked on the ea logo at the top left of the 404 page. Then the main page came up, showing a picture. Hitting back and forward transitions between main and 404 page for me and each time shows a new image.

[erfianugrah]

Hi @martrapp I have yeah:

Astro                    v4.0.9
Node                     v21.5.0
System                   Linux (x64)
Package Manager          npm
Output                   static
Adapter                  none
Integrations             @astrojs/sitemap
                         @astrojs/mdx
                         @astrojs/tailwind
                         @astrojs/markdoc

But if you use this: https://967dd44b.astro-blog-2.pages.dev/, and let's say to /test or some random path that don't exist, and you tried let's say long form or go back to Home, the images there are randomly chosen with client side js, so you it'll just be blank. I'm still able to repro with this URL.

[martrapp]

https://github.com/withastro/astro/assets/94928215/0b9690f4-66bf-426c-a61a-c8ff70e1f655

[erfianugrah]

On Chrome

[martrapp]

Mine too was Chrome on Windows (120.0.6099.130). On the first load, I sometimes shortly saw that empty frame with wich your video stops. But then the image was shown. How shall we proceed?

[erfianugrah]

I've no clue, so if you refresh on that page, it'll work hence data-astro-reload. By any chance, you would be availabe for a call so I can repro on Chromium and Firefox? On Chromium you'll get the placeholder thing, on firefox, nothing shows up. How I got the idea to remove all links on 404 and set a data-astro-reload link to Home was actually from the official docs.

We could use the Discord chat.

Version 22H2
Installed on    ‎22/‎11/‎2022
OS build    19045.3803
Experience  Windows Feature Experience Pack 1000.19053.1000.0

[martrapp]

Maybe you should ask for further help in the #support channel on discord?

[erfianugrah]

Ya I posted there, but I didn't think it was particularly something I did wrong though, pretty sure the lifecycle components were used correctly astro:page-load for most of them, and astro:after-swap for the theme on specifically, and this only occurs specifically on the 404, but you type in 404 as the page, it works.

non-existent page:

404 page:

[martrapp]

any errors in the browser console?

[erfianugrah]

Yeah, but just because of Honey on Firefox, Chrome has no extensions. And on Chrome it's just that it's a 404:

https://github.com/erfianugrah/revista-3/commit/7bc818fa73475f8b02e6c4e6a2b6bd4792c83d5e -- this is the commit that the error is reproducible on

[martrapp]

I can reproduce it on Firefox. The difference between 404 and xyz seems strange to me.

[erfianugrah]

Yeah, I mean my current workaround works but it works by funneling people to only one link on the 404 page to home with data-astro-reload, the setup was tedious though

[martrapp]

I'll take a look at your repo...

[erfianugrah]

Thanks! Hope it's my issue and not a bug

[martrapp]

Either way, it needs a fix 😄

[martrapp]

Hi @erfianugrah Cloned the repository, set <BaseLayout title="pageTitle" is404Page={false}> in 404.astro, did a build and deployed the dist folder to Cloudflare pages: https://test-aan.pages.dev/. Runs like a charm on Chrome and Firefox. Can not reproduce any of the above issues.

Maybe you also want to try out with a fresh clone or delete your node_modules and reinstall.

[erfianugrah]

Ah. Hi @martrapp as mentioned, the current commit at HEAD you won't be able to repro I think because there's only one link from the 404 page and that has the data-astro-reload. You'd need to pull from the commit that I sent earlier

[martrapp]

As mentioned, I reenabled the navlinks by setting is404 to false. I did not click on the button with data-astro-reload but on long-form from the hamburger menu as you requested earlier.

Please try for yourself. Support remaining issues with a minimal reproduction or close this issue if it works for you.

[erfianugrah]

I reenabled the navlinks by setting is404 to false. - Ah, sorry, missed that.

Same build but with build cache: https://fa4ec487.astro-blog-2.pages.dev/

I cleared my build cache and did re-build: https://b5e650e6.astro-blog-2.pages.dev/

They still seem to have the same issue, this is confusing. I don't quite know what the difference here is.

I did test on a Macbook Pro (M1), and it works there. But Windows, iOS and Android, the navigation fails, very confusing. But your build works on mine though...

[erfianugrah]

I tested further, it might be due to how Pages build it from git. Direct upload works

[erfianugrah]

I think we can close this, seems to be related to Pages instead

[martrapp]

Hi @erfianugrah, in fact I didn't build on Cloudflare. I uploaded the pages I built locally! Errors like that are quite unnerving, but at least it works now!

[erfianugrah]

Yeah that's the key. I was like what else have I not tried so it must be something in the build process.