Components' Script Element Re-Excuted Unexpectedly When Using View Transitions

[SamuNatsu]

Astro Info

Astro                    v5.1.1
Node                     v20.18.1
System                   Linux (x64)
Package Manager          pnpm
Output                   static
Adapter                  none
Integrations             astro-d2-integration
                         html-minify
                         astro-icon
                         @astrojs/mdx
                         pagefind
                         @astrojs/sitemap
                         @astrojs/tailwind

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

No response

Describe the Bug

I wrote some web components with custom elements, but it seems that the scripts for defining the custom elements executed multiple times:

What's the expected result?

The scripts should not be re-excuted.

Only occurs after SSG, and no error when in development mode.

In the StackBlitz example, you can preview the build output, in browser DevTools it turns out:

Do I use the web components in a wrong way? Or it is a bug?

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-hm8w1cn2?file=src%2Fpages%2Findex.astro

Participation

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

[martrapp]

Hi @SamuNatsu 👋🏼, I'm sorry that you ran into this issue.

The cause of the issue is that Astro re-executes inline scripts if they are found on the new page and haven't been on the old page. Astro normally turns scripts into external module scripts. External module scripts are only be executed once. Since Astro 5, an optimization automatically turns small scripts into inline script even if they do not have an is:inline direcitve. Thus navigating between page2 and the other pages executes the registration code on all visits of page2. And <ClientRouter/> effectively turned your app into a single page application. Thus the redefine errors. For more details see #12804.

The simplest hot fix right now seems to be adding an import of "astro:transitions/client" at the beginning of your script.

<script>
  import "astro:transitions/client";
  class Test extends HTMLDivElement {
  ...

Closed as a duplicate to #12804