Semantic-Org/Semantic-UI · error

UI Dimmer, a required component is not included in this page

Error message

UI Dimmer, a required component is not included in this page

What it means

Emitted during modal initialization (modal.js:118-120, also referenced modal.js:674) when $.fn.dimmer === undefined — the Dimmer module's JavaScript is not loaded. Modal depends on Dimmer to render the page overlay; without it, modal cannot create its dimmer and initialization returns early. It is a console.error (modal.js:822), not thrown, but functionally the modal will not work.

Source

Thrown at src/definitions/modules/modal.js:1020

  onHide     : function(){ return true; },

  // called after hide animation
  onHidden   : function(){},

  // called after approve selector match
  onApprove  : function(){ return true; },

  // called after deny selector match
  onDeny     : function(){ return true; },

  selector    : {
    close    : '> .close',
    approve  : '.actions .positive, .actions .approve, .actions .ok',
    deny     : '.actions .negative, .actions .deny, .actions .cancel',
    modal    : '.ui.modal'
  },
  error : {
    dimmer    : 'UI Dimmer, a required component is not included in this page',
    method    : 'The method you called is not defined.',
    notFound  : 'The element you specified could not be found'
  },
  className : {
    active     : 'active',
    animating  : 'animating',
    blurring   : 'blurring',
    inverted   : 'inverted',
    legacy     : 'legacy',
    loading    : 'loading',
    scrolling  : 'scrolling',
    undetached : 'undetached'
  }
};


})( jQuery, window, document );

View on GitHub (pinned to 597843ab84)

Solutions

1. Include dimmer.js before modal.js, or use the full semantic.min.js / semantic.js bundle.
2. In a custom build (semantic.json), ensure 'dimmer' is listed in the components.
3. Assert typeof $.fn.dimmer !== 'undefined' before initializing any modal.

Example fix

// before: only modal.js loaded
// <script src="modal.js"></script>
$('.ui.modal').modal('show'); // -> dimmer missing error
// after: load dimmer first
// <script src="dimmer.js"></script>
// <script src="modal.js"></script>
$('.ui.modal').modal('show');

// Assert the Dimmer dependency is loaded before initializing any modal.
function safeModal($el){
  if (typeof $.fn.dimmer === 'undefined') {
    throw new Error('UI Dimmer is required by modal. Include dimmer.js or use semantic.min.js.');
  }
  return $el.modal.apply($el, [].slice.call(arguments, 1));
}

When it happens

Trigger: Including modal.js on the page without dimmer.js, or a custom Semantic UI build/bundle that omitted the dimmer component, so $.fn.dimmer is undefined when .modal() runs.

Common situations: Custom build excluded dimmer, wrong script load order, CDN/module config missing dimmer, tree-shaking dropped the dimmer module.

Related errors

• The method you called is not defined.
• The element you specified could not be found
• $.cookie is not included. A storage solution is required.
• The method you called is not defined.
• The API module is required to load resources remotely

AI-assisted analysis of Semantic-Org/Semantic-UI@597843ab84 (2026-08-13). Data as JSON: /api/errors/b43a9f2d2b090649. Report an issue: GitHub.