Erros when i tried to include js libraries via requirejs

I tried to include some js libraries like bootstrap, jQuery.ui etc... via requirejs method but, I encountered some errors

Here is the console errors :

Error: Script error for: jquery/jquery-storageapi

http://requirejs.org/docs/errors.html#scripterror

Error: Load timeout for modules: jquery.bootstrap

http://requirejs.org/docs/errors.html#timeout

Error: Script error for: jquery.bootstrap

Nb: for the Error: Script error for: jquery/jquery-storageapierror refer to the line require.js:166:17 and this line 166 is:

/**
     * Constructs an error with a pointer to an URL with more information.
     * @param {String} id the error ID that maps to an ID on a web page.
     * @param {String} message human readable error.
     * @param {Error} [err] the original error, if there is one.
     *
     * @returns {Error}
     */
    function makeError(id, msg, err, requireModules) {
        var e = new Error(msg + '\nhttp://requirejs.org/docs/errors.html#' + id);
        e.requireType = id;
        e.requireModules = requireModules;
        if (err) {
            e.originalError = err;
        }
        return e;
    }

    if (typeof define !== 'undefined') {
        //If a define is already in play via another AMD loader,
        //do not overwrite.
        return;
    }

    if (typeof requirejs !== 'undefined') {
        if (isFunction(requirejs)) {
            //Do not overwrite and existing requirejs instance.
            return;
        }
        cfg = requirejs;
        requirejs = undefined;
    }

My requirejs-config.js :

var config = {
    paths: {
        "jquery.bootstrap": "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min",
        "jquery.3": "https://code.jquery.com/jquery-3.3.1.min",
        "jquery.ui": "https://code.jquery.com/ui/1.12.1/jquery-ui.min"
    },
    shim: {
        'jquery.bootstrap': {
            'deps': ['jquery']
        },
        'jquery.3': {
            'deps': ['jquery']
        },
        'jquery.ui': {
            'deps': ['jquery']
        }
    }
};

Then I call my fonction like this exemple :

<script type="text/javascript">
    requirejs(['jquery', 'jquery.3'], function (jQuery, jQuery3) {
        jQuery(function ($) {
            $('.js-toggle-menu').click(function(e){
            e.preventDefault();
            $('.mobile-header-nav').slideToggle();
            $(this).toggleClass('open');
            });
        });
    });
</script>

Screenshot

Thanks for your help.

Solution

Your configuration does not make any sense and indeed it should not work. In paths you have this association

"jquery.3": "https://code.jquery.com/jquery-3.3.1.min",

And then in your shim you have:

'jquery.3': {
  'deps': ['jquery']
},

That makes no sense at all. The file you get from https://code.jquery.com/jquery-3.3.1.min is jQuery, but you are setting a shim that says that jQuery is dependent on... jQuery. What??

At a minimum, you'd need to fix that problem, and use something like this:

var config = {
    paths: {
        "jquery.bootstrap": "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min",
        "jquery": "https://code.jquery.com/jquery-3.3.1.min",
        "jquery.ui": "https://code.jquery.com/ui/1.12.1/jquery-ui.min"
    },
    shim: {
        'jquery.ui': {
            'deps': ['jquery']
        }
    }
};

Besides fixing the configuration for jQuery, I've also removed the shim for Bootstrap. Bootstrap 3 required a shim. Bootstrap 4 detects whether an AMD loader is present and calls define to register itself as a proper module.

Note that you'll also need to download popper and make it available to RequireJS so that Bootstrap can work because Bootstrap 4 lists it among its dependencies. If you run into issues getting popper to work, please search this site because it's been discussed quite a bit already.

I would also call Boostrap bootstrap rather than jquery.bootstrap but that's a matter of preference more than anything.