twbs/bootstrap · error · TypeError

No method named "${config}"

Error message

No method named "${config}"

What it means

Tab's jQueryInterface creates the instance without forwarding any config — Tab.getOrCreateInstance(this) — then dispatches the string with the strict guard (no '_', no 'constructor'). Tab has exactly two public methods: show and dispose. There is no toggle or activate method.

Source

Thrown at js/src/tab.js:277

    return elem.matches(SELECTOR_INNER_ELEM) ? elem : SelectorEngine.findOne(SELECTOR_INNER_ELEM, elem)
  }

  // Try to get the outer element (usually the .nav-item)
  _getOuterElement(elem) {
    return elem.closest(SELECTOR_OUTER) || elem
  }

  // Static
  static jQueryInterface(config) {
    return this.each(function () {
      const data = Tab.getOrCreateInstance(this)

      if (typeof config !== 'string') {
        return
      }

      if (data[config] === undefined || config.startsWith('_') || config === 'constructor') {
        throw new TypeError(`No method named "${config}"`)
      }

      data[config]()
    })
  }
}

/**
 * Data API implementation
 */

EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) {
  if (['A', 'AREA'].includes(this.tagName)) {
    event.preventDefault()
  }

  if (isDisabled(this)) {
    return

View on GitHub (pinned to 6177d5f849)

Solutions

  1. Use show or dispose — Tab's entire public surface.
  2. To deactivate a tab, show its sibling tab; there is no hide/toggle.
  3. Replace jQuery UI 'activate' with 'show'.
  4. For dynamic dispatch, prefer bootstrap.Tab.getOrCreateInstance(el).show().

Example fix

// before
$('#tab').tab('toggle') // TypeError: No method named "toggle"

// after
$('#tab').tab('show') // show | dispose
Defensive patterns

Strategy: validation

Validate before calling

function callTabMethod(element, method) {
  const instance = bootstrap.Tab.getOrCreateInstance(element)
  const callable = typeof instance[method] === 'function' &&
    !method.startsWith('_') && method !== 'constructor'
  if (!callable) {
    console.warn(`Tab: ignoring unknown method "${method}"`)
    return
  }
  instance[method]()
}

Type guard

const TAB_METHODS = ['show', 'dispose'] as const
type TabMethod = (typeof TAB_METHODS)[number]
const isTabMethod = (m: string): m is TabMethod =>
  (TAB_METHODS as readonly string[]).includes(m)

Try / catch

try {
  $('#tab').tab(method)
} catch (err) {
  if (err instanceof TypeError && err.message.startsWith('No method named')) {
    console.warn(`Tab: unknown method "${method}"`)
  } else {
    throw err
  }
}

Prevention

When it happens

Trigger: $('#tab').tab('toggle') — no toggle on Tab; $('#tab').tab('activate') — jQuery UI vocabulary; $('#tab').tab('constructor') or any '_'-prefixed name; $('#tab').tab('hide') — Tab manages activation via show only.

Common situations: Porting jQuery UI tabs code ('activate'); assuming symmetric show/hide pairs on every component; dynamic tab switching code that interpolates method names.

Related errors


AI-assisted analysis of twbs/bootstrap@6177d5f849 (2026-08-22). Data as JSON: /api/errors/74409d99f6536f99. Report an issue: GitHub.