Skip to content

[Regression 3.5.25] @vue/compat: Crash in warnDeprecation when processing COMPONENT_V_MODEL (instance.appContext is undefined) #14202

@hkobay

Description

@hkobay

Vue version

3.5.25

Link to minimal reproduction

see below

Steps to reproduce

  1. Use @vue/compat with Vue 3.5.25.
  2. Configure compat mode to Vue 2 (MODE: 2).
  3. Create a component that accepts v-model (legacy usage).
  4. 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>

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

No one assigned

    Labels

    🔨 p3-minor-bugPriority 3: this fixes a bug, but is an edge case that only affects very specific usage.scope: v2 compat

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions