compiler icon indicating copy to clipboard operation
compiler copied to clipboard

🐛 BUG: Ternary breaks compile when using an Astro component

Open KyleFontenot opened this issue 3 years ago • 1 comments

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

KyleFontenot avatar Jul 14 '22 21:07 KyleFontenot

Just discovered that surrounding the Astro component with a fragment fixes this.

{special ? <><ChildDiv>
  <p>Special</p>
</ChildDiv></>
:
<p>Not special</p>}

KyleFontenot avatar Jul 14 '22 22:07 KyleFontenot