Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
wxsms opened this issue Nov 21, 2021 · 8 comments
Labels

Comments

@wxsms
Copy link
Member

wxsms commented Nov 21, 2021

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).

@wxsms wxsms changed the title script setup with extra render function does not render anything in production mode script setup with extra render function does not render anything in production mode, but works in dev mode. Nov 21, 2021
@LinusBorg
Copy link
Member

LinusBorg commented Nov 21, 2021

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
Copy link
Member Author

wxsms commented Nov 21, 2021

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
Copy link
Member

LinusBorg commented Nov 21, 2021

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
Copy link
Member Author

wxsms commented Nov 22, 2021

Okay. I see. thank you!

@yyx990803
Copy link
Member

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.

iwusong pushed a commit to iwusong/core that referenced this issue May 13, 2022
@nazar1ua
Copy link

nazar1ua commented Sep 8, 2022

@yyx990803 I still need the defineRender function

@guohuihot
Copy link

guohuihot commented Jul 27, 2023

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

@KyleBrown-804
Copy link

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.

@github-actions github-actions bot locked and limited conversation to collaborators Sep 6, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

No branches or pull requests

6 participants