vuejs3 - How do I use jsx syntax in vue files in vue3

Question

For example, I want to use these codes in Hello.vue:

<template>
  <RenderComponent :data="hello" />
</template>

<script>
import { ref, computed, defineComponent } from 'vue'

export default defineComponent({
  name: 'CustomComponent',

  setup() {
    const name = ref('Lily')

    const hello = computed(() => {
      return <span>Hello {name}!</span>;
    }) 
    return {
       hello
    }
  }
})
</script>

But IDE will throw error like "Failed to parse source for import analysis because the content contains invalid JS syntax."

I have already install @vitejs/plugin-vue-jsx and @vue/babel-plugin-jsx, and I can use *.jsx files successfully.

What should I do?

question from:https://stackoverflow.com/questions/65643112/how-do-i-use-jsx-syntax-in-vue-files-in-vue3

Answer 1

You should use jsx inside file named Hello.jsx without using template and script tags, and don't return a jsx from a property and return a function ()=> to render the jsx, the following example should work :

import { ref, computed, defineComponent } from 'vue'

export default defineComponent({
  name: 'CustomComponent',

  setup() {
    const name = ref('Lily')

    const hello = computed(() => {
      return `Hello ${name.value}!`;
    }) 
    return ()=><RenderComponent data={hello} />
  }
})