twbs/bootstrap · error · TypeError

No method named "${config}"

Error message

No method named "${config}"

What it means

Modal's jQueryInterface forwards a second argument to the method — data[config](relatedTarget), which only show and toggle actually accept — and throws when the method string is not an instance property. Public methods are toggle, show, hide, handleUpdate and dispose. The Bootstrap vocabulary is show/hide, not the open/close used by jQuery UI.

Source

Thrown at js/src/modal.js:327

    }
  }

  _resetAdjustments() {
    this._element.style.paddingLeft = ''
    this._element.style.paddingRight = ''
  }

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

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

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

      data[config](relatedTarget)
    })
  }
}

/**
 * Data API implementation
 */

EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) {
  const target = SelectorEngine.getElementFromSelector(this)

  if (['A', 'AREA'].includes(this.tagName)) {
    event.preventDefault()
  }

View on GitHub (pinned to 6177d5f849)

Solutions

  1. Use show, hide, toggle, handleUpdate or dispose.
  2. To forward a related target (V5.2.4+ show behavior), keep it as the second argument: $('#modal').modal('show', relatedTarget).
  3. Fix jQuery UI habits: open → show, close → hide.
  4. For dynamic dispatch, check the method exists on bootstrap.Modal.getInstance(el) first.

Example fix

// before
$('#modal').modal('open', evt.relatedTarget) // TypeError: No method named "open"

// after
$('#modal').modal('show', evt.relatedTarget) // toggle | show | hide | handleUpdate | dispose
Defensive patterns

Strategy: validation

Validate before calling

function callModalMethod(element, method, relatedTarget) {
  const instance = bootstrap.Modal.getOrCreateInstance(element)
  if (typeof instance[method] !== 'function') {
    console.warn(`Modal: ignoring unknown method "${method}"`)
    return
  }
  instance[method](relatedTarget) // only show/toggle consume relatedTarget
}

Type guard

const MODAL_METHODS = ['toggle', 'show', 'hide', 'handleUpdate', 'dispose'] as const
type ModalMethod = (typeof MODAL_METHODS)[number]
const isModalMethod = (m: string): m is ModalMethod =>
  (MODAL_METHODS as readonly string[]).includes(m)

Try / catch

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

Prevention

When it happens

Trigger: $('#modal').modal('open') or modal('close') — jQuery UI vocabulary; $('#modal').modal('handleupdate') (case-sensitive handleUpdate); $('#modal').modal('toggleEnabled') (a Tooltip method, not Modal); $('#modal').modal('getInstance').

Common situations: Developers porting jQuery UI dialog code; copy-paste from older tutorials; mixing method vocabularies between Bootstrap components; passing static helper names through the bridge.

Related errors


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