Why is this block considered JSX?

[fsmaia]

The following block is being parsed as a JSX node:

<b>References:</b> [Link](./link.md)<!-- -->, [Link 2](./link 2.md)

Shouldn't it be expanded into other nodes? IMHO there is no JSX in there 😄

[wooorm]

By who? Where? What? Remark doesn't know about jsx.

[fsmaia]

Actually, I was debugging remark-remove-comments plugin visitors under Docusaurus v2.

I'm new to this world, but AFAIK Docusaurus uses @mdx-js/react and @mdx-js/mdx, which uses remark-mdx and remark-parse.

If remark doesn't know about JSX, then probably remark-mdx adds the jsx node type and holds its parser/definitions.

[fsmaia]

I inserted the snippet on the MDX Playground and it throws the following errors:

SyntaxError: unknown: Unexpected token (7:37)
   5 |       {...props}
   6 |       components={components}>
>  7 | <b>References:</b> [Link](./link.md)<!-- -->, [Link 2](./link 2.md)
     |                                      ^
   8 |     </MDXLayout>
   9 |   )
  10 | };

SyntaxError: No-Inline evaluations must call `render`

Unless this playground uses remark, it seems to be completely unrelated, since the error is throwing at the MDX itself.

We could close the discussion, but I would love any help to figure out who, where, or what is parsing this as JSX block. 😄

Big thanks so far!

[fsmaia]

BTW, for a complete context, this snippet is auto-generated by @microsoft/api-documenter, which writes an empty HTML comment on purpose.

[wooorm]

Hmm. Comments are a bit complex. As they’re an HTML thing and MDX doesn’t know about HTML, it knows about JSX. So MDX 2 is going to {/* comments */}.

[fsmaia]

After a deeper search I found out the root issue:
mdx-js/mdx#611

I'm afraid I won't have an easy fix, since this behavior will be enhanced in a future MDX v2 release, and then Docusaurus v2 will need to update its dependencies along with remark (remark v8 + remark-parsed v8 + mdx v2 + docusaurus v2), or either @microsoft/api-documenter will need to improve its markdown emitter.

If anyone falls in the same situation, I forked remark-remove-comments, and added a handler to remove HTML comments from jsx blocks: https://github.com/fsmaia/remark-remove-comments