JS included without its component. | Astro Lounge | Page 1

wraith harness May 15, 2023, 9:00 PM

#

I was not sure if this is due to me looking at the site on a local server through npm or if it would persist when I built it out, but I have 2 components, 1 has javascript imported in its script tag and the other does not. In my main layout including only one of these components with a ternary operator. But the javascript is always ran even if its component isn't included through the ternary operator.
Here is a minimum reproducible example: https://stackblitz.com/edit/astro-js-without-component?file=src/layouts/MainLayout.astro

StackBlitz

Javascript Included without Component - StackBlitz

I have an astro component (HiddenComponent.astro) that imports hidden.js. I use a ternary operator in my MainLayout.html to that includes either VisibleComponent or HiddenComponent. But either way hidden.js is included and its console.log is run.

surreal dove May 15, 2023, 9:43 PM

#

Scripts and styles of an Astro component are included on the page as soon as the component is imported, regardless of it being rendered or not
That's kinda not a bug, just a limitation

wraith harness May 16, 2023, 1:01 AM

#

oh ok, I understand, thank! I can work around it but wasn't sure if I was doing something wrong!

polar plinth May 16, 2023, 11:04 AM

#

@surreal dove do you know if there is any intent to change this in the future? I can’t believe that this was intended when it was coded

#JS included without its component.