Astro client-side scripts

[riolly]

Description of the issue
Using swup in Astro project:

• With Scripts Plugin breaks the animation.
• Without the Scripts Plugin prevents the script that is written in the Astro file is loaded correctly. Only the <script> on the initial page is loaded correctly.

How to reproduce the issue



With Scripts Plugin:

• Just move around to the blog page.

Without Scripts Plugin:

• Remove the script plugin on main layout.
• Go to the blog by clicking the card
• Click the "Surprise me!" & inline me button
• Go back to home page
• Go back to blog page
• Click the "Surprise me!" & inline me button

Context and environment
How the script in astro work: Astro script

<script data-swup-ignore-script>
  import Swup from 'swup';
  import SwupHeadPlugin from '@swup/head-plugin';
  import SwupA11yPlugin from '@swup/a11y-plugin';
  import SwupScriptsPlugin from '@swup/scripts-plugin';
  import SwupSlideTheme from '@swup/slide-theme';
  
  const swup = new Swup({
    plugins: [new SwupHeadPlugin(), new SwupA11yPlugin(), new SwupSlideTheme(), new SwupScriptsPlugin()]
  });
</script>

Before creating this issue...

• Have you provided all helpful information available?
• Have you checked closed issues for similar/related problems?
• Have you considered creating a demo so we can help you better?

[daun]

Welcome! We've had a similar question recently, you should find some pointers there. When opening your StackBlitz link, I'm getting a SyntaxError: Cannot use import statement outside a module — that's because adding the data-swup-ignore attribute will make Astro skip bundling the script and treat it like is:inline. This is what the docs say:

Astro’s default bundling behavior will be disabled in some situations. In particular, adding type="module" or any attribute other than src to a <script> tag will cause Astro to treat the tag as if it had an is:inline directive.