TypeError: Cannot read property 'nextFrame' of undefined

Olá pessoal,

o código demonstrado no gabarito não funciona.

function createSprite(selector) {

    var $el = $(selector);

    var frames = [
        'frame1', 'frame2', 'frame3', 'frame4', 'frame5',
        'frame6', 'frame7', 'frame8', 'frame9'
    ];

    var current = 0;

    var last = frames.length - 1;

    $el.addClass(frames[current]);

    function nextFrame() {

        $el.removeClass(frames[current])
            .addClass(frames[++current]);
    }
}

Tentei de outras formas antes de consultar o gabarito, mas tive o mesmo erro de TypeError: undefined:

function createSprite(seletor) {

    var elemento = document.querySelector(seletor);


    var frames = ['frame1', 'frame2', 'frame3', 'frame4', 'frame5', 'frame6', 'frame7', 'frame8', 'frame9'];

    var atual = 0;
    var ultimo = frames.length - 1; 

    elemento.classList.add(frames[atual]);

    function nextFrame() {
        elemento.classList.remove(frames[atual]);
        elemento.classList.add(frames[++atual]);
    }
}

E quando fui checar o gabarito para ver onde estava errando, o código também apresenta o mesmo erro. A função createSprite retorna undefined . Porque isso acontece?