Require JS loading jQuery plugins in the wrong order

543 views Asked by At

I'm using require to load in a number of files, including the jQuery plugin Slick Carousel and a separate plugin that adds a lightbox to the carousel. The carousel and lightbox both load correctly and work about 10% of the time. About 90% of the time, the carousel loads and works fine, but I get this error when I try to call the lightbox:

    Uncaught TypeError: $(...).slickLightbox is not a function

And that's it. It looks to me like require is somehow loading the lightbox out of order, but I can't imagine why. Here is my code:

    var myRequire = require.config({

baseUrl: './',
appDir: './',
context: 'mypost',
shim: {

    slick:{
        deps: ['jquery'],
        exports: 'slick'
    },
    slickLightbox:{
         deps: ['slick','jquery'],
        exports: 'slickLightbox'
    }
},
paths: {
    jquery: myPost.url.assets + 'js/lib/jquery.min',
    jqueryMigrate: 'http://code.jquery.com/jquery-migrate-1.2.1.min',
    slick: myPost.url.assets + 'js/lib/slick.min',
    slickLightbox: myPost.url.assets + 'js/lib/slick-lightbox',
    TimelineMax: myPost.url.assets + 'js/lib/TimelineMax',
    TweenMax: myPost.url.assets + 'js/lib/TweenMax.min',
    ScrollMagic: myPost.url.assets + 'js/lib/jquery.scrollmagic'
}
    });

    myRequire(['jquery','slick','slickLightbox','TweenMax', 'TimelineMax', 'ScrollMagic'], function ($, slick,slickLightbox,TweenMax, TimelineMax, ScrollMagic) {
'use strict';
1

There are 1 answers

0
Brent On

After a few attempt this bellow will fix your code above.

    'slick': {
        deps: ['jquery'],
        exports: 'jQuery.fn.slick'
    },
    slickLightbox:{
        deps: ['slick','jquery'],
        exports: 'jQuery.fn.slickLightbox'
    },