Astro v5 ClientRouter duplicating scripts when deployed

[Boston343]

Astro Info

Astro                    v5.1.1
Node                     v20.18.1
System                   Windows (x64)
Package Manager          pnpm
Output                   static
Adapter                  none
Integrations             @astrojs/tailwind

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

All

Describe the Bug

In preview and deployment, ClientRouter adds additional copies of any scripts on page when navigating to a new page. This causes issues with scripts on page. Things work as expected in dev mode.

You can see this issue by running pnpm preview with this demo repo, and navigating between the "Home" and "Other Page" with the dev tools Console open to see console logs. Repo here for demo: Client Router Issue Demo

What's the expected result?

Navigating to a page with a script, where the script has previously been loaded, should not add an additional copy of the script.

Link to Minimal Reproducible Example

https://stackblitz.com/github/Boston343/astro-5-client-router-demo

Participation

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

[martrapp]

Hi @Boston343 👋🏼!

Astro 5 issues short scripts as inline module scripts. The client router re-executes inline scripts if they where not also included on the previous page.

You can force them to be external by adding this to your astro.config:

export default defineConfig({
  vite: {
    build: {
      assetsInlineLimit: 0,
    },
  },
});

[martrapp]

We should make that clearer in the docs.

[edard3v]

I had the same problem. You saved my life bro, now it works as I expected, I was close to quitting Astro 😢 thanks. Although I didn't understand the explanation very well (I use google translate, I'm from Colombia). It seems super strange to me that it works in development and not in production, isn't that counterproductive? @martrapp

[Boston343]

Hey @martrapp, thanks for looking at it.

That's interesting - I always thought you had to opt-in to inlining with is:inline on the script tag. Or maybe I'm misunderstanding. But this does seem to fix the issue and it's an easy addition - appreciated!

Although with this solution, what are the negatives of doing it?

[martrapp]

Hi @edard3v happy that you didn't quit!

For a bit more background: dev and build are two different beasts for astro. We try to have them behave the same, but "build for production" runs optimizations that can't be done during dev mode with hot module replacement, which allows you to directly see your changes while you develop.

[martrapp]

@Boston343 the downside is that you also switch off base 64 urls for small assets like images < 4k.

[Boston343]

@martrapp As this doesn't look like a new Vite feature, did Astro disable it by default in v4?

[martrapp]

In contact with @bluwy about that question. Just scanning the code ;-)

[martrapp]

@martrapp As this doesn't look like a new Vite feature, did Astro disable it by default in v4?

Seems that we have more optimization opportunities with Astro 5. ;-)
The optimization is not new, but Astro 5 rather generates more smaller scripts instead of few big ones and more inlining is the consequence. Formerly, scripts used with the client side router were bundled with the router code and together always were larger than 4k.

[martrapp]

Note that this issue never seems to occur with scripts with imports like import from astro:transitions/client.

This doesn’t significantly increase your script size (beyond a few bytes for the import declaration), but it ensures Astro doesn’t inline the script because its bundled version would exceed 4 KB. Also note that this module is already cached and loaded because the client router is in use, so there should be no extra runtime cost.

[Boston343]

Note that this issue never seems to occur with scripts with imports like import from astro:transitions/client.

This doesn’t significantly increase your script size (beyond a few bytes for the import declaration), but it ensures Astro doesn’t inline the script because its bundled version would exceed 4 KB. Also note that this module is already cached and loaded because the client router is in use, so there should be no extra runtime cost.

So if you have any import statement in the script tag, it won't be inlined, even if whatever you import isn't actually used? Just want to make sure I understand that correctly.

Suggestion: I think the preferred option would be if there's an Astro config option to disable inlining of scripts (at least for scripts that don't have the is:inline attribute), which would allow for the Vite optimization to have effect over other things like CSS and small images, while allowing the old behavior of astro component <script> tags to play nicely with ClientRouter.