when use custom v-model (with <script setup> style)，it goes well in dev env,but may occur error：modelValue is undefined in production env

[CherishTheYouth]

Version

3.2.31

Reproduction link

gitee.com

Steps to reproduce

（1）create a vue3 project with vite;
（2）write a parent component and a child component in <script setup>, use v-model for parent child component communication;
（3）it goes well in dev env，but occur error in prod env， the error as follows:

    index.8d23215e.js:1 Uncaught ReferenceError: modelValue is not defined
    at HTMLInputElement.u.onUpdate:modelValue.l.<computed>.l.<computed> [as _assign] (index.8d23215e.js:1)
    at HTMLInputElement.<anonymous> (vendor.52e08146.js:1)

What is expected?

I expect that my vue3 project which structured by vite.js will go well when use v-model write in <script setup> in prod dev.

What is actually happening?

Actually, it goes well in dev env but get the follow error in prod dev:

  index.8d23215e.js:1 Uncaught ReferenceError: modelValue is not defined
    at HTMLInputElement.u.onUpdate:modelValue.l.<computed>.l.<computed> [as _assign] (index.8d23215e.js:1)
    at HTMLInputElement.<anonymous> (vendor.52e08146.js:1)

---

NOTE：when I write it not in <script setup>, this error won't happen;
KeyWord:

• vite
• v-model (custom component)
• in <script setup>
• production env

[LinusBorg]

Is there a more realistic scenario in which this happens?

In your example, you use v-model="modelValue", which is not allowed - you can't mutate props.

This is likely the root cause of the error: The compiler so far doesn't take this possibility into account as your can't v-model a prop directly..

[lidlanca]

    <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)"/>

[LinusBorg]

that doesn't create any problems.

[lidlanca]

that is the working alternative.

a prop should technically not be used in v-model since its read-only, but the compiled output can still be more correct.
by referencing via __props in the vmodel logic.

also
<input v-model="someProp.x" /> will actually compile correctly with __props
which make sense, because only the top level is readonly.

someProp in template is referenced correctly __props.someProp
but in v-model it is referenced as a declared variable (someProp).

<script setup>
import {toRef} from "vue"

let props = defineProps(['someProp'])
// uncomment line will prevent error.
//const someProp = toRef(props,'someProp')
</script>

<template>

<input v-model="someProp" />
</template>

compiled output

return (_ctx, _cache) => {
  return _withDirectives((_openBlock(), _createElementBlock("input", {
    "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => (_isRef(someProp) ? (someProp).value = $event : null))
  }, null, 512 /* NEED_PATCH */)), [
    [_vModelText, __props.someProp]
  ])
}
}

[CherishTheYouth]

thank you all, I will modify my codes, best wishes for you two，god kiss you

[CherishTheYouth]

@lidlanca @LinusBorg

[Shhu]

I run into this issue when deploying in production yesterday here is some example :
Default version
Its working without error, dev & prod

Setup version
Working in dev without warning or error, break in production :
Uncaught ReferenceError: modelValue is not defined at _createElementBlock.onUpdate:modelValue._cache.<computed>._cache.<computed> (about:srcdoc:50:74) at HTMLInputElement.<anonymous> (vue.runtime.esm-browser.js:10302:21)

@LinusBorg I understand v-model="modelValue" is not something you want, but it should throw a warning in dev at least, having an inconsistent behavior between dev and production is dangerous.

For this kind of component having <BaseCheckbox v-model="" /> instead of <BaseCheckbox v-model:value="" /> is nicer to me.

[LinusBorg]

I didn't actually close this, the author did and j missed that.