{"record":{"id":"b43a9f2d2b090649","repo":"Semantic-Org/Semantic-UI","slug":"ui-dimmer-a-required-component-is-not-included-in","errorCode":null,"errorMessage":"UI Dimmer, a required component is not included in this page","messagePattern":"UI Dimmer, a required component is not included in this page","errorType":"console","errorClass":null,"httpStatus":null,"severity":"error","filePath":"src/definitions/modules/modal.js","lineNumber":1020,"sourceCode":"  onHide     : function(){ return true; },\n\n  // called after hide animation\n  onHidden   : function(){},\n\n  // called after approve selector match\n  onApprove  : function(){ return true; },\n\n  // called after deny selector match\n  onDeny     : function(){ return true; },\n\n  selector    : {\n    close    : '> .close',\n    approve  : '.actions .positive, .actions .approve, .actions .ok',\n    deny     : '.actions .negative, .actions .deny, .actions .cancel',\n    modal    : '.ui.modal'\n  },\n  error : {\n    dimmer    : 'UI Dimmer, a required component is not included in this page',\n    method    : 'The method you called is not defined.',\n    notFound  : 'The element you specified could not be found'\n  },\n  className : {\n    active     : 'active',\n    animating  : 'animating',\n    blurring   : 'blurring',\n    inverted   : 'inverted',\n    legacy     : 'legacy',\n    loading    : 'loading',\n    scrolling  : 'scrolling',\n    undetached : 'undetached'\n  }\n};\n\n\n})( jQuery, window, document );\n","sourceCodeStart":1002,"sourceCodeEnd":1038,"githubUrl":"https://github.com/Semantic-Org/Semantic-UI/blob/597843ab84d565cccfd8fd7719416350ae73e734/src/definitions/modules/modal.js#L1002-L1038","documentation":"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.","triggerScenarios":"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.","commonSituations":"Custom build excluded dimmer, wrong script load order, CDN/module config missing dimmer, tree-shaking dropped the dimmer module.","solutions":["Include dimmer.js before modal.js, or use the full semantic.min.js / semantic.js bundle.","In a custom build (semantic.json), ensure 'dimmer' is listed in the components.","Assert typeof $.fn.dimmer !== 'undefined' before initializing any modal."],"exampleFix":"// before: only modal.js loaded\n// <script src=\"modal.js\"></script>\n$('.ui.modal').modal('show'); // -> dimmer missing error\n// after: load dimmer first\n// <script src=\"dimmer.js\"></script>\n// <script src=\"modal.js\"></script>\n$('.ui.modal').modal('show');","handlingStrategy":"validation","validationCode":"// Assert the Dimmer dependency is loaded before initializing any modal.\nfunction safeModal($el){\n  if (typeof $.fn.dimmer === 'undefined') {\n    throw new Error('UI Dimmer is required by modal. Include dimmer.js or use semantic.min.js.');\n  }\n  return $el.modal.apply($el, [].slice.call(arguments, 1));\n}","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Include dimmer.js before modal.js, or ship the full semantic bundle.","In a custom build (semantic.json), keep 'dimmer' in the components list.","Run a startup assertion: if (typeof $.fn.dimmer === 'undefined') fail fast with a clear message."],"tags":["modal","dimmer","dependency","build"],"backgroundTag":null,"analyzedSha":"597843ab84d565cccfd8fd7719416350ae73e734","analyzedAt":"2026-08-13T01:44:23.827Z","schemaVersion":2},"datasetVersion":"2026-08-13T04:17:16.726Z"}