Vue: нельзя использовать реквизит рендеринга с TSX

Question

В моей настройке JSX написано внутри компонента Vue работает правильно, затем я перенести проект на TS и использовать vue-class-component,

Единственное, что работает с TSX для меня, это следующее (как в примере в репо)

import Vue from 'vue'
import { Component } from 'vue-property-decorator'

@Component
export default class TSXTest extends Vue {
  render(h) {
    return <h1>It works</h1>
  }
}

уведомление h здесь - без этого - это не работает, но должно

У меня есть компонент, который может принимать реквизит рендеринга. Выглядит так:

 // this is js component, so works even without `h` added manually 
 render() {
    return (
      <td>
        {this.$props.render
          ? this.$props.render(this)
          : this.defaultRender(this)}
      </td>
    )
  }

В defaultRender какой-то другой jsx. И по умолчанию работает нормально. Но когда я пытаюсь передать функцию с помощью jsx, она не работает (в TSX для обычных компонентов на основе vue js она работает идеально).

Раньше я писал этот jsx внутри созданного мной хука. Как это:

created() {
    this.columns = [
      {
        field: 'fieldWithCustomRenderFn',
        label: 'Some name',
        renderCell: ({ row }) => (
          <div onClick={() => this.someHandler(row)}>
            {row.someData}
          </div>
        )
      }
    ]
}

Обратите внимание, что мне не нужно проходить h здесь как-то Это работает в JS - но не работает в TSX. Понятия не имею, почему...

Когда это переносится, это выглядит так:

renderCell: function renderCell(_a) {
        var row = _a.row
        return h('a', {
          on: {
            'click': function click(e) {
              _this.someHandler(row)
            }
          }
        }, [row.someData])
      }

Действительно, JSX трансформируется, но h здесь не определено. Я видел переданный код из js (который работает), и ключевое отличие для меня заключается в следующей строке:

var h = this.$createElement;

внутри созданной () функции. Я не вижу этой строки в переданном коде для моего компонента TSX. Что я тут не так делаю?

Вот мой.babelrc (я использую Babel 6)

  "presets": [
    ["env", {
      "modules": "commonjs",
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 11"]
      }
    }],
    "stage-2"
  ],
  "plugins": [
    "syntax-dynamic-import",
    "transform-vue-jsx",
    "transform-runtime"
  ],

И правила webpack

      {
        test: /\.ts$/,
        loader: 'ts-loader',
        exclude: /node_modules/,
        options: {
          appendTsSuffixTo: [/\.vue$/],
          transpileOnly: true
        }
      },
      {
        test: /\.tsx$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader',
          },
          {
            loader: 'ts-loader',
            options: {
              transpileOnly: true
            }
          }
        ]
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: file => (
          /node_modules/.test(file) &&
          !/\.vue\.js/.test(file)
        )
      },

Answer 1

Это похоже на известную проблему с babel-plugin-transform-vue-jsx. Я решил это, просто добавив эту строку вручную в моей функции с помощью jsx:

const h = this.$createElement;

И он работает как следует с точки зрения того, что он компилируется и работает нормально. Но конечно это просто костыль.