Per-file jsx paragma got TS2322: Type 'Element' is not assignable to type 'VNode'.

[TotooriaHyperion]

TypeScript Version: 2.9.0-dev.20180414

Search Terms:
TS2322: Type 'Element' is not assignable to type 'VNode'.
Property 'isRootInsert' is missing in type 'Element'.
Code

// A *self-contained* demonstration of the problem follows...
// Test this by running `tsc` on the command-line, rather than through another build tool such as Gulp, Webpack, etc.

// index.vue.tsx
/** @jsx h */
import Vue, { CreateElement, VNode } from 'vue';

export default class VuePreview extends Vue {
  render(h: CreateElement): VNode {
    return <div>VuePreview</div>;
  }
}

can be reproduced at typescript@2.9.0-dev.20180414

Expected behavior:
compiled without error
Actual behavior:
Per-file JSX factories @jsx
successfully compiled this file to index.vue.js ⬇️

import Vue from 'vue';
export default class VuePreview extends Vue {
    render(h) {
        return h("div", null, "VuePreview");
    }
}
//# sourceMappingURL=index.vue.js.map

but type check got the error
TS2322: Type 'Element' is not assignable to type 'VNode'.
Property 'isRootInsert' is missing in type 'Element'.

Playground Link:

Related Issues:

[mhegazy]

can not reproduce this locally. can you share a self-contained repro project:

c:\test\23457>type package.json
{
  "private": true,
  "dependencies": {
    "vue": "^2.5.16"
  }
}

c:\test\23457>type tsconfig.json
{
    "compilerOptions": {
        "target": "es5",
        "jsx": "react"
    }
}

c:\test\23457>type a.tsx
// index.vue.tsx
/** @jsx h */
import Vue, { CreateElement, VNode } from 'vue';

export default class VuePreview extends Vue {
    render(h: CreateElement): VNode {
        return <div>VuePreview</div>;
    }
}

c:\test\23457>tsc --v
Version 2.9.0-dev.20180414

c:\test\23457>tsc

c:\test\23457>echo %ERRORLEVEL%
0

[TotooriaHyperion]

https://github.com/TotooriaHyperion/tsc-vue-jsx-bug

got different error

src/index.tsx(6,27): error TS7026: JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists.

when using with react:
https://github.com/TotooriaHyperion/tsc-vue-jsx-bug/tree/with-react

index.react.tsx is fine
index.vue.tsx got src/index.vue.tsx(6,5): error TS2322: Type 'Element' is not assignable to type 'VNode'.

Obviously,
TS7026 is because vue have not provided jsx typings officially.
TS2332 is because jsx in vue file with @jsx paragma is treated as a react-jsx.

#13890

[mhegazy]

Issue #13260 tracks adding needed support in TS to support vue and jsx.

[typescript-bot]

Automatically closing this issue for housekeeping purposes. The issue labels indicate that it is unactionable at the moment or has already been addressed.

[joma74]

Me too, but should work on pure Javascript too/not only .tsx files

// storybook-starter/src/stories/index.stories.js
.add("with JSX", function() {
    return Vue.extend({
      components: { MyButton },
      render() {
        return <my-button>With JSX</my-button>
      },
    })
  })

gives essentially the same

Type '() => Element' is not assignable to type '(createElement: CreateElement, hack: RenderContext<Record<string, any>>) => VNode'.
          Type 'Element' is not assignable to type 'VNode'.
            Property 'isRootInsert' is missing in type 'Element'.

plus 2 times

Property 'my-button' does not exist on type 'JSX.IntrinsicElements'.