videojs/video.js · error · Error

Illegal component name, "${name}"; must be a non-empty strin

Error message

Illegal component name, "${name}"; must be a non-empty string.

What it means

registerComponent guards its name argument: it must be a non-empty string. Names are used as registry keys and TitleCased for lookup, so empty/non-string names would corrupt the Component.components_ map and silently break child resolution. The check fails fast before any registration side effects.

Source

Thrown at src/js/component.js:1990

   * > NOTE: {@link Tech}s should not be registered as a `Component`. {@link Tech}s
   *         should be registered using {@link Tech.registerTech} or
   *         {@link videojs:videojs.registerTech}.
   *
   * > NOTE: This function can also be seen on videojs as
   *         {@link videojs:videojs.registerComponent}.
   *
   * @param {string} name
   *        The name of the `Component` to register.
   *
   * @param {Component} ComponentToRegister
   *        The `Component` class to register.
   *
   * @return {Component}
   *         The `Component` that was registered.
   */
  static registerComponent(name, ComponentToRegister) {
    if (typeof name !== 'string' || !name) {
      throw new Error(`Illegal component name, "${name}"; must be a non-empty string.`);
    }

    const Tech = Component.getComponent('Tech');

    // We need to make sure this check is only done if Tech has been registered.
    const isTech = Tech && Tech.isTech(ComponentToRegister);
    const isComp = Component === ComponentToRegister ||
      Component.prototype.isPrototypeOf(ComponentToRegister.prototype);

    if (isTech || !isComp) {
      let reason;

      if (isTech) {
        reason = 'techs must be registered using Tech.registerTech()';
      } else {
        reason = 'must be a Component subclass';
      }

View on GitHub (pinned to c3a7e0e6d2)

Solutions

1. Pass a non-empty string literal as the name, e.g. registerComponent('MyComp', MyComp).
2. Validate the name variable before registering: if (typeof name === 'string' && name.length) {...}.
3. Check that the build pipeline preserves string-literal names (avoid registering inside mangled closures).

Example fix

// before
videojs.registerComponent(name, MyComp); // name is undefined
// after
if (typeof name === 'string' && name.length) {
  videojs.registerComponent(name, MyComp);
}

function safeRegisterComponent(name, Klass) {
  if (typeof name !== 'string' || name.length === 0) {
    throw new TypeError('name must be a non-empty string');
  }
  return videojs.registerComponent(name, Klass);
}

const isValidComponentName = (n) => typeof n === 'string' && n.length > 0;

When it happens

Trigger: Calling videojs.registerComponent('', Klass), registerComponent(null, Klass), registerComponent(undefined, Klass), or passing a number/symbol as the name.

Common situations: Programmatic registration where the name comes from a variable that was not initialized; bundlers that drop a name; minification bugs that mangle a string literal name.

Related errors

• Illegal component, "${name}"; ${reason}.
• Component ${componentClassName} does not exist
• currentDimension only accepts width or height value
• Illegal plugin name, "${name}", must be a string, was ${type
• Illegal plugin for "${name}", must be a function, was ${type

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