Custom script is loaded before javascript libraries sometimes

Question

This is my requirejs-config.js in theme folder

var config = {
    deps: [
        "js/main",
    ],
    map: {
        '*': {
            'flexslider': 'js/jquery.flexslider-min',
            'typing': 'js/typed.min',
            'fancybox': 'js/jquery.fancybox'
        }
    },
    shim: {
        "flexslider": ["jquery"],
        "fancybox": ["jquery"],
        "typing": ["jquery"]
    }
};

And this is my main.js file in themfolder/web/js

define([
  "jquery",
  "flexslider",
  "typing",
  "fancybox"
], 
function($,flexslider) {
    "use strict";
    $('.normalslider').flexslider({
        animation: "slide",
        initDelay:200,
    }); 
    $('.carousel').flexslider({
        animation: "slide",
        animationLoop: false,
        initDelay:200,
        itemWidth: 150, 
        itemMargin: 5       
    });
    $(".lightbox").fancybox({
        maxWidth    : 800,
        maxHeight   : 600,
        fitToView   : false,
        width       : '90%',
        height      : '90%',
        autoSize    : false,
        closeClick  : false,
        openEffect  : 'none',
        closeEffect : 'none'
    });
    return;
});

However, sometimes the script is loaded correctly and sometimes I got this error message

ReferenceError: jQuery is not defined[Learn More]  jquery.fancybox.js:46:1    
TypeError: $(...).fancybox is not a function[Learn More]  main.js:128:2

Especially on the product catalogue page, it always give me that error message. My Magento is still in developer mode and all cache have been disabled.

If anyone know how to fix the issue, please help me. Thank you very much.

Answer 1

Use like that:

requirejs-config.js

var config = {
    deps: [
        "js/main",
    ],
    paths: {
        'flexslider': 'js/jquery.flexslider-min',
        'typing': 'js/typed.min',
        'fancybox': 'js/jquery.fancybox'
    },
    shim: {
        'flexslider': {
              deps: ['jquery'],
              exports: 'jQuery.fn.flexslider',
            },
        'fancybox': {
              deps: ['jquery'],
              exports: 'jQuery.fn.fancybox',
            },
        'typing': {
              deps: ['jquery'],
              exports: 'jQuery.fn.typing',
            }
    }
};

main.js

define([
  "jquery",
  "flexslider",
  "typing",
  "fancybox"
], 
function($) {
    $('.normalslider').flexslider({
        animation: "slide",
        initDelay:200,
    }); 
    $('.carousel').flexslider({
        animation: "slide",
        animationLoop: false,
        initDelay:200,
        itemWidth: 150, 
        itemMargin: 5       
    });
    $(".lightbox").fancybox({
        maxWidth    : 800,
        maxHeight   : 600,
        fitToView   : false,
        width       : '90%',
        height      : '90%',
        autoSize    : false,
        closeClick  : false,
        openEffect  : 'none',
        closeEffect : 'none'
    });
});