-
-
Notifications
You must be signed in to change notification settings - Fork 9k
Open
Labels
🔨 p3-minor-bugPriority 3: this fixes a bug, but is an edge case that only affects very specific usage.Priority 3: this fixes a bug, but is an edge case that only affects very specific usage.scope: v2 compat
Description
Vue version
3.5.25
Link to minimal reproduction
see below
Steps to reproduce
- Use
@vue/compatwith Vue 3.5.25. - Configure compat mode to Vue 2 (
MODE: 2). - Create a component that accepts
v-model(legacy usage). - Run the application.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 3.5.25 Compat Crash Reproduction</title>
<script src="https://unpkg.com/@vue/[email protected]/dist/vue.global.js"></script>
</head>
<body>
<div id="app"></div>
<script>
// 1. Configure compat mode
Vue.configureCompat({ MODE: 2 });
// 2. Define a component using v-model (legacy usage)
const ChildComponent = {
template: `<div @click="$emit('update:modelValue', 'new val')">{{ modelValue }}</div>`,
props: ['modelValue']
};
// 3. Initialize App
new Vue({
el: '#app',
components: { ChildComponent },
data: {
myVal: 'initial'
},
// Using v-model on a component triggers COMPONENT_V_MODEL warning logic inside compat
template: `
<div>
<h1>Reproduction</h1>
<p>Click the text below. Check console for crash.</p>
<child-component v-model="myVal"></child-component>
</div>
`
});
</script>
</body>
</html>What is expected?
A deprecation warning (COMPONENT_V_MODEL) should be logged to the console, but the application should continue to run.
What is actually happening?
The application crashes with the following error in the browser console:
Uncaught TypeError: can't access property "components", instance.appContext is undefined
VueJS 18
formatComponentName
warnDeprecation$1
convertLegacyVModelProps
createBaseVNode
_createVNode
createVNodeWithArgsTransform
render
renderComponentRoot
componentUpdateFn
run
setupRenderEffect
mountComponent
processComponent
patch
render
_compat_mount
createCompatApp
Vue2
<anonymous>
System Info
Any additional comments?
It seems that convertLegacyVModelProps passes a pseudo-instance object ({ type }) to warnDeprecation. However, inside warnDeprecation (specifically when calling formatComponentName), it attempts to access instance.appContext, which is undefined on this pseudo-instance.
This causes the app to crash instead of just emitting a warning.
The current workaround is to suppress the warning:
Vue.configureCompat({ COMPONENT_V_MODEL: "suppress-warning" });
Metadata
Metadata
Assignees
Labels
🔨 p3-minor-bugPriority 3: this fixes a bug, but is an edge case that only affects very specific usage.Priority 3: this fixes a bug, but is an edge case that only affects very specific usage.scope: v2 compat