script with "data-astro-rerun" cant have external library, give error

[TheElegantCoding]

Astro Info

Astro                    v4.7.1
Node                     v20.10.0
System                   Windows (x64)
Package Manager          npm
Output                   static
Adapter                  none
Integrations             @astrojs/sitemap
                         @astrojs/partytown

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

No response

Describe the Bug

What's the expected result?

<script data-astro-rerun type='module'>
  import screenfull from "screenfull";
</script>

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-a1zlce?file=src%2Fpages%2Findex.astro,package.json

Participation

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

[Trombach]

That's expected behaviour. According to the docs data-astro-rerun adds is:inline implicitly. This actually happens when you add any attribute to a script tag that is not src. is:inline prevents the script from being processed, optimized or bundled, so you can't use an import statement that just references the name of an external package.

[martrapp]

Hello @TheElegantCoding, I will close this issue as it was perfectly answered by @Trombach.
Depending on your build environment, you might be able to use import screenfull from "./node_modules/screenfull";

[TheElegantCoding]

Hello @martrapp thanks, yes ./node_modules works, but only in dev mode, not in production, it give me 404 when the site is deployed, what should i do to make it work ?

[martrapp]

Are you using view transitions?

[TheElegantCoding]

yes, that's why i need data-astro-rerun otherwise the script only work the first time

[Trombach]

@TheElegantCoding In my opinion it might be best to rethink your approach to this. It might be better to execute your code based on one of the lifecycle events Astro provides. For example

<script>
  import screenfull from "screenfull";

  function init() {
    /* use screenfull library */
  }

  // run on initial page load
  init();

  // rerun in every "after-swap" event
  document.addEventListener("astro:after-swap", init);
</script>

[TheElegantCoding]

@Trombach thank you that worked as expected, i actually understand something with this, first i try to only add the event listener in the astro:after-swap

<script>
  // Code....

  document.addEventListerner('astro:after-swap', () => {
        button?.addEventListener('click', showVideo);
  })

</script>

but this doesnt work, it works if i put the select inside the function like this, it looks like when the view transition happens recreate or repaint the element and needs to be selected again

<script>
  // Code....

  document.addEventListerner('astro:after-swap', () => {
        const button = document.getElementById("principalVideo");
        button?.addEventListener('click', showVideo);
  })

</script>