Docz: Class inside Playgound

[kserjey]

Bug Report

Describe the bug

It worked well before New Year 🤷‍♀️, but now I get this error message at build time:

Could not create Open in CodeSandbox { SyntaxError: Unexpected token, expected "}" (21:22)
  19 |       <React.Fragment>
  20 | class CheckboxExample extends React.Component {
> 21 |   constructor(props) {
     |                      ^
  22 |     super(props)
  23 |     this.state = { value: false }
  24 |     this.handleChange = this.handleChange.bind(this)
    at t (/Users/kserjey/Projects/goodwix-frontend/node_modules/prettier/parser-babylon.js:1:326)
    at Object.parse (/Users/kserjey/Projects/goodwix-frontend/node_modules/prettier/parser-babylon.js:1:195891)
    at Object.parse$2 [as parse] (/Users/kserjey/Projects/goodwix-frontend/node_modules/prettier/index.js:10600:19)
    at coreFormat (/Users/kserjey/Projects/goodwix-frontend/node_modules/prettier/index.js:13763:23)
    at format (/Users/kserjey/Projects/goodwix-frontend/node_modules/prettier/index.js:13939:16)
    at formatWithCursor (/Users/kserjey/Projects/goodwix-frontend/node_modules/prettier/index.js:13951:12)
    at /Users/kserjey/Projects/goodwix-frontend/node_modules/prettier/index.js:41967:15
    at Object.format (/Users/kserjey/Projects/goodwix-frontend/node_modules/prettier/index.js:41986:12)
    at formatter (/Users/kserjey/Projects/goodwix-frontend/node_modules/docz-utils/lib/codesandbox.js:1:411)
    at getSandboxFiles (/Users/kserjey/Projects/goodwix-frontend/node_modules/docz-utils/lib/codesandbox.js:1:1277)
    at Object.getSandboxImportInfo (/Users/kserjey/Projects/goodwix-frontend/node_modules/docz-utils/lib/codesandbox.js:1:1631)
    at addPropsOnPlayground (/Users/kserjey/Projects/goodwix-frontend/node_modules/rehype-docz/dist/index.js:1:974)
  loc: { start: { line: 21, column: 22 } },
  codeFrame:
   '\u001b[0m \u001b[90m 19 | \u001b[39m      \u001b[33m<\u001b[39m\u001b[33mReact\u001b[39m\u001b[33m.\u001b[39m\u001b[33mFragment\u001b[39m\u001b[33m>\u001b[39m\u001b[0m\n\u001b[0m \u001b[90m 20 | \u001b[39m\u001b[36mclass\u001b[39m \u001b[33mCheckboxExample\u001b[39m \u001b[36mextends\u001b[39m \u001b[33mReact\u001b[39m\u001b[33m.\u001b[39m\u001b[33mComponent\u001b[39m {\u001b[0m\n\u001b[0m\u001b[31m\u001b[1m>\u001b[22m\u001b[39m\u001b[90m 21 | \u001b[39m  constructor(props) {\u001b[0m\n\u001b[0m \u001b[90m    | \u001b[39m                     \u001b[31m\u001b[1m^\u001b[22m\u001b[39m\u001b[0m\n\u001b[0m \u001b[90m 22 | \u001b[39m    \u001b[36msuper\u001b[39m(props)\u001b[0m\n\u001b[0m \u001b[90m 23 | \u001b[39m    \u001b[36mthis\u001b[39m\u001b[33m.\u001b[39mstate \u001b[33m=\u001b[39m { value\u001b[33m:\u001b[39m \u001b[36mfalse\u001b[39m }\u001b[0m\n\u001b[0m \u001b[90m 24 | \u001b[39m    \u001b[36mthis\u001b[39m\u001b[33m.\u001b[39mhandleChange \u001b[33m=\u001b[39m \u001b[36mthis\u001b[39m\u001b[33m.\u001b[39mhandleChange\u001b[33m.\u001b[39mbind(\u001b[36mthis\u001b[39m)\u001b[0m' }

When I try to disable codeSandbox: false, I get this message inside <Playground/>:

SyntaxError: Unexpected token (3:21) 1 : (<React.Fragment> 2 : class CheckboxExample extends React.Component { 3 : constructor(props) { ^

And I don't have any idea how to debug docz. Does it have verbose mode or smth like that? To catch the error message I had to terminate build process via Control+C.

My .mdx file:

---
name: Checkbox
menu: Components
---

import { Playground } from 'docz';
import { Props, Prop } from '../_docz/Props';
import { Checkbox } from './Checkbox';

# Checkbox

Чекбокс

## Props

<Props>
  <Prop name="disabled" type="boolean">
    disabled статус
  </Prop>
  <Prop name="size" type="number">
    Размер чекбокса
  </Prop>
  <Prop name="label" type="string">
    Лэйбл чекбокса
  </Prop>
  <Prop name="onChange" type="function">
    Функция вызываемая при изменении значения чекбокса
  </Prop>
</Props>

## Usage

<Playground>
  {class CheckboxExample extends React.Component {
    constructor(props) {
      super(props);
      this.state = { value: false };
      this.handleChange = this.handleChange.bind(this);
    }

    handleChange(event) {
      // also possible ({ value }) => ({ value: !value })
      this.setState({ value: event.checked });
    }

    render() {
      return (
        <Checkbox label='Hello' value={this.state.value} onChange={this.handleChange}/>
      );
    }
}}
</Playground>

Environment

• docz: 0.13.7
• OS: OSX 10.14.2
• Node: 10.12.0
• NPM: 6.4.1

[sw-yx]

related https://github.com/pedronauck/docz/issues/594

[sw-yx]

related https://github.com/pedronauck/docz/issues/261

[douglasncon]

any news on that?

[rdmclin2]

same issue

[nitta-honoka]

same issue

react-live has made a demo to support class-properties, can we refer to it? @pedronauck

[JesuisTong]

just upgrade your @mdx-js/loader @mdx-js/mdx @mdx-js/mdxast to version 0.16.0 manually, then it will get fixed.

[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.

[sag1v]

Any fix for that? Still getting this :/

[alexandre-lelain]

Hello 👋

If it can help the future readers of this issue, using a functional component works (tried with v2.2.0)

<Playground>
  {() => {
    const [counter, setCounter] = React.useState(0)
    return (
      <>
        <button onClick={() => setCounter(counter => counter+1)}>
          Increase
        </button>
        <p>{counter}</p>
      </>
    )
  }}
</Playground>

Note: for some reason, it seems that empty lines is breaking the compiler.

I'd be glad to make a PR to github.com/doczjs/docz-website to add some documentation about this if needed.

[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.