Semantic-Org/Semantic-UI · error

The API module is required to load resources remotely

Error message

The API module is required to load resources remotely

What it means

When apiSettings is configured, the remote query path requires the separate Semantic UI API module ($.fn.api). can.useAPI() returns $.fn.api !== undefined; if the API JS is not loaded, module.error(error.noAPI) fires and remote loading is skipped, so the dropdown never fetches results.

Source

Thrown at src/definitions/modules/dropdown.js:3798

  /* Component */
  name           : 'Dropdown',
  namespace      : 'dropdown',

  message: {
    addResult     : 'Add <b>{term}</b>',
    count         : '{count} selected',
    maxSelections : 'Max {maxCount} selections',
    noResults     : 'No results found.',
    serverError   : 'There was an error contacting the server'
  },

  error : {
    action          : 'You called a dropdown action that was not defined',
    alreadySetup    : 'Once a select has been initialized behaviors must be called on the created ui dropdown',
    labels          : 'Allowing user additions currently requires the use of labels.',
    missingMultiple : '<select> requires multiple property to be set to correctly preserve multiple values',
    method          : 'The method you called is not defined.',
    noAPI           : 'The API module is required to load resources remotely',
    noStorage       : 'Saving remote data requires session storage',
    noTransition    : 'This module requires ui transitions <https://github.com/Semantic-Org/UI-Transition>'
  },

  regExp : {
    escape   : /[-[\]{}()*+?.,\\^$|#\s]/g,
    quote    : /"/g
  },

  metadata : {
    defaultText     : 'defaultText',
    defaultValue    : 'defaultValue',
    placeholderText : 'placeholder',
    text            : 'text',
    value           : 'value'
  },

  // property names for remote query

View on GitHub (pinned to 597843ab84)

Solutions

1. Include the API module before/with dropdown: add semantic-ui-api.js (the 'api' component)
2. If you don't need remote data, remove the apiSettings option entirely

Example fix

<!-- before -->
<script src="dropdown.js"></script>
<!-- after -->
<script src="api.js"></script>
<script src="dropdown.js"></script>

// If you want remote data, make sure the API module is present first.
function canUseRemoteDropdown() {
  return typeof $.fn.api === 'function';
}
if (canUseRemoteDropdown()) {
  $('.ui.dropdown').dropdown({ apiSettings: { url: '/search?q={query}' } });
} else {
  console.error('Load semantic-ui-api.js before enabling dropdown apiSettings');
}

function hasApiModule() {
  return typeof $.fn !== 'undefined' && typeof $.fn.api === 'function';
}

When it happens

Trigger: Including { apiSettings: { url: '/search?q={query}' } } but loading only dropdown.js — semantic-ui-api.js (the api component) is absent.

Common situations: A trimmed/custom build of Semantic UI that omits api.js; wrong script load order; using dropdown.min without api.min.

Related errors

• There was an error contacting the server
• Saving remote data requires session storage
• This module requires ui transitions <https://github.com/Sema
• Cannot search. No source used, and Semantic API module was n
• No search endpoint was specified

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