videojs/video.js · error · Error

The eventBusKey "${eventBusKey}" does not refer to an elemen

Error message

The eventBusKey "${eventBusKey}" does not refer to an element.

What it means

When applying the evented() mixin with an eventBusKey option, video.js expects target[eventBusKey] to already be a DOM element (it must have a nodeName). It reuses that element as the event bus; if the key points to nothing or a non-element, dispatching would silently fail. This is a setup-time invariant enforced before any events are bound.

Source

Thrown at src/js/mixins/evented.js:482

 *
 * @param  {Object} [options={}]
 *         Options for customizing the mixin behavior.
 *
 * @param  {string} [options.eventBusKey]
 *         By default, adds a `eventBusEl_` DOM element to the target object,
 *         which is used as an event bus. If the target object already has a
 *         DOM element that should be used, pass its key here.
 *
 * @return {Object}
 *         The target object.
 */
function evented(target, options = {}) {
  const {eventBusKey} = options;

  // Set or create the eventBusEl_.
  if (eventBusKey) {
    if (!target[eventBusKey].nodeName) {
      throw new Error(`The eventBusKey "${eventBusKey}" does not refer to an element.`);
    }
    target.eventBusEl_ = target[eventBusKey];
  } else {
    target.eventBusEl_ = Dom.createEl('span', {className: 'vjs-event-bus'});
  }

  Object.assign(target, EventedMixin);

  if (target.eventedCallbacks) {
    target.eventedCallbacks.forEach((callback) => {
      callback();
    });
  }

  // When any evented object is disposed, it removes all its listeners.
  target.on('dispose', () => {
    target.off();
    [target, target.el_, target.eventBusEl_].forEach(function(val) {

View on GitHub (pinned to c3a7e0e6d2)

Solutions

1. Ensure target[eventBusKey] is a real DOM element before calling evented().
2. Set the element property first, then call evented(target, {eventBusKey: 'el_'}).
3. If no existing element, omit eventBusKey — video.js will create a vjs-event-bus span for you.

Example fix

// before
evented(this, {eventBusKey: 'el'}); // this.el undefined yet
// after
this.el_ = Dom.createEl('div');
evented(this, {eventBusKey: 'el_'});

function applyEvented(target, key) {
  if (key && !(target[key] && target[key].nodeName)) {
    throw new Error(`eventBusKey '${key}' must point to a DOM element`);
  }
  videojs.obj.evented(target, key ? {eventBusKey: key} : {});
}

const isDomElement = (v) => v && typeof v.nodeName === 'string';

When it happens

Trigger: Calling evented(obj, {eventBusKey: 'el'}) when obj.el is undefined/null/not a DOM node; calling evented(obj, {eventBusKey: 'foo'}) when obj has no foo property; eventBusKey set before the element was assigned.

Common situations: Applying evented to a component whose el() is created later in init; renaming the element property without updating eventBusKey; subclass lifecycle ordering bugs.

Related errors

• Invalid target for ${objName(obj)}#${fnName}; must be a DOM
• Invalid event type for ${objName(obj)}#${fnName}; must be a
• Invalid listener for ${objName(obj)}#${fnName}; must be a fu
• Invalid event type for ${objName(this)}#trigger; must be a n
• currentDimension only accepts width or height value

AI-assisted analysis of videojs/video.js@c3a7e0e6d2 (2026-08-13). Data as JSON: /api/errors/5efb8b48e0939b41. Report an issue: GitHub.