compiler
compiler copied to clipboard
🐛 BUG: Ternary breaks compile when using an Astro component
What version of @astrojs/compiler are you using?
1.0.0-beta.72
What package manager are you using?
yarn
What operating system are you using?
Mac
Describe the Bug
Creating an Astro component using another Astro component inside of a ternary spits out the error: ERROR: Expected ")" but found "}"
Using normal HTML elements works perfectly fine. Error only occurs when I use an imported Astro component. I have not tested using other components like JSX. Example below:
---
import ChildDiv from "./ChildDiv.astro"
const { special } = Astro.props;
---
<!-- Works beautifully -->
{special ? <div>
<p>Special</p>
</div>
:
<p>Not special</p>}
<!-- Does not work -->
{special ? <ChildDiv>
<p>Special</p>
</ChildDiv>
:
<p>Not special</p>}
Even with each and/or all parts encapsulated in parentheses, the error remains.
Link to Minimal Reproducible Example
https://stackblitz.com/edit/github-mtgkzp?file=src/components/TestDiv.astro
Just discovered that surrounding the Astro component with a fragment fixes this.
{special ? <><ChildDiv>
<p>Special</p>
</ChildDiv></>
:
<p>Not special</p>}