Valid JSX comments break <Choose>
SourceCode opened this issue · 6 comments
When using JSX comments inside of a <Choose> block during compilation with babel/webpack an error is presented that only <When> and <Otherwise> are valid.
The error displayed is: Only <Otherwise> and <When> are allowed child elements for <Choose>!
The problem here is that these are not child elements, they are comments in JSX.
https://facebook.github.io/react/docs/jsx-in-depth.html#comments
Current Workaround
The workaround for this is to include them inside the markup for the <When> or <Otherwise>, but this results in poor form. The comment is for this specific block and it's condition - not it's containing elements. We are describing "this is the condition this block of code fulfills" rather than this is what these contain elements do.
Hopefully that is clear and we are enjoying using your control statements in our project so thank you for your work!
I think I know what the problem is. Will try to fix this soon.
@SourceCode I cannot reproduce your issue.
My understanding is:
<Choose>
{/* This comment triggers an error */}
<When condition={true}>
{/* This comment doesn't throw */}
</When>
</Choose>
However, the given example works in one of my projects... So what am I missing?
Please provide an example and your .babelrc. Sometimes the ordering of plugins is also relevant...
Your example is exactly what is/was breaking for me. I will provide an example when I am back in the project next week. Ty!
ping @SourceCode
No response for a while, so closing this out.