videojs/video.js · error · Error

class has illegal whitespace characters

Error message

class has illegal whitespace characters

What it means

Thrown by the private throwIfWhitespace helper (invoked from dom.hasClass) when the class-name argument contains a space. Element.classList.contains treats its argument as a single token, so a multi-class string would silently never match; video.js throws to surface the bug.

Source

Thrown at src/js/utils/dom.js:47

  // will have a length of 0, failing this check.
  return typeof str === 'string' && Boolean(str.trim());
}

/**
 * Throws an error if the passed string has whitespace. This is used by
 * class methods to be relatively consistent with the classList API.
 *
 * @private
 * @param  {string} str
 *         The string to check for whitespace.
 *
 * @throws {Error}
 *         Throws an error if there is whitespace in the string.
 */
function throwIfWhitespace(str) {
  // str.indexOf instead of regex because str.indexOf is faster performance wise.
  if (str.indexOf(' ') >= 0) {
    throw new Error('class has illegal whitespace characters');
  }
}

/**
 * Whether the current DOM interface appears to be real (i.e. not simulated).
 *
 * @return {boolean}
 *         Will be `true` if the DOM appears to be real, `false` otherwise.
 */
export function isReal() {
  // Both document and window will never be undefined thanks to `global`.
  return document === window.document;
}

/**
 * Determines, via duck typing, whether or not a value is a DOM element.
 *
 * @param  {*} value

View on GitHub (pinned to c3a7e0e6d2)

Solutions

1. Pass a single class token to hasClass.
2. Split multi-class strings and check each: classes.split(' ').every(c => hasClass(el, c)).
3. Prefer addClass/removeClass for multi-class operations (they already split on whitespace).

Example fix

// before
videojs.dom.hasClass(el, 'vjs-playing vjs-has-started');
// after
['vjs-playing', 'vjs-has-started'].every(c => videojs.dom.hasClass(el, c));

function hasClassSafe(el, className) {
  if (typeof className !== 'string' || className.indexOf(' ') >= 0) {
    throw new TypeError('className must be a single token with no spaces');
  }
  return videojs.dom.hasClass(el, className);
}

function isSingleClassName(c) {
  return typeof c === 'string' && c.length > 0 && c.indexOf(' ') < 0;
}

When it happens

Trigger: Calling dom.hasClass(element, 'foo bar') or any internal path (component class checks, control bar state checks) that passes a compound class string. Also triggered by user-derived class data that was built with join(' ').

Common situations: Checking for a compound class ('vjs-playing vjs-has-started') instead of one class at a time; passing template literals like `${base} ${modifier}` into hasClass; data-driven class lists concatenated with spaces.

Related errors

• currentDimension only accepts width or height value
• Invalid target for ${objName(obj)}#${fnName}; must be a DOM
• TextTrack kind is required but was not provided
• The element or ID supplied is not valid. (videojs)
• Illegal component name, "${name}"; must be a non-empty strin

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