Docz: Empty lines in Playground fail to build in v2

[TWaltze]

Bug Report

Describe the bug

Empty lines in a React component defined in <Playground> fails to build.

To Reproduce

A slightly modified version of the basic example repo with the bug can be found here: https://github.com/TWaltze/docz-empty-line-bug

The core issues comes down to:

<Playground>
  {() => {
    const [ count, setCount ] = useState(0);

    return (
      <div onClick={() => setCount(count + 1)}>
        <Alert kind="info">Some message {count}</Alert>
        <Alert kind="positive">Some message</Alert>
        <Alert kind="negative">Some message</Alert>
        <Alert kind="warning">Some message</Alert>
      </div>
    )
  }}
</Playground>

This results in the error:

../src/components/Alert.mdx
Module build failed (from ../node_modules/gatsby-plugin-mdx/loaders/mdx-loader.js):
SyntaxError: unknown: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>? (45:0)

  43 | )
  44 | `}</code></pre>
> 45 | <p>{`  }}`}</p>
     | ^
  46 | </Playground>
  47 |     </MDXLayout>
  48 |   )/Users/twaltze/development/docz-basic-example/src/components/Alert.mdx: unknown: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>? (45:0)

  43 | )
  44 | `}</code></pre>
> 45 | <p>{`  }}`}</p>
     | ^
  46 | </Playground>
  47 |     </MDXLayout>
  48 |   )
    at Object.raise (/Users/twaltze/development/docz-basic-example/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:6387:17)
    at Object.jsxParseElementAt (/Users/twaltze/development/docz-basic-example/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:3587:12)
    at Object.jsxParseElement (/Users/twaltze/development/docz-basic-example/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:3597:17)
    at Object.parseExprAtom (/Users/twaltze/development/docz-basic-example/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:3604:19)
    at Object.parseExprSubscripts (/Users/twaltze/development/docz-basic-example/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:8483:23)
    at Object.parseMaybeUnary (/Users/twaltze/development/docz-basic-example/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:8463:21)
    at Object.parseExprOps (/Users/twaltze/development/docz-basic-example/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:8329:23)
    at Object.parseMaybeConditional (/Users/twaltze/development/docz-basic-example/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:8302:23)
    at Object.parseMaybeAssign (/Users/twaltze/development/docz-basic-example/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:8249:21)
    at Object.parseExpression (/Users/twaltze/development/docz-basic-example/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:8197:23)
    at Object.parseStatementContent (/Users/twaltze/development/docz-basic-example/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:10029:23)
    at Object.parseStatement (/Users/twaltze/development/docz-basic-example/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:9900:17)
    at Object.parseBlockOrModuleBlockBody (/Users/twaltze/development/docz-basic-example/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:10476:25)
    at Object.parseBlockBody (/Users/twaltze/development/docz-basic-example/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:10463:10)
    at Object.parseBlock (/Users/twaltze/development/docz-basic-example/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:10447:10)
    at Object.parseFunctionBody (/Users/twaltze/development/docz-basic-example/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:9495:24)

Expected behavior

I'd expect empty lines to be allowed and for the build to succeed.

Environment

• OS: OSX 10.14.6
• Node/npm version: Node v8.16.1/Yarn v1.17.3
• docz: v2.0.0-beta.38

Additional context/Screenshots
I believe this is similar to https://github.com/doczjs/docz/issues/1003

[NexxLuo]

I have the same problem

[rakannimer]

Hey!

Thanks for reporting, this looks like a gatsby-plugin-mdx issue.

You can track the issue I opened on the gatsby repo about it here : https://github.com/gatsbyjs/gatsby/issues/17947

[csywweb]

I have the same problem

[exah]

Actually it is mdx issue https://github.com/mdx-js/mdx/issues/767.

I guess it is not popular approach to write hooks in playground ¯_(ツ)_/¯, but this bug is main reason why I can't update from 0.13 -> 2.x :(
Hope I will find some time in future to contribute.

[rakannimer]

Yep @exah it looks like it's a mdx issue.

But the issue doesn't affect your ability to use hooks with docz 2. You just need to remove the extra empty line and it will work as expected (while waiting for the issue to be resolved).

Example :

<Playground>
  {() => {
    const [ count, setCount ] = React.useState(0);
    return (
      <div onClick={() => setCount(count + 1)}>
        <div>Some message {count}</div>
      </div>
    )
  }}
</Playground>

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.