Skip to content

🐛 BUG: Empty Fragments used in expressions cause error in formatter #444

@The1stWii2

Description

@The1stWii2

Describe the Bug

Using the shorthand form of the JSX Fragment (<>...</>) as a part of an expression causes a syntax error in the formatter if it does not contain anything, despite being valid syntax.
E.g.,

---

---
<div>
  {false ? <p>This won't be formatted.</p> : <></>}
  {true && <></>}
  {false || <></>}  
  {[1,2,3].map(() => {
    return (<></>)
  })}
</div>

Compare that to

<div>
  {false ? <p>This won't be displayed.</p> : <>It will be formatted though.</>}
</div>

or

<div>
  {true && <Fragment/>}
</div>

or

<div>
  <></>
  And this shows it isn't empty Fragments in of themselves.
</div>

all of which do work.

Now in almost all of these scenarios it's not entirely clear why you'd even want an empty Fragment, but I personally stumbled across this bug because I tended to use empty Fragments for the else-side of ternaries (never been a big fan of condition && result).

Steps to Reproduce

  1. npm init astro using template minimal template
  2. Modify index page to include an empty Fragment in an expression, say,
<p>This document can't be formatted.</p>
      <div>
        {false ? <p>This won't be displayed.</p> : <></>}
      </div>
  1. Open Command Palette and run Format Document.
  2. Nothing happens (opening the output of the Astro Language Server reveals that it encountered a syntax error)

Metadata

Metadata

Assignees

No one assigned

    Labels

    needs triageIssue needs to be triaged

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions