Semantic-Org/Semantic-UI · warning

You tried to switch to a side that does not exist.

Error message

You tried to switch to a side that does not exist.

What it means

Emitted in Shape's set.nextSide(selector) (shape.js:281-283) when $side.filter(selector).length === 0 — the requested side selector matches none of the shape's .side children. Shape resets to the default side and logs the error. It is a console.error (shape.js:725), not thrown.

Source

Thrown at src/definitions/modules/shape.js:900

  // width during animation, can be set to 'auto', initial', 'next' or pixel amount
  width: 'initial',

  // height during animation, can be set to 'auto', 'initial', 'next' or pixel amount
  height: 'initial',

  // callback occurs on side change
  beforeChange : function() {},
  onChange     : function() {},

  // allow animation to same side
  allowRepeats: false,

  // animation duration
  duration   : false,

  // possible errors
  error: {
    side   : 'You tried to switch to a side that does not exist.',
    method : 'The method you called is not defined'
  },

  // classnames used
  className   : {
    animating : 'animating',
    hidden    : 'hidden',
    loading   : 'loading',
    active    : 'active'
  },

  // selectors used
  selector    : {
    sides : '.sides',
    side  : '.side'
  }

};

View on GitHub (pinned to 597843ab84)

Solutions

  1. Pass a selector that matches an existing .side child (e.g. '.second', an index, or '.next').
  2. Make sure every side element has the class="side" markup.
  3. Call $('.shape').shape('refresh') after adding sides dynamically.

Example fix

// before
$('.shape').shape('.thrid'); // typo -> side error
// after
$('.shape').shape('.third');
Defensive patterns

Strategy: validation

Validate before calling

// Confirm the requested side selector matches a .side child before flipping.
function flipTo($shape, selector){
  if ($shape.find('.side').filter(selector).length === 0) {
    throw new Error('No side matches selector: ' + selector);
  }
  $shape.shape('set next side', selector).shape('flip up');
}

Prevention

When it happens

Trigger: $('.shape').shape('.nope') or flipping to a side selector that matches no element carrying the .side class inside the shape.

Common situations: Typo in the side selector, side elements missing the .side class, sides added dynamically after shape init.

Related errors


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