vuejs / jsx-vue2

monorepo for Babel / Vue JSX related packages
https://jsx-vue2-playground.netlify.app/
1.47k stars 96 forks source link

Can I define returned jsx in `methods` property in SFC? #221

Open wqcstrong opened 3 years ago

wqcstrong commented 3 years ago

Env

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:

image

Help me, plz~

wqcstrong commented 3 years ago

the vite plugin process vue is vite-plugin-vue2@1.5.1

wqcstrong commented 3 years ago

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 commented 3 years ago

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