MDX content causes babel parse error.

[furkle]

Subject of the issue

A seemingly-valid selection of MDX code is parsed incorrectly.

Your environment

• OS: Windows 10
• Packages: @mdx-js/mdx
• Env: Node v12.4.0

Steps to reproduce

Attempt to compile the following MDX.

### This is the sample Accelerator passage.

<Card>
  <img />
</Card>

<Link>
  This is a link. Try creating a new passage with

  <p>
    <pre>accelerator-tool new passage my-first-passage</pre>
  </p>

  and clicking on the link.
</Link>

<button>
  Clicking this button will update the counter below.
</button>

<em>unused</em>

<Card>
  <CyclingLink>
    {[
      'You can click it to change a value between several blocks of ' +
        'text.',

      'Each time the link changes, it updates the `cycleVar` variable ' +
        'to reflect the current value of the link.',

      'You can set any variable through the variableToSet property.',
    ]}
  </CyclingLink>

  <div>
    <p>This value updates automatically to match the cycling link choice.</p>
    <em>unused</em>
  </div>
</Card>

<button>
  If you click this, it sets a bookmark.
</button>

<button>unused</button>

This results in a compile error:

node -p "require('@mdx-js/mdx').sync(require('fs').readFileSync('./passages/sample-passage/sample-passage.mdx'))"
/home/furkle/code/accelerator/accelerator-core/node_modules/trough/wrap.js:33
        throw error
        ^

SyntaxError: unknown: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>? (33:2)

  31 | ]}
  32 | `}</code></pre>
> 33 |   </CyclingLink>
     |   ^
  34 |   <div>
  35 |     <p>This value updates automatically to match the cycling link choice.</p>
  36 |     <em>unused</em>
    at Object.raise (/home/furkle/code/accelerator/accelerator-core/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:6325:17)
    at Object.jsxParseElementAt (/home/furkle/code/accelerator/accelerator-core/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:3579:12)
    at Object.jsxParseElement (/home/furkle/code/accelerator/accelerator-core/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:3589:17)
    at Object.parseExprAtom (/home/furkle/code/accelerator/accelerator-core/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:3596:19)
    at Object.parseExprSubscripts (/home/furkle/code/accelerator/accelerator-core/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:8412:23)
    at Object.parseMaybeUnary (/home/furkle/code/accelerator/accelerator-core/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:8392:21)
    at Object.parseExprOps (/home/furkle/code/accelerator/accelerator-core/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:8267:23)
    at Object.parseMaybeConditional (/home/furkle/code/accelerator/accelerator-core/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:8240:23)
    at Object.parseMaybeAssign (/home/furkle/code/accelerator/accelerator-core/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:8187:21)
    at Object.parseExprListItem (/home/furkle/code/accelerator/accelerator-core/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:9491:18) {
  pos: 856,
  loc: Position { line: 33, column: 2 },
  code: 'BABEL_PARSE_ERROR'
}

Logging the AST suggests that the parser is splitting JSX code in inappropriate and erroneous ways. I can provide more detailed logs if desired.

Expected behaviour

The MDX should compile into a valid AST.

Actual behaviour

A parse error is thrown by Babel.

[johno]

Thanks for opening this issue!

Unfortunately there's a known issue with empty lines in JSX blocks 😞. Right now to get it to work you can change the offending JSX block to:

<Card>
  <CyclingLink>
    {[
      'You can click it to change a value between several blocks of ' +
        'text.',
      'Each time the link changes, it updates the `cycleVar` variable ' +
        'to reflect the current value of the link.',
      'You can set any variable through the variableToSet property.',
    ]}
  </CyclingLink>
  <div>
    <p>This value updates automatically to match the cycling link choice.</p>
    <em>unused</em>
  </div>
</Card>

This is something that will be addressed as part of the interleaving RFC (#628) since it will require improved JSX block parsing.

I'm going to close this since it refers to the same issue brought up in #195.

[furkle]

Thanks so much for responding! I apologize for not seeing the pre-existing issue, I'd honestly convinced myself it must've been something more complicated about my usage than newlines and ignored the upcoming features!

This puts me right back where I need to be and it's easy enough to fix. This is a great piece of software which provides fairly invaluable and incomparable benefit in a literate hypertext toolchain I'm building. I'll keep an eye out for any simple issues or PRs moving towards 1.1. Thanks again!