What causes "Provided callback for onhintclick was not a function." in usablica/intro.js?

Pass a real function reference: introJs().onHintClick(function(targetElement){ ... }).

Provided callback for onhintclick was not a function.

Error message

Provided callback for onhintclick was not a function.

What it means

The Hint class onHintClick method stores the per-hint-click callback in this.callbacks.hintClick. It validates the argument with isFunction and throws when it is not a function, preventing a later TypeError when a hint item is clicked.

Source

Thrown at src/packages/hint/hint.ts:416

    this.callbacks.hintsAdded = providedCallback;
    return this;
  }

  /**
   * @deprecated onhintsadded is deprecated, please use onHintsAdded instead
   * @param providedCallback callback function
   */
  onhintsadded(providedCallback: hintsAddedCallback) {
    this.onHintsAdded(providedCallback);
  }

  /**
   * Callback for when hint items are clicked
   * @param providedCallback callback function
   */
  onHintClick(providedCallback: hintClickCallback) {
    if (!isFunction(providedCallback)) {
      throw new Error("Provided callback for onhintclick was not a function.");
    }

    this.callbacks.hintClick = providedCallback;
    return this;
  }

  /**
   * @deprecated onhintclick is deprecated, please use onHintClick instead
   * @param providedCallback
   */
  onhintclick(providedCallback: hintClickCallback) {
    this.onHintClick(providedCallback);
  }

  /**
   * Callback for when hint items are closed
   * @param providedCallback callback function
   */

View on GitHub (pinned to e5517e6a24)

Solutions

Pass a real function reference: introJs().onHintClick(function(targetElement){ ... }).
console.log(typeof handler) to find why the value is not a function; fix the source assignment.
If configuring via data attributes/JSON, wire the handler in JS after parse instead of trying to inline it.
Use the current camelCase API (onHintClick) and correct callback signature.
Guard the call site with a type check before registering.

Example fix

// before
introJs().onHintClick('handleHintClick'); // string, not function
// after
introJs().onHintClick(handleHintClick); // actual function reference

Defensive patterns

Strategy: validation

Validate before calling

if (typeof onHintClickCb !== 'function') { throw new TypeError('onHintClick expects a function'); }
introJs().onHintClick(onHintClickCb);

Type guard

const isFn = (v: unknown): v is (...args: unknown[]) => void => typeof v === 'function';

Try / catch

try {
  intro().onHintClick(cb);
} catch (e) {
  if (/onhintclick was not a function/.test(e.message)) {
    intro().onHintClick(() => {}); // safe fallback
  } else { throw e; }
}

Prevention

Never pass a string function name; pass the reference
Verify typeof handler === 'function' before any intro.js registration
Centralize callback wiring in one setup function to spot bad values
Don't pass Promises where functions are expected; wrap with () => promise.then(...)

When it happens

Trigger: introJs().onHintClick(undefined| null | 'onClick' | obj) — passing anything other than a function, often because the variable holding the callback is undefined or the function name string was passed instead of the reference.

Common situations: Passing the string name of a function instead of the function; destructuring config that misses the key; minification changing exports so the referenced handler is undefined; copy-paste between hint and tour APIs with wrong callback type.

Related errors

AI-assisted analysis of usablica/intro.js@e5517e6a24 (2026-08-31). Data as JSON: /api/errors/dbd84af94c7110c1. Report an issue: GitHub.