Meituan-Dianping/mpvue · warning

Injection "${key}" not found

Error message

Injection "${key}" not found

What it means

Vue walks the ancestor chain looking for a matching key in each ancestor's `_provided` object when resolving `inject`. If no ancestor ever provided the requested key, Vue warns (dev only) and leaves the injected value `undefined`.

Source

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

    // inject is :any because flow is not smart enough to figure out cached
    var result = Object.create(null);
    var keys = hasSymbol
        ? Reflect.ownKeys(inject)
        : Object.keys(inject);

    for (var i = 0; i < keys.length; i++) {
      var key = keys[i];
      var provideKey = inject[key];
      var source = vm;
      while (source) {
        if (source._provided && provideKey in source._provided) {
          result[key] = source._provided[provideKey];
          break
        }
        source = source.$parent;
      }
      if (process.env.NODE_ENV !== 'production' && !hasOwn(result, key)) {
        warn(("Injection \"" + key + "\" not found"), vm);
      }
    }
    return result
  }
}

/*  */

function createFunctionalComponent (
  Ctor,
  propsData,
  data,
  context,
  children
) {
  var props = {};
  var propOptions = Ctor.options.props;
  if (isDef(propOptions)) {

View on GitHub (pinned to 6c5d78ee04)

Solutions

1. Add `provide: { foo: ... }` on an appropriate ancestor component.
2. Declare a default: `inject: { foo: { default: fallbackValue } }` so the warning disappears and the component works standalone.
3. Use `inject: { foo: { from: 'actualProvidedKey' } }` if the key was renamed.
4. Make the binding explicitly optional with `default: undefined` if absence is legitimate.

Example fix

// before
inject: ['theme'];
// after
inject: { theme: { default: 'light' } }

// validate at setup/mount time
if (this.$options.inject && !canInject('theme', this) && !('theme' in this)) {
  console.warn('theme was not provided by any ancestor');
}

function hasInjection(vm, key) {
  let s = vm.$parent;
  while (s) { if (s._provided && s._provided[key] !== undefined) return true; s = s.$parent; }
  return false;
}

When it happens

Trigger: A component declares `inject: ['foo']` (or `inject: { foo: ... }` with a non-optional default-less binding) but no ancestor in its chain calls `provide: { foo: ... }` or provides via a Symbol/unique key mismatch (e.g. `from: 'foo'` key mismatch).

Common situations: Component library consumers using a component outside its required provider (e.g. a `<checkbox-group>` child rendered without the group); renamed provide/inject keys after refactor; rendering the component in isolation in a test or story.

Related errors

• Avoid mutating an injected value directly since the changes
• $props is readonly.
• Invalid Component definition: ${String(Ctor)}
• Avoid using observed data object as vnode data: ${JSON.strin
• Avoid using non-primitive value as key, use string/number va

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