videojs/video.js · error · Error

Component ${componentClassName} does not exist

Error message

Component ${componentClassName} does not exist

What it means

Thrown by Component.getChild/registerChild path when Component.getComponent(componentClassName) returns a falsy value during child instantiation. Video.js looks up every child component by TitleCased name in its internal Component.components_ registry; if no class was registered under that name (or the registered value is not a constructable function), it bails with this error. It almost always means a required component was never registered, was tree-shaken out, or the name supplied to addChild was misspelled.

Source

Thrown at src/js/component.js:629

  addChild(child, options = {}, index = this.children_.length) {
    let component;
    let componentName;

    // If child is a string, create component with options
    if (typeof child === 'string') {
      componentName = toTitleCase(child);

      const componentClassName = options.componentClass || componentName;

      // Set name through options
      options.name = componentName;

      // Create a new object & element for this controls set
      // If there's no .player_, this is a player
      const ComponentClass = Component.getComponent(componentClassName);

      if (!ComponentClass) {
        throw new Error(`Component ${componentClassName} does not exist`);
      }

      // data stored directly on the videojs object may be
      // misidentified as a component to retain
      // backwards-compatibility with 4.x. check to make sure the
      // component class can be instantiated.
      if (typeof ComponentClass !== 'function') {
        return null;
      }

      component = new ComponentClass(this.player_ || this, options);

    // child is a component instance
    } else {
      component = child;
    }

    if (component.parentComponent_) {

View on GitHub (pinned to c3a7e0e6d2)

Solutions

1. Verify the component name spelling and case — addChild expects the TitleCased registered name (e.g. 'ControlBar', not 'controlbar' or 'controlBar').
2. Register the component before constructing the player: videojs.registerComponent('Foo', FooComponent).
3. If using a custom build, ensure the component module is imported so it self-registers (side-effect import).
4. Pass the class directly via options.componentClass if the name lookup is ambiguous.

Example fix

// before
player.addChild('ControllBar');
// after
player.addChild('ControlBar');
// or register your own
videojs.registerComponent('MyComp', MyComp);
player.addChild('MyComp');

const Component = videojs.getComponent('Component');
function canAddChild(name) {
  return Boolean(Component.getComponent(videojs.getComponent(name) ? name : name));
}
// before addChild
if (!videojs.getComponent(childName)) {
  throw new Error(`Refusing to add unregistered child: ${childName}`);
}

const isRegisteredComponent = (name) =>
  typeof name === 'string' && name.length > 0 &&
  typeof videojs.getComponent(name) === 'function';

When it happens

Trigger: Calling player.addChild('Foo') or passing {children: ['Foo']} in options where 'Foo' was never registered via videojs.registerComponent('Foo', ...). Also triggered when componentClass option points at an unregistered class name, or when a custom build omits a component that another component references as a child.

Common situations: Custom/lean video.js builds that exclude default components; typo in a child name (e.g. 'ControllBar'); plugin that registers children but is loaded after the player is built; upgrading video.js where a default component was renamed.

Related errors

• Illegal component name, "${name}"; must be a non-empty strin
• Illegal component, "${name}"; ${reason}.
• No techOrder specified. Did you overwrite videojs.options in
• currentDimension only accepts width or height value
• Can not register Player component after player has been crea

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