Unable to use JSX directly in setup()

[u3u]

The createElement function has been added to the v2.2.0 release, which is great! 🎉

But the babel-sugar-inject-h plugin attempts to automatically inject h from this.$createElement, but there is no this in setup(), so JSX cannot be used directly.

[posva]

Could you open an issue there instead please? You probably don't need to use that plugin

[u3u]

In order to be compatible with the old code, I may have to use this plugin. 😅

https://github.com/vuejs/vue-function-api/blob/a7413ec53021887c90f777c29a88e5c04cff8329/src/install.ts#L45-L52

Can we import createElement here and build a { $createElement: createElement } object to bind it to this? This may cause this in setup() to be not the expected undefined, but it will save a lot of trouble.

Now only need:

import { createComponent } from 'vue-function-api';

// No longer need to manually import `createElement as h`
// import { createComponent, createElement as h } from 'vue-function-api';

export default createComponent({
  setup(initialProps) {
    // babel plugin will auto-inject h
    // const h = this.$createElement;
    return (props) => <div>{props.msg}</div>;
  },
});

Is there any good solution?
Please consider reopening this issue. 🙏

[posva]

I would say that the fix is skipping the plugin at https://github.com/vuejs/jsx/blob/dev/packages/babel-sugar-inject-h/src/index.js#L60-L62 if we are in a setup function but I'm not sure. You could give it a try and directly create a PR to the plugin 🙂

We cannot add that hack as the lib must stay in sync with the RFC.

[PatrykWalach]

h won't be inserted if you use an arrow function, so you can do

import {
  createComponent,
  createElement
} from 'vue-function-api'

export default createComponent({
  setup: props => {
    const h = createElement

    return () => {
      return (
        <div>card</div>
      )
    }
  }

[u3u]

Hum... I also considered this, but this plugin should eventually solve this problem.

If the plugin imports createElement from vue-function-api to auto-inject h is it appropriate? Will the createElement function be exposed directly in future Vue?

[u3u]

@PatrykWalach As long as JSX is used in the function, h will be injected automatically. When I manually define const h = createElement there will be duplicate h identifier exceptions

[PatrykWalach]

You won't get any errors using the method above. link
Exposing createElement is part of rfc#28 which changes the arguments of render function.

[u3u]

@PatrykWalach Thank you! I didn't see it clearly before. 😂