What version of astro are you using?

2.1

Are you using an SSR adapter? If so, which one?

None

What package manager are you using?

npm

What operating system are you using?

Mac

What browser are you using?

Firefox

Describe the Bug

Hi there,

I've a stackblitz to demonstrate what's happening.

Say I have a component that I've imported in the frontmatter.
In the front matter, I've a little bit of logic to decide whether or not to show the component on the page.

I've a JSX Conditional that should only show the "TestComponent" if "showTestComponent" is true. In my example, it's false so shouldn't show.

From a HTML point of view, the component doesn't render, but the component's JS and CSS still gets pulled into the page (hence the orange background and the console log message).

I wouldn't consider this to be the expected result.

This is a a simplified version of what I'm trying to achieve (see attached).

I have a CMS that has a "page builder" that basically returns an array of "components" that the page is made of.
I want to loop through this array and output the relevant components for that page.

However, what's happening now is that the CSS and JS from ALL the available components and this is not ideal.

I only want / would expect the JS and CSS from the chosen components to be included on the page.

I've tried all the variations I can think of, doing the logic in the front matter and not with the same results.

If someone has an idea of how I could achieve what I'm after, I'd greatly appreciate it.

TestComponentChecker.txt
ComponentChooser.txt

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-jupkzz?file=src/pages/index.astro

Participation

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