Comment at end of function in JSX prop causes parse error

[nicholaides]

❌ The following will cause parse errors:

<button
  onClick={=> 
    alert('hi') 
    // ❌ this comment causes parse error
  }
>

<button
  onClick={=> 
    alert('hi') //  ❌ this comment causes parse error
  }
>

<button
  onClick={=> 
    alert('hi') 
    /* ❌ this comment causes parse error */
  }
>

<button
  onClick={=> 
    alert('hi') /* ❌ this comment causes parse error */
  }
>

✅ The following will not cause parse errors:

<button
  onClick={=> 
    alert('hi') 
    // ✅ this works
    alert('hi again')
  }
>

<button
  onClick={=> 
    alert('hi') // ✅ this works
    alert('hi again')
  }
>

<button
  onClick={=> 
    alert('hi') 
    /* ✅ this works */
    alert('hi again')
  }
>

<button
  onClick={=> 
    alert('hi') /* ✅ this works */
    alert('hi again')
  }
>

Workarounds:

1. Don't put a comment at the end of a the function

2. Put semicolon at the end (if you don't need to return anything)

<button
  onClick={=> 
    alert('hi') /* ✅ this works */
    ;
  }
>

3. Add |> return to the end of your function

<button
  onClick={=> 
    getUser() /* ✅ this works */
    |> return
  }
>

[edemaine]

Interesting! Thanks for the report. This example gives a little insight into what might be going wrong here:

=>
  alert('hi')
  // foo

becomes

() => {
  return alert('hi')
}
  // foo

In addition to the JSX application, it might be nice for the comment to be brought into the block (at least when it's properly indented like this).

Yet another example that fails:

<button
  onClick=
    => 
      alert('hi') 
      // ❌ this comment causes parse error
>

[STRd6]

I agree about bringing the comment into the function block. Inside the block is actually where I'd prefer it to be but it was just outside for historic/arbitrary reasons. It may be easier to fix now with our better indentation tracking but I also recall that the way comments / whitespace gets parsed still has some nuance to it.