RequireJS – How to Load Custom JS and Dependencies

javascriptrequirejstheme

I'm struggling to understand where and how to correctly configure RequireJS to load my custom JS and it's dependencies. What I have below is working but I don't think it's set up correctly.

My theme requirejs-config.js

var config = {
    paths: {
        'myapp': '"js/myapp"',
        'owlcarousel': 'js/vendor/owl.carousel',
    },
    shim: {
        'myapp': {
            deps: ['jquery','owlcarousel']
        },
        'owlcarousel': {
            deps: ['jquery']
        },
    }
};

My custom JS myapp.js

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

    var myCarousel = $(".carousel").owlCarousel();
    console.dir($); 
    console.log(myCarousel);

});

To get myapp.js to output as expected, I have to put the following in one of my template files but if I load it just after the body tag it gives an error, which suggest that my script it not waiting for require resources before it runs and only works by chance if it's loads later.

<script>
    require (['js/sozoapp'], function() {});
</script>

Can anyone explain what I'm missing here?

Best Answer

Can you plz change with above code,

var config = {
    paths: {
        'myapp': 'js/myapp',
        'owlcarousel': 'js/vendor/owl.carousel',
    },
    shim: {

        'owlcarousel': {
            deps: ['jquery']
        },

        'myapp': {
            deps: ['jquery','owlcarousel']
        },
    }
};

Related Solutions

RequireJS Shim Option Not Working – Magento 2

You have to set requirejs-config.js like below,

More details, Refer link, How to Resolve RequireJs error in Magento 2

 var config = {
        paths: {
                'flexslider': 'Vendor_Modulejs/jquery.flexslider-min',
                'picturefill': 'Vendor_Modulejs/picturefill.min',
                'easing': 'Vendor_Modulejs/jquery.easing.1.3',
                'hoverintent': 'Vendor_Modulejs/jquery.hoverIntent',
                'fitvids': 'Vendor_Modulejs/jquery.fitvids',
                'vimeo': 'Vendor_Modulejs/jquery.vimeo.api.min'
        },
        shim: {
                'flexslider': {
                    deps: ['jquery']
                },
                'picturefill': {
                    deps: ['jquery']
                },
                'easing': {
                    deps: ['jquery']
                },
                'hoverintent': {
                    deps: ['jquery']
                },
                'fitvids': {
                    deps: ['jquery']
                },
                'vimeo': {
                    deps: ['jquery']
                }
        }
    };

Use above code and remove var folder and try. Thanks.

Magento 2 – Load Custom JavaScript with RequireJS

See what is below

requirejs-config.js

var config = {
    map: {
        '*': {
            customAdmin: 'Namespace_Modulename/js/customAdmin'
        }
    },
    deps: ["jquery"]
};

or use in phtml:

<script>
require(['jquery', 'Namespace_Modulename/js/customAdmin'],
    function ($) {
        return ...;
    }
);
</script>

or use requirejs-config.js and phtml:

var config = {
    map: {
        '*': {
            customAdmin: 'Namespace_Modulename/js/customAdmin'
        }
    }
};

<script>
require(['jquery', 'customAdmin'],
    function ($) {
        return ...;
    }
);
</script>

Related Topic