Meituan-Dianping/mpvue · warning

method "${key}" has an undefined value in the component defi

Error message

method "${key}" has an undefined value in the component definition. Did you reference the function correctly?

What it means

Vue dev-mode warning from initMethods when a method's value is undefined or null in the component definition. Vue binds it to a noop so calls do not crash, but the handler does nothing. This usually means a broken import or a typo in the methods object.

Source

Thrown at src/core/instance/state.js:242

      if (watcher.dirty) {
        watcher.evaluate()
      }
      if (Dep.target) {
        watcher.depend()
      }
      return watcher.value
    }
  }
}

function initMethods (vm: Component, methods: Object) {
  process.env.NODE_ENV !== 'production' && checkOptionType(vm, 'methods')
  const props = vm.$options.props
  for (const key in methods) {
    vm[key] = methods[key] == null ? noop : bind(methods[key], vm)
    if (process.env.NODE_ENV !== 'production') {
      if (methods[key] == null) {
        warn(
          `method "${key}" has an undefined value in the component definition. ` +
          `Did you reference the function correctly?`,
          vm
        )
      }
      if (props && hasOwn(props, key)) {
        warn(
          `method "${key}" has already been defined as a prop.`,
          vm
        )
      }
    }
  }
}

function initWatch (vm: Component, watch: Object) {
  process.env.NODE_ENV !== 'production' && checkOptionType(vm, 'watch')
  for (const key in watch) {

View on GitHub (pinned to 6c5d78ee04)

Solutions

1. Check the import statement for the method and fix the source of undefined
2. Verify the exported name matches (named vs default export)
3. Log the methods object at module scope to see which value is undefined
4. If intentionally optional, provide a real fallback function instead of null

Example fix

// before
import { submtForm } from './api'
export default { methods: { submitForm: submtForm } }
// after
import { submitForm } from './api'
export default { methods: { submitForm } }

function findUndefinedMethods(methods) {
  return Object.keys(methods || {}).filter(k => methods[k] == null)
}
// call before creating the component options object

function allMethodsDefined(methods) { return Object.values(methods || {}).every(fn => typeof fn === 'function') }

When it happens

Trigger: methods:{ handleClick } where handleClick is not imported/defined; circular-import yielding undefined at definition time; assigning a variable that is declared but not yet initialized (e.g. const defined below in module scope); accidental comma leaving a key with no value after destructuring.

Common situations: Refactors removing a function but leaving the methods entry; bad barrel-file imports; tree-shaking or bundler misconfiguration dropping the export; typo'd function name in an import list.

Related errors

• method "${key}" has already been defined as a data property.
• method "${key}" has an undefined value in the component defi
• method "${key}" has already been defined as a prop.
• method "${key}" has already been defined as a prop.
• tag <${tag}> has no matching end tag.

AI-assisted analysis of Meituan-Dianping/mpvue@6c5d78ee04 (2026-09-02). Data as JSON: /api/errors/01769e31132dcc59. Report an issue: GitHub.