javascript - RequireJS does not load dependencies consistently -

i tasked implement requirejs architecture in existing project. project single page app, though has page order form. after documentation lurking , experimentation able ball rolling.

but happines faded, realised not work expected. when page reloaded works , other times throws error:

uncaught typeerror: $beforeafter.beforeafter not function

i wrote config file (also 'data-main' entry point in html script tag) follows:

config.js:

// requirejs configuration, see http://requirejs.org/docs/api.html#config require.config({   // todo: set right path , clean '../../' nonsense   baseurl: '',   paths: {     // vendor javascript     jquery: "../../node_modules/jquery/dist/jquery",     jqueryui: "../../src/vendor/jquery-ui/jquery-ui",     bootstrap: "../../node_modules/bootstrap/dist/js/bootstrap",     jquerycookie: "../../node_modules/jquery.cookie/jquery.cookie",     owlcarousel: "../../node_modules/owl.carousel/dist/owl.carousel",     jquerybrowser: "../../node_modules/jquery.browser/dist/jquery.browser",     beforeafter: "../../src/vendor/before-after/jquery.beforeafter-1.4",     upload: "../../src/vendor/requirejs-upload/upload",     touchpunch: "../../src/vendor/touch-punch/jquery.ui.touch-punch",     // our custom modules     main: "../../src/js/modules/main",     gallery: "../../src/js/modules/gallery",     form: "../../src/js/modules/form"   },   shim: {     "jqueryui": {       exports: "ui",       deps: ["jquery"]      },     "bootstrap": {       deps: ["jquery"]     },     "owlcarousel": {       deps: ["jquery"]     },     "beforeafter": {       deps: ["jquery", "jqueryui"]     },     "touchpunch": {       deps: ["jquery", "jqueryui"]     }   } });  // start application require(['main']); 

i think error has amd non-compatible scripts (beforeafter) , shim settings, have way used require() , define() therefore i'm including rest of structure:

modules/main.js:

define(['jquery', 'jquerycookie', 'bootstrap', 'touchpunch', 'gallery',  'form', 'owlcarousel'], function ($, jquerycookie, bootstrap, touchpunch, gallery, form, owlcarousel) {    var menuitems = undefined;   // + lot of other variables    function setusersdevicewidth() {     // code , lot of other functions after 1   }    function resizecarousel() {     // use custom module (gallery.js) , works     gallery.resizecarousel($this);   }    // file holds , executes jquery .ready function   $(document).ready(function(){      // use model again, it's working      gallery.initializecarousel();      // + lot of other code   }); }); 

and module throws error:

modules/gallery.js

define(['jquery', 'touchpunch', 'owlcarousel', 'beforeafter'], function ($, touchpunch, owlcarousel, beforeafter) {     var carousel = $('#carousel');    // function initialisation in main.js, part of return object   var initializecarousel = function() {      // 'owlcarousel' modules 'owlcarousel()' function works should      carousel.owlcarousel(options);      // initialises beforeafter, problem occurs      initializebeforeafter($item);   });    var initializebeforeafter = function($item) {     // once!     if (!$item.hasclass('already-done')) {       // initalize beforeafter plugin       var $beforeafter = $item.find('.before-after');       // root of problem; cannot refer beforeafter() function        // of 'beforeafter' module, loading sequence gets messed up?       $beforeafter.beforeafter({         showfulllinks: false,         imagepath: 'dist/images/before-after/'       });        resizebeforeafter($item);        $beforeafter.mousemove(function(e) {         var $this = $(this);         var $thishandle = $($this.find('.ui-draggable-handle'));         var $thisfirst_wrapper = $($beforeafter.find(           '> div:not(".ui-draggable-handle")')[0]);          var mousex = e.pagex - $(this).offset().left;          $thishandle.stop().animate({'left': mousex - 2}, 0, 'linear');         $thisfirst_wrapper.stop().animate({'width': mousex - 2}, 0, 'linear');       });        $item.addclass('already-done');     }   }    return {     initializecarousel: initializecarousel,     resizecarousel: resizebeforeafter   }; }); 

i appreciate help, ask advice regarding require() , define() usage in project. should apply different calling structure? i've read lot on subject, can learn live case examples :(

so, i've managed solve problem forcing requirejs load questionable modules before else. i've changed config.js part

// start application require(['main']); 

with

// start application, make sure loaded require(['beforeafter', 'owlcarousel'], function() {   require(['main']); }); 

i wait till monday better solution, if willing show smoother approach , short explanation why inconsistency happening.