script setup with extra render function does not render anything in production mode, but works in dev mode.

[wxsms]

Version

3.2.22

Reproduction link

sfc.vuejs.org/

Steps to reproduce

<script setup>
import { ref } from 'vue'

const msg = ref('Hello World!')

defineExpose({msg})
</script>

<script>
import { h } from 'vue';

export default {
  render () {
    return h('div', {}, 'hello ' + this.msg)
  }
}
</script>

What is expected?

It should render hello Hello World! after build.

What is actually happening?

No error is reported, but It renders nothing after build. BUT renders hello Hello World! in dev mode (you may use the download button on sfc playground and try it).

[LinusBorg]

The fact that it works is a unwanted side-effect of a difference in the dev-behaviour required for debuggability / HMR.

We should find some way to warn about this though - the first thing coming to mind would be to throw an error for SFCs using script setup that don't use a .

[wxsms]

Thanks. It may not be a proper space to ask for, but is there any way to use render function with script-setup though? It seems not mentioned from document.

[LinusBorg]

It's not really meant to be used with render functions, and most of the advantages of script setup are already a given when using a render function in a normal Component

• no need to return all those properties from setup, everything's already in the closure
• no need to register components

all you are left with is abou 4 lines of boilerplate in the form of:

import { defineComponent } from 'vue'

export default {
  setup() {
    
  }
}

for which in turn you save writing <template> and <script>

[wxsms]

Okay. I see. thank you!

[yyx990803]

I fixed this because it's a dev/prod behavior inconsistency, but it's non optimal since it requires proxying everything over this.

I think in most cases manual render fn / JSX users should just return therender fn setup() in plain JS/TS, but there are some cases you may want to write render functions in an SFC to get access to the scoped style features. We may need something like defineRender.

[nazar1ua]

@yyx990803 I still need the defineRender function

[guohuihot]

unplugin-vue-macros
defineRender ^_^
I hope the official can support it

[KyleBrown-804]

It's not really meant to be used with render functions, and most of the advantages of script setup are already a given when using a render function in a normal Component

• no need to return all those properties from setup, everything's already in the closure
• no need to register components

all you are left with is abou 4 lines of boilerplate in the form of:

import { defineComponent } from 'vue'

export default {
  setup() {
    
  }
}

for which in turn you save writing <template> and <script>

I think it would be helpful if the Vue docs mentioned in the render functions & jsx section here that this is not intended to work with <script setup> syntax.