How to correctly import jQuery in SXA?

Question

I could add the library in the theme's script/ folder, but when SXA minifies and uploads the files, it loads my other scripts before it loads the jQuery library (thus breaking the site since it doesn't recognize $).

How do I correctly load jQuery?

Answer 1

With SXA jQuery is already part of the core theme. Its included in the /sitecore/media library/Base Themes/XA API base theme.

You are most likely not using the XA framework to inject dependencies in your custom JavaScript files. You need to make sure that you follow the SXA pattern for creating JS scripts like this:

XA.component.myComponent= (function ($) {

    var api = {};

    api.init = function() {
        // TODO: Add your initialization code here
    }
})(jQuery);

XA.register("myComponent", XA.component.myComponent);

Doing this uses the XA framework to "inject" jQuery as a dependency of your component and also makes sure you don't run into any conflicts with the $ symbol.