Nested JSX with hanging >

[ChristopherBiscardi]

Subject of the issue

Parse error. Something to do with the way children are wrapped inside of JSX I think because the issue only appears with content above the child and also a hanging >

Your environment

• Packages: @mdx-js/[email protected]

Steps to reproduce

<Box>
  Original:
  <Box
    as="a"
    href="https://stackoverflow.com/questions/28732670/getting-recently-updated-packages/29104122#29104122"
  >
    s
  </Box>
</Box>

repro script for the above file:

const mdx = require("@mdx-js/mdx");
const fs = require("fs").promises;

async function process() {
  try {
    const file = await fs.readFile("./thing.mdx", "utf-8");
    const result = await mdx(file);
    console.log(result);
  } catch (e) {
    console.log(e);
  }
}
process();

Expected behaviour

dunno, seems weird that this breaks on parsing.

Actual behaviour

[5:108: Unexpected end of file before attribute name, expected a character that can start an attribute name, such as a letter, `$`, or `_`; whitespace before attributes; or the end of the tag] {
  reason: 'Unexpected end of file before attribute name, expected a character that can start an attribute name, such as a letter, `$`, or `_`; whitespace before attributes; or the end of the tag',
  line: 5,
  column: 108,
  location: {
    start: { line: 5, column: 108, offset: 143, index: 123 },
    end: { line: null, column: null }
  },
  source: 'remark-mdx',
  ruleId: 'unexpected-eof',
  fatal: true
}

[wooorm]

I'm not 100% why it's parsing as a span instead of a block (early in the am for me), but the > is making a block quote: https://github.com/micromark/mdx-state-machine#742-u003e-greater-than--seen-as-block-quote

[wooorm]

I just confirmed that this now renders nicely on main. Assuming the shortcodes aren’t passed, the result is:

<div><p>Original:</p><div as="a" href="https://stackoverflow.com/questions/28732670/getting-recently-updated-packages/29104122#29104122"><p>s</p></div></div>

Which seems to make sense.