Vue components created with JSX is not working in Markdown files

[HandOfGod94]

vuepress-error.zip

• OS: Windows 10
• Node.js: v9.3.0
• VuePress: 0.8.4
• Browser: Google Chrome Version 66.0.3359.117 (Official Build) (64-bit)
• Local installation
• Package Manager used: yarn

I'm using VuePress for documenting my components. For demo, purpose I'm registering it globally in enhanceApp.js and using it .md files.

Attaching a reproducible project with a custom component.
I have used yarn to install dependecies.
To reproduce:

1. Go to src/components/MyComponent.js.
2. Toggle the return statement to see the output.

To view docs: run yarn docs:dev

I guess the problem is that it VuePress doesn't have babel-plugin-transform-vue-jsx. So is this thing in roadmap, or will not be supported? Is there any other way to handle JSX in render function for VuePress

If I use createElement method directly with arguments, its rendering properly.

export default {
  name: 'my-component',
    render (h) {
        return h('div', {}, this.$slots.default)
    }
}

Now in my .md files if I use

<se-container>Hello World</se-container>

Its working correctly.
But if I use JSX in render method, then it's showing ReferenceError: React is not defined in console.

export default {
    name: 'my-component',
    render (h) {
        return (
            <div>{this.$slots.default}</div>
        )
    }
}

[yyx990803]

VuePress currently does not support JSX. We will need to move to Babel for this.

[HandOfGod94]

Hi @yyx990803,
Thanks for quick reply
Shouldn't this be documented? Somewhere stating the limitation or in ToDo list of VuePress docs.
I'll try to play around in my local setup with babel+VuePress, but is there any specific reason why it was not used?

[ulivz]

Will release it at 0.9.0: #419 ❤️

[twigs67]

Shouldn't this work with version 3? I'm running 3.1.1 and I'm still getting this error.

[amravazzi]

Same here. I'm having problems importing components built with JSX.