twbs/bootstrap · error · TypeError

No method named "${config}"

Error message

No method named "${config}"

What it means

Dropdown's jQueryInterface dispatches $('.toggle').dropdown(name) to the instance method name and throws when data[name] is undefined. Public methods are show, hide, toggle, update and dispose. Static helpers such as clearMenus or getInstance live on the class, not the instance, and are rejected too.

Source

Thrown at js/src/dropdown.js:349

      return
    }

    // if target isn't included in items (e.g. when expanding the dropdown)
    // allow cycling to get the last item in case key equals ARROW_UP_KEY
    getNextActiveElement(items, target, key === ARROW_DOWN_KEY, !items.includes(target)).focus()
  }

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

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

      if (typeof data[config] === 'undefined') {
        throw new TypeError(`No method named "${config}"`)
      }

      data[config]()
    })
  }

  static clearMenus(event) {
    if (event.button === RIGHT_MOUSE_BUTTON || (event.type === 'keyup' && event.key !== TAB_KEY)) {
      return
    }

    const openToggles = SelectorEngine.find(SELECTOR_DATA_TOGGLE_SHOWN)

    for (const toggle of openToggles) {
      const context = Dropdown.getInstance(toggle)
      if (!context || context._config.autoClose === false) {
        continue
      }

View on GitHub (pinned to 6177d5f849)

Solutions

  1. Use the public methods: show, hide, toggle, update, dispose.
  2. Remember v5 renamed v4's 'destroy' to 'dispose'.
  3. For static functionality, use the class directly: bootstrap.Dropdown.clearMenus(event) / bootstrap.Dropdown.getInstance(el).
  4. Validate dynamic names before dispatch: typeof instance[name] === 'function'.

Example fix

// before
$('.dropdown-toggle').dropdown('hideMenu') // TypeError: No method named "hideMenu"

// after
$('.dropdown-toggle').dropdown('hide') // show | hide | toggle | update | dispose
Defensive patterns

Strategy: validation

Validate before calling

function callDropdownMethod(element, method) {
  const instance = bootstrap.Dropdown.getOrCreateInstance(element)
  if (typeof instance[method] !== 'function') {
    console.warn(`Dropdown: ignoring unknown method "${method}"`)
    return
  }
  instance[method]()
}

Type guard

const DROPDOWN_METHODS = ['show', 'hide', 'toggle', 'update', 'dispose'] as const
type DropdownMethod = (typeof DROPDOWN_METHODS)[number]
const isDropdownMethod = (m: string): m is DropdownMethod =>
  (DROPDOWN_METHODS as readonly string[]).includes(m)

Try / catch

try {
  $('.dropdown-toggle').dropdown(method)
} catch (err) {
  if (err instanceof TypeError && err.message.startsWith('No method named')) {
    console.warn(`Dropdown: unknown method "${method}"`)
  } else {
    throw err
  }
}

Prevention

When it happens

Trigger: $('.dropdown-toggle').dropdown('hideMenu'); $('.dropdown-toggle').dropdown('updatePosition') (correct: update); $('.dropdown-toggle').dropdown('getInstance') (static, not instance); $('.dropdown-toggle').dropdown('destroy') (v4 name; v5 is dispose).

Common situations: v4→v5 migrations ('destroy' → 'dispose'); guessing jQuery-UI-style verbs; calling static API names through the jQuery bridge; dynamic method strings from data attributes.

Related errors


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