Defer Javascript Load Order

Question

I have a wordpress i which I have various scripts.

I have enqueued my jquery and jquery-ui in the header

wp_enqueue_script('jquery', 'https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js', null, null, false);
wp_enqueue_script('jquery-ui', 'https://code.jquery.com/ui/1.10.0/jquery-ui.min.js', null, null, false);

Followed by my scripts

wp_enqueue_script('scripts', 'https://eg1234.cloudfront.net/wp-content/scripts/scripts.js', ['jquery','jquery-ui'], '', true);

I also have defer scripts function which adds defer="defer" onload src="..." to all my scripts

However I am getting an error Uncaught TypeError: $(...).accordion is not a function this is in my scripts file and depends on jquery-ui, I believe the defer script is loading the jquery-ui after?

Any help?

Answer 1

Have you wrapped your JavaScript calls in

$(function() {
    console.log( "ready!" );
});

http://learn.jquery.com/using-jquery-core/document-ready/

Answer 2

Need to set jQuery as dependency for jQuery UI. The loading order for plugins like jQuery UI is important that jQuery loads first

wp_enqueue_script('jquery-ui', 'https://code.jquery.com/ui/1.10.0/jquery-ui.min.js', ['jquery']);

Also make sure only one version of jQuery is being loaded in the page. if another version gets loaded after jQuery UI it will be lost