GrapesJS/grapesjs · error

Spectrum: no such method: '" + opts + "'"

Error message

Spectrum: no such method: '" + opts + "'"

What it means

GrapesJS bundles a legacy Spectrum color picker jQuery plugin. Its jQuery method dispatcher looks up a method name on the spectrum instance and throws when the requested method string doesn't exist. This is an internal-library error usually surfaced when the picker is invoked with an unknown method or the component isn't fully initialized.

Source

Thrown at packages/core/src/utils/ColorPicker.ts:1213

  function inputTypeColorSupport() {
    return $.fn.spectrum.inputTypeColorSupport();
  }

  /**
   * Define a jQuery plugin
   */
  var dataID = 'spectrum.id';
  $.fn.spectrum = function (opts, extra) {
    if (typeof opts == 'string') {
      var returnValue = this;
      var args = Array.prototype.slice.call(arguments, 1);

      this.each(function () {
        var spect = spectrums[$(this).data(dataID)];
        if (spect) {
          var method = spect[opts];
          if (!method) {
            throw new Error("Spectrum: no such method: '" + opts + "'");
          }

          if (opts == 'get') {
            returnValue = spect.get();
          } else if (opts == 'container') {
            returnValue = spect.container;
          } else if (opts == 'option') {
            returnValue = spect.option.apply(spect, args);
          } else if (opts == 'destroy') {
            spect.destroy();
            $(this).removeData(dataID);
          } else {
            method.apply(spect, args);
          }
        }
      });

      return returnValue;

View on GitHub (pinned to 2bdeda85b8)

Solutions

1. Use a valid Spectrum method name ('show', 'hide', 'get', 'set', 'container', 'enable', 'disable', 'destroy', 'option').
2. Ensure the color picker is initialized on the element before calling methods (the element must have a spectrum instance in the internal registry).
3. Avoid calling spectrum internals directly; use GrapesJS's editor APIs (e.g. style manager color inputs) instead.
4. If you need specific spectrum methods, bundle/replace the color picker via the appropriate GrapesJS custom-color-picker option.

Example fix

// before
$el.spectrum('colour'); // typo, not a spectrum method
// after
const color = $el.spectrum('get');

const VALID = ['show','hide','toggle','set','get','container','enable','disable','option','destroy'];
if (!VALID.includes(methodName)) throw new Error(`Unsupported spectrum method: ${methodName}`);
const inst = $el.data('spectrum-id') && spectrums[$el.data('spectrum-id')];
if (!inst) throw new Error('Spectrum not initialized on this element');

null

try {
  const value = $el.spectrum('get');
} catch (err) {
  if (err.message.startsWith('Spectrum: no such method')) {
    console.error('Init the color picker or use a valid method name');
  } else throw err;
}

When it happens

Trigger: Calling `$(el).spectrum('someMethod')` (or internal code invoking the picker with an options string) where `someMethod` isn't one of the supported methods ('get', 'container', 'show', 'hide', 'destroy', 'enable', 'disable', etc.), or invoking a method before the spectrum instance was created for that element.

Common situations: Custom color-input integrations calling spectrum APIs directly; race conditions where the picker method is called before init; version drift where a method was removed from the bundled Spectrum; typos in method names in custom RTE/asset-manager color setups.

Related errors

• Target option is required
• Cannot remove immutable record

AI-assisted analysis of GrapesJS/grapesjs@2bdeda85b8 (2026-08-30). Data as JSON: /api/errors/a6503a9b1cb4637c. Report an issue: GitHub.