Can I define returned jsx in methods property in SFC?

[wqcstrong]

Env

• "vue": "^2.6.0",
• "vue-template-compiler": "^2.6.12",
• "rollup": "^2.48.0",
• "rollup-plugin-vue": "^5.0.0",
• "@babel/preset-env": "^7.0.0",
• "@vue/babel-helper-vue-jsx-merge-props": "^1.2.1",
• "@vue/babel-preset-jsx": "^1.2.4"

What happened

Following is my code,

//  MyButton.vue

<template>
    <p>Segment: {{ segment() }}</p>
</template>

<script>
export default {
  name: 'MyButton',
  methods: {
    segment() {
      return <b>A segment</b>;
    }
  }
};
</script>

build output as es-module. Last, I got error when using it, the error:

Help me, plz~

[wqcstrong]

the vite plugin process vue is [email protected]

[wqcstrong]

That's OK if drop the template block and use render function property:

<script>
export default {
  methods: {
    segment () {
      return <b>A segment</b>
    }
  },
  render () {
    return (
      <p>Segment: { this.segment() }</p>
    )
  }
}
</script>

But I must support the template jsx...

[wqcstrong]

@sodatea Sorry to bother you, take a look at my issue plz, THX!