require-js: shim doesn't seem to work properly, fails with "jQuery is not defined"

Question

Im trying to integrate the popular stellar.js-module into my theme.

I go with the following. In my requirejs-config.js I have:

var config = {
    map: {
            '*': {
                'stellar': 'js/jquery.stellar.min'
            }
        },
        "shim": {
                "stellar": ["jquery"]
            }
};

and I utilize it by doing it this way:

require(['jquery', 'stellar'], function($) {

However, in my console I get this:

Uncaught ReferenceError: jQuery is not defined
    at jquery.stellar.min.js:2

Whats wrong here? The stellar plugin hasn't got modified from me.

Answer 1

Your requirejs-config.js file code like below :

var config = {
    "map": {
        "*": {
            "stellar": "Vendor_Modulename/js/jquery.stellar.min"
        }
    }
};

Make sure your js file location is view/frontend/web/js/jquery.stellar.min.js

and at last load your jquery in the template file(.phtml) like below code :

<script type="text/javascript">

    require(['jquery', 'stellar'],function($){
        (function() {

        })(jQuery);
    });
</script>   

Answer 2

It looks like 'stellar' is dependant on jQuery, try changing to this:

var config = {
  paths:{
    'jquery.stellar':'js/jquery.stellar.min'
  },
  shim:{
    'jquery.stellar':{
        'deps':['jquery']
    }
  }
};