How to type JSX with other types than React$Element with flowtype?

Question

I use flowtype with Vue.js, and I added type declarations for Vue.js. Then, I also use JSX syntax with babel-plugin-transform-vue-jsx.

Alghough I want to type JSX tags as VNode, flowtype engine detect JSX tag as React$Element, so it doesn't work.

Is there anyone who know the way to have flowtype engine detect JSX as another type or know other good way to solve this problem?

I need your help.

Thank you.

Whole codes are here. https://github.com/kentrino/vue-js-webpack-flowtype-example

import style from './Test.css';

const test: ComponentOptions = {
  render (h): VNode {
    return <div><h1 class={style.red}>Yeah!! This is test.</h1></div>
//          ^^^^^ React$Element. This type is incompatible with
//            5:   render (h: any): VNode {
//                                  ^^^^^ VNode
  },
  name: 'Test'
}

Answer 1

You can make Flow use something other than React for type checking your JSX. Just put an @jsx tag at the top of your file (I put mine right below the flow tag)

// @flow
// @jsx somethingBesidesReact.createElement

In your case, you are using Vue and the babel-plugin-transform-vue-jsx plugin to transform your JSX which simply translates to h

https://github.com/vuejs/babel-plugin-transform-vue-jsx

So, in your case, this should work

// @flow
// @jsx h
import style from './Test.css';

const test: ComponentOptions = {
  render (h: any): VNode {
    return <div><h1 class={style.red}>Yeah!! This is test.</h1></div>
  },
  name: 'Test'
}

export default test;