React-styleguidist: Is es6 code in example markdown file supported ?

[sjy]

I am using this repo to make docs for my UI projects; It is really awesome and thank you so much the awesome contributors. If I miss something since I cannot make my jsx code (es6 version) work properly and I have to write down code like this to make my components rendered correctly.

    // I prefer to  use import syntax; 
    // require('./SubCard') will return an object instead of function nor class 
    var SubCard = require('./SubCard').default; 
    <Card title="my-card" width={400} expandable={false} className="foo-class">
        <SubCard title="Card1" number={32}>
        </SubCard>
        <SubCard title="Card2" number={64}>
        </SubCard>
    </Card>

[sapegin]

ES6 is supported in examples but we have to process requires separately an import is not supported yet.

In your case context option might be more convenient: https://github.com/styleguidist/react-styleguidist/blob/next/docs/Configuration.md#context (you’ll need 5.0.0 beta to use it: https://github.com/styleguidist/react-styleguidist/releases/tag/5.0.0%40beta.9)

[sjy]

Thanks a lot, sapegin. I will try the beta version.

[roychoo]

@sapegin I guess the reason is that options of import is not enabled in buble? Is there any plans to add that? Or maybe abstract the options somewhere?

[sapegin]

@roychoo Buble doesn’t support import.

We need to find all required modules in advance and add them to webpack bundle. On the frontend require is just a function that returns one of this pre-loaded modules. That’s why you can’t require anything new dynamically.

[roychoo]

Yeah you are right, I misread the buble docs. My bad.

[amandakoster]

Hello, can someone point me to an example of how to import components using es6 code in example markdown file? I see this feature has been added in Styleguidist change logs but am unable to make it work. I am using styleguidist v7.2.5 with create-react-app and react v16.4.2 and keep getting the error CompileError: import is not supported (3:0). Have researched this error and not finding any solutions. Thanks!

[sapegin]

You need to update to 9.0.0 beta.