ReferenceError: h is not defined の倒しかた

tsx を Vue コンポーネントとして使っている時に、関数で Vue コンポーネントを返させるやつが混ざるとこれが起こる。

例えば.tsx

export const MyComponent = tsx.component({ 
  name: "MyComponent", 
  props: { 
    post: { 
      type: Object as () => { content: string }, 
      required: true, 
    }, 
  }, 
  render(): VNode { 
    return ( 
      <div> 
        ...なんちゃら 
        {renderMyComponent(this.post.content)} // renderMyContent は (JSX.Element | undefined)[] を返す 
      </div> 
    ) 
}

これは実質 render() が render(h: CreateElement) として変換されているからで、トップレベルだと暗黙的な変換で通るのだが、関数を経由する場合明示的に渡してやる必要がある。

渡った先の関数に CreateElement 相当がいないのでバグる

なので

index.tsx

import Vue, { VNode, CreateElement } from "vue" 
 
export const MyComponent = tsx.component({ 
  name: "MyComponent", 
  props: { 
    post: { 
      type: Object as () => { content: string }, 
      required: true, 
    }, 
  }, 
  render(h: CreateElement): VNode { 
    return ( 
      <div> 
        ...なんちゃら 
        {renderMyComponent(this.post.content, h)} // h を受け取れるようにしてあげる 
      </div> 
    ) 
}

こうすると解決する。

ハマったコード: caramelize/ThePostDetail.tsx#L40