Subscribe on changes!

Template ref with conflicting name works in dev but not in prod

avatar
Oct 26th 2022

Vue version

3.2.41

Link to minimal reproduction

https://sfc.vuejs.org/#eNp9UctOwzAQ/BXLl4LU2ApwikJVhIQ4InH1JTSbB8QPrZ0iFOXfWSehKkH05t2Z3VnPDPzBOXHsgWc89wdsXWAeQu92yrTaWQzs0WrHKrSabYSMRaRvlMnlzCcmFQG064oAVDGWTzPa1/eKP1mr+C6fJgnM5YnJt3yWSHThxLu3ho4Y4rxaAK94xqZO7JFsrBVvQnA+k7I37qMWB6vlnjCJvQmthqS0en8rbsRdKsvWh/O+AK+TN7SfHpAUFd+eLZfUPAImCKYEBLwotuL+Elxhf0Sj5qjMSAb8+Pm//QNDqNi4JDBbr2hx1Rp4Qev81WQQmX2yKnw5yNhrwNbUyweJX/RdyNhmeTEN3hd13DYfc3050SaNd1CeJER5PkPX2Vw26SrS8RusPMwX

Steps to reproduce

  • Create a component with a template named the same as a prop
<script setup>
import { ref } from 'vue'

defineProps({
  msg: {
    type: String,
    default: 'default message'
  }
})
</script>


<template>
  <h1 ref="msg">Hello</h1>
</template>
  • Run the app in dev
  • Build the app and run in prod

What is expected?

It should work or not but it should have same behavior between dev and prod mode

What is actually happening?

It work in dev mode It doesn't work in prod with an error msg is not defined making it a bit difficult to debug

System Info

No response

Any additional comments?

No response