Cannot read property 'Velocity' of undefined

Question

I've a a problem, on wordpress, on use Velocity js.

Inside function.php i've enqueued the velocity.min.js and velocity.ui.min.js, like this

wp_enqueue_script('velociti-min-js', STYLESHEET_URI . '/assets/js/velocity.min.js', array('jquery'), THEME_VERSION, true);
wp_enqueue_script('velociti-ui-min-js', STYLESHEET_URI . '/assets/js/velocity.ui.min.js', array('jquery'), THEME_VERSION, true);

Then i've enqueued the main.js file with my custom javascript code like this

wp_enqueue_script('main-theme-function', STYLESHEET_URI . '/assets/js/main-theme-function.js', NULL, THEME_VERSION, TRUE);

When i try to register a new Velocity effect, like

$.Velocity
.RegisterEffect("myeffect", {
    defaultDuration: 1,
    calls: [ 
        [ { translateY: '-50%'}, 1]
    ]
});

I get this error on console

Uncaught TypeError: Cannot read property 'Velocity' of undefined

But I can't understand why... can someone help?

Thanks a lot

Answer 1

You should try using jQuery.Velocity instead. Alternatively you can wrap your call in an IIFE which aliases jQuery to $.

(function ($) {
    // $.Velocity...
})(jQuery);

Answer 2

Uncaught TypeError: Cannot read property 'Velocity' of undefined

Means in your case "$" (JQuery) has no value.

Mostly because JQuery isnt added to your side or after the Velocity library. Make sure you load/add Jquery first then Velocity.

But dunno how in wordpress.

Answer 3

It's most likely a load order error. WP loads JS files in a sort of random order unless you add a dependency argument.

You need to add your velocity js files as dependencies to your main.js.

wp_enqueue_script('velociti-min-js', STYLESHEET_URI . '/assets/js/velocity.min.js', array('jquery'), THEME_VERSION, true);
wp_enqueue_script('velociti-ui-min-js', STYLESHEET_URI . '/assets/js/velocity.ui.min.js', array('jquery', 'velocity-min-js'), THEME_VERSION, true);
wp_enqueue_script('main-theme-function', STYLESHEET_URI . '/assets/js/main-theme-function.js', ['velociti-min-js', velociti-ui-min-js'], THEME_VERSION, TRUE);

I replaced NULL in your enqueue with the array ['velociti-min-js', velociti-ui-min-js'] - you use the tags you set for the scripts as the values. That will make sure those files load BEFORE your main js.