Meituan-Dianping/mpvue · error

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 binds each entry of the methods option onto the instance. If a method's value is null or undefined, Vue silently substitutes noop so calls don't crash, but warns that the reference was probably a mistake (e.g. a misnamed import).

Source

Thrown at packages/weex-vue-framework/factory.js:3252

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

function initMethods (vm, methods) {
  process.env.NODE_ENV !== 'production' && checkOptionType(vm, 'methods');
  var props = vm.$options.props;
  for (var 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, watch) {
  process.env.NODE_ENV !== 'production' && checkOptionType(vm, 'watch');
  for (var key in watch) {

View on GitHub (pinned to 6c5d78ee04)

Solutions

1. Fix the import/reference so the method points to a real function
2. Log or console-check the value at module scope to find the undefined source
3. Remove the methods entry if it is no longer used
4. For circular imports, defer binding (e.g. methods: { handler() { return importedFn(); } })

Example fix

// before
import { submitFoem } from './api'; // typo
methods: { onSubmit: submitFoem }
// after
import { submitForm } from './api';
methods: { onSubmit: submitForm }

function validateMethods(options) {
  Object.entries(options.methods || {}).forEach(([k, fn]) => {
    if (fn == null) throw new TypeError(`method "${k}" is undefined in component definition`);
  });
}

function isDefinedFn(v) {
  return typeof v === 'function';
}

When it happens

Trigger: methods: { handler: someFn } where someFn is undefined — bad import name, circular import not yet initialized, or methods: { handler: undefined } explicitly.

Common situations: Renaming an imported function without updating methods, tree-shaking or circular-dependency issues yielding undefined at definition time, typos in utility module names, or referencing a function before it is declared in the module.

Related errors

• method "${key}" has already been defined as a data property.
• method "${key}" has already been defined as a prop.
• method "${key}" has an undefined value in the component defi
• 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/9b949f674e03e662. Report an issue: GitHub.