twbs/bootstrap · error · Error

You have to implement the static method "NAME", for each com

Error message

You have to implement the static method "NAME", for each component!

What it means

Config is the abstract base that every component and several internal utilities (Backdrop, FocusTrap, Swipe, TemplateFactory) extend; its static NAME getter deliberately throws to force subclasses to define their own. NAME is load-bearing: BaseComponent builds the bs.* instance-storage key from it and Config's type-check error message prefixes it. The throw fires at construction time — instantiating a subclass that never overrode NAME.

Source

Thrown at js/src/util/config.js:26

import Manipulator from '../dom/manipulator.js'
import { isElement, toType } from './index.js'

/**
 * Class definition
 */

class Config {
  // Getters
  static get Default() {
    return {}
  }

  static get DefaultType() {
    return {}
  }

  static get NAME() {
    throw new Error('You have to implement the static method "NAME", for each component!')
  }

  _getConfig(config) {
    config = this._mergeConfigObj(config)
    config = this._configAfterMerge(config)
    this._typeCheckConfig(config)
    return config
  }

  _configAfterMerge(config) {
    return config
  }

  _mergeConfigObj(config, element) {
    const jsonConfig = isElement(element) ? Manipulator.getDataAttribute(element, 'config') : {} // try to parse

    return {
      ...this.constructor.Default,

View on GitHub (pinned to 6177d5f849)

Solutions

1. Add the override to the subclass: static get NAME() { return 'mywidget' }.
2. Copy the pattern from any built-in, e.g. js/src/alert.js:32 (static get NAME() { return 'alert' }).
3. Remember utilities need it too — Backdrop, FocusTrap, Swipe and TemplateFactory all declare NAME.
4. Return a short, unique, lowercase string; Bootstrap derives data keys and event names from it.

Example fix

// before
class Widget extends BaseComponent {}
new Widget(el) // Error: You have to implement the static method "NAME", for each component!

// after
class Widget extends BaseComponent {
  static get NAME() { return 'widget' }
}
new Widget(el)

// Property-descriptor check — does NOT invoke Config's throwing getter
function declaresOwnName(Ctor) {
  return Object.getOwnPropertyDescriptor(Ctor, 'NAME') !== undefined
}

if (!declaresOwnName(MyWidget)) {
  throw new Error('MyWidget must define `static get NAME()` before instantiation')
}

When it happens

Trigger: class MyWidget extends BaseComponent {} followed by new MyWidget(el) — no NAME override, so BaseComponent's data-key computation hits Config's throwing getter; the same for classes extending Config directly or utility classes like Backdrop without a NAME; third-party plugins built on bootstrap/src that skip the getter.

Common situations: Writing custom Bootstrap-style components by extending BaseComponent/Config; copying an old plugin template that predates the Config refactor; wrapping Bootstrap internals in a design system and forgetting one static getter.

Related errors

• ${this.constructor.NAME.toUpperCase()}: Option "${property}"
• No method named "${config}"
• No method named "${config}"
• No method named "${config}"
• ${NAME.toUpperCase()}: Option "reference" provided type "obj

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