Server Islands with ClientRouter (astro:transitions) not interactive

[foosionsapps]

Astro Info

"@astrojs/node": "^9.0.0",
"astro": "^5.0.9"

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

All browsers

Describe the Bug

Using Server Islands and ClientRouter when I navigate to another page my component is not loading and also in cases that is loaded the component is not working.

What's the expected result?

After the Server Island component is loaded should be able to make it work interactive.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-spsbz89l

Participation

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

[martrapp]

Hi @foosionsapps 👋🏼, thank you for opening this issue!

In deed the example does not execute the component script after view transition when in DEV mode.

When build for production everything seems to work fine, but you have to run the component script directly, without putting it into an astro:after-swap listener.
The reason for this change is that view transitions have completed before the server islands are replaced.

[foosionsapps]

Hi @martrapp thanks for your answer. I tried running the app in production and commented the astro:after-swap listener and the component is still not loading. Only loads and I can use the counter button refreshing the page route1, when I navigate back to home page and then go again to route1 the component is not loaded and keep showing the fallback slot.

[martrapp]

Let me check again later. Did not work in Stackblitz for me so I ran it locally.

[martrapp]

Just tried again:
At least the production build works for me.

• re-downloaded your updated stackblitz where the script looks like this

<script>

    // document.addEventListener('astro:after-swap', () => {
        const button = document.querySelector('#counter-button');
        let count = 0;

        if(button !== null) {
          button.addEventListener('click', () => {
            count += 1;
            button.textContent = `Count: ${count}`;
          });
        }
    // });    
</script>   

ran

• npm i
• npm run build
• npm run preview
• tested on Chrome 131 on Windows
  Both routes work fine for me and the counters work on both

What is different in your setup?

[foosionsapps]

Hi, I just tried locally and as you mentioned if I run the project in production works fine but not in dev using the node adapter:

Navigating between pages using ClientRouter

Dev: (locally)
Link1 without data-astro-reload: Not working
Link2 with data-astro-reload: Working

Prod: (locally)
Link1 without data-astro-reload: Working
Link2 with data-astro-reload: Working

 "@astrojs/node": "^9.0.0",
 "astro": "^5.1.0"

Also I tried with vercel adapter and is not working in dev locally, I deployed to vercel to test in prod and it doesn't work either.

Navigating between pages using ClientRouter

Dev: (locally)
Link1 without data-astro-reload: Not working
Link2 with data-astro-reload: Working

Prod: (deployed on vercel)
Link1 without data-astro-reload: Not working
Link2 with data-astro-reload: Not working

 "@astrojs/vercel": "^8.0.1",
 "astro": "^5.1.0"

I tested on Chrome 131 on Mac.

[martrapp]

Thank you for the detailed analysis, @foosionsapps!

One question regarding Vercel in prod: When you write it is not working is it
a) the fallback is not replaced with the counter
b) after the delay, the counter shows, but it does not react to clicks?

[foosionsapps]

Using the Vercel adapter in prod the fallback is not replaced with the counter (server-island).

[martrapp]

The production failure on Vercel might be related to #12803.
Do you see any errors in the browsers console, maybe something like this?

[foosionsapps]

Yes, I'm getting the same error.

[matthewp]

The provided example does seem to work in dev. What am I missing?

[cabaucom376]

I'm not really sure if this is the same issue but I cannot get astro:page-load to seemingly have an effect. I am just trying to make a mobile navigation menu but it only executes if refreshing on the page instead of navigating to the page.

  <script>
    const overviewButton = document.querySelector("[data-toggle-overview]");
    const overviewPane = document.querySelector("[data-overview-pane]");
    const links = document.querySelectorAll("[data-category-link]");

    function initializeMenuToggle() {
      overviewButton?.addEventListener("click", () => {
        overviewPane?.classList.toggle("hidden");
      });

      links.forEach((link) =>
        link.addEventListener("click", () => {
          overviewPane?.classList.add("hidden");
        })
      );
    }

    document.addEventListener("astro:page-load", () => {
      initializeMenuToggle();
    }); // Works the same with or without page-load
  </script>

[martrapp]

Hi @cabaucom376 👋🏼, no, your problem is completely unrelated to this issue ;-)

You should use astro:page-load to update the just swapped-in page. But when your script is loaded, it saves pointers to elements on the first page. After each navigation, it then modifies those long gone elements, but does nothing for the current page.

When you move those three const from the beginning of your script into the initializeMenuToggle function, all should work fine.

[cabaucom376]

Thank you @martrapp, I have since realized that solution and fixed all issues on my desktop Chromium-based browser, but the script still doesn't function correctly on iOS Safari. I have had someone else report to me that they are having some script issues on the latest version of Astro, but I will do some digging when I am back from vacation and create a proper issue to not further clutter this one.