Unable to add elastislide js file in magento 2.3

Question

I am trying to add elastislide, for that, I added this code in phtml file

<div class="brand_block">
 <ul id="carousel_<?php echo $chunk2->getId(); ?>" class="elastislide-list"> 
    <?php   
     print($_category->getData('brand_block'));?>
</ul>
<script type="text/javascript">
    require(['jquery','js/jquery.elastislide','js/modernizr.custom.17475'],
    function (jQuery) { 
         jQuery(document).ready(function(){
         jQuery('#carousel_<?php echo $chunk2->getId(); ?>').elastislide(); 
        });
    });

</script>

I've added modernizr.custom.17475.js and jquery.elastislide.js in /app/design/frontend/vendor_name/theme_name/web/js folder

I am getting these errors in console

Uncaught ReferenceError: jQuery is not defined at jquery.elastislide.js:820 (anonymous) @ jquery.elastislide.js:820 (index):296 Uncaught TypeError: jQuery(...).elastislide is not a function

Answer 1

Your js/jquery.elastislide not recognizing jquery means you have not assigned shim that will create your js dependency to jquery in requirejs-config.js

Your code should look like in requirejs-config.js :

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

You javascript function should look like this.

<script>
require([
    "jquery",
    "elastislide",
    "js/modernizr.custom.17475",
    "domReady!"
], function($){
    $('#carousel_<?php echo $chunk2->getId(); ?>').elastislide();
});
</script>

If you running production mode make sure deploy static content and clear cache.

php bin/magento setup:static-content:deploy
php bin/magento cache:clean

If you are in development environment you can just clear cache and changes will update.

php bin/magento cache:clean

Note you should also assign js/modernizr.custom.17475 in requirejs-config.js if its depends on jquery.