0

I am trying to add a jquery script to my site. I have updated the require-config so it has this-

var config = {
paths: {
    slick: 'js/slick.min',
    slaask: 'js/customscript',
    menu: 'js/menu.js'
},
shim: {
    slick: {
        deps: ['jquery']
    },
    menu: {
        deps: ['jquery']
    }
}
};

The script looks like this-

require(['jquery'], function($) {
$(document).ready(function () {
    // Collapsible Menu
    function accordion(trigger) {
        //variables
        var $button = $(trigger);//trigger firing the event
        //visible = true;//flag for wayfinding

        $button.hover().css({'cursor': 'pointer'});

        //event
        $button.click(function () {

            //conditional check
            if ($(this).find('.panel-content').css('display') == 'none') {
                $button.removeClass('active');
                $('.panel-title .icon').html('⊕');


                $(this).next().slideUp('slow', function () {
                    $(this).addClass('visuallyhidden').slideDown(0);
                    $('.panel-content').attr('aria-expanded', 'false');
                });

            } else {
                if ($(this).hasClass('active')) {
                    $('.panel-title.active .icon').html('⊕');
                    $('.panel-title.active').next().slideUp('slow');
                    $('.panel-title.active + .panel-content').attr('aria-expanded', 'false');
                    $('.panel-title.active').removeClass('active');
                }
                else {
                    $('.panel-title.active .icon').html('⊕');
                    $('.panel-title.active').next().slideUp('slow');
                    $('.panel-title.active + .panel-content').attr('aria-expanded', 'false');
                    $('.panel-title.active').removeClass('active');

                    $button.addClass('active');
                    $('.panel-title.active .icon').html('⊗');

                    $(this).next().slideUp(0, function () {
                        $('.panel-content').attr('aria-expanded', 'true');
                        $(this).removeClass('visuallyhidden').slideDown('slow');
                    });
                }
            }

            //flag dude

            return false
        });
    }

    //call to widget trigger1
    accordion('#trigger1');
    //call to widget trigger2
    accordion('#trigger2');
    //call to widget trigger3
    accordion('#trigger3');

});//end document.ready()
});

The error I am getting is-

Uncaught TypeError: require is not a function at menu.js:1

Why am I getting that error?

  • Change js/menu.js in paths to js/menu and redeploy should fix your error – Dava Gordon Jun 10 '19 at 17:50
  • Also in your require statement set require(['jquery', 'menu'], function($) { – Dava Gordon Jun 10 '19 at 17:52
  • OK if that didn't work it may be that the menu.js is requiring a file within it which it is unable to use can u post the content of menu.js had similar issue the other day with menu-js library – Dava Gordon Jun 10 '19 at 18:11
0
var config = {
paths: {
    slick: 'js/slick.min',
    slaask: 'js/customscript',
    menu: 'js/menu'
},
shim: {
    slick: {
        deps: ['jquery']
    },
    menu: {
        deps: ['jquery']
    }
}
};

The script looks like this-

require(['jquery', 'menu'], function($) {
$(document).ready(function () {
    // Collapsible Menu
    function accordion(trigger) {
        //variables
        var $button = $(trigger);//trigger firing the event
        //visible = true;//flag for wayfinding

        $button.hover().css({'cursor': 'pointer'});

        //event
        $button.click(function () {

            //conditional check
            if ($(this).find('.panel-content').css('display') == 'none') {
                $button.removeClass('active');
                $('.panel-title .icon').html('⊕');


                $(this).next().slideUp('slow', function () {
                    $(this).addClass('visuallyhidden').slideDown(0);
                    $('.panel-content').attr('aria-expanded', 'false');
                });

            } else {
                if ($(this).hasClass('active')) {
                    $('.panel-title.active .icon').html('⊕');
                    $('.panel-title.active').next().slideUp('slow');
                    $('.panel-title.active + .panel-content').attr('aria-expanded', 'false');
                    $('.panel-title.active').removeClass('active');
                }
                else {
                    $('.panel-title.active .icon').html('⊕');
                    $('.panel-title.active').next().slideUp('slow');
                    $('.panel-title.active + .panel-content').attr('aria-expanded', 'false');
                    $('.panel-title.active').removeClass('active');

                    $button.addClass('active');
                    $('.panel-title.active .icon').html('⊗');

                    $(this).next().slideUp(0, function () {
                        $('.panel-content').attr('aria-expanded', 'true');
                        $(this).removeClass('visuallyhidden').slideDown('slow');
                    });
                }
            }

            //flag dude

            return false
        });
    }

    //call to widget trigger1
    accordion('#trigger1');
    //call to widget trigger2
    accordion('#trigger2');
    //call to widget trigger3
    accordion('#trigger3');

});//end document.ready()
});

Redeploy and should work for you

| improve this answer | |
  • Still getting the exact same error. I did a full static content deploy and can see the new code- require(['jquery','menu'], function($) and I made the change into the require file. I made sure I could see both changes on the front end and I am still getting the same thing. – tjjen Jun 10 '19 at 18:05
0

Please add the require-config.js and write down the js as below

var config = {
            paths: {
                'slick': 'Vendor_Module/slick.min',
                'slaask': 'Vendor_Module/customscript',
                'menu': 'Vendor_Module/menu.js'
            },
            shim: {
                'slick': {
                    deps: ['jquery']
                },
                'slaask': {
                    deps: ['jquery']
                },
                'menu': {
                    deps: ['jquery']
                }
        }
    };
  1. and if u want to use this js into your require js than just using below method you can just pass the jQuery dependency into the require js like below in your phtml file

    require(['jquery', 'domReady!', 'slick', 'slaask', 'menu'], function($) { "use strict";

    // javascript here
    

    });

| improve this answer | |
  • This looks like you added a Slaask change. That is working just fine. Why would I change that? – tjjen Jun 10 '19 at 18:05
  • you have to add the jquery dependency using the shim in require-config.js and you do not a dependency for slaask js – Rasik Miyani Jun 10 '19 at 18:12
  • But Slaask is working fine. I just need help with the menu. – tjjen Jun 10 '19 at 19:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.