tsx dynamic tag name build error

[troy351]

Original issue here vuejs/vue-cli#3067

Steps to reproduce

• create a new project with vue-cli with only babel and typescript (use class style component).
• update typescript to 3.2+. this is important !!!

• remove template field and add render code in App.vue

  render() {
  const obj = {
    tag: "HelloWorld"
  };
  
  const TagName = obj.tag;
  return <TagName class="name" />;
  }

What is expected?

No Error

What is actually happening?

Error Type '{ class: string; }' is not assignable to type '{}'

---

However, the codes below works fine

render() {
    // this works
    const TagName = "HelloWorld";
    return <TagName class="name" />;
  }

render() {
    // this also works
    const obj = {
      tag: "HelloWorld"
    };

    const TagName = obj.tag;
    return <TagName />;
  }

[nickmessing]

Can you show the JSX shim you're using in your project @troy351?

[troy351]

the same as shims-tsx.d.ts in vue-cli

[blake-newman]

This is not a JSX issue but an issue in TS.

https://github.com/Microsoft/TypeScript/issues/28806

It is on the teams radar to be fixed.

[blake-newman]

Solution for now is to stay behind a version, or use if statements to ensure a specific tag type.