0

I am trying to create a custom menu in Magento 2, but I run into the following browser console error when I add the JavaScript file for it.

main.js:27 Uncaught TypeError: Cannot read property 'bind' of undefined

For a starting point I begin with a copy mage/menu.js, instead of creating a JavaScript Mixin, I chose to copy it as I intend to override a lot of functionality in it and do not wish to change too much of Magento's navigation or menu widgets.

So, I made a copy of mage/menu.js, named it my-menu.js, and call it in my template with:

<script type="text/x-magento-init">
    {
        ".my-menu": {
            "Holly_Menu/js/my-menu": {
                "responsive":true,
                "expanded":true,
                "delay":<?= $block->escapeHtmlAttr($menuDelay) ?>,
                "mediaBreakpoint": "<?= $block->escapeHtml($breakPoint) ?>",
                "position":{
                    "my":"left top",
                    "at":"left bottom"
                }
            }
        }
    }
</script>

Here is the full Holly_Menu/js/my-menu.js file:

define([
    'jquery',
    'matchMedia',
    'jquery-ui-modules/menu',
    'jquery/jquery.mobile.custom',
    'mage/translate'
], function ($, mediaCheck) {
    'use strict';

    /**
     * Menu Widget - this widget is a wrapper for the jQuery UI Menu
     */
    $.widget('holly.megamenu', $.ui.menu, {
        // code removed to not exceed character limit of StackExchange question
        // contents are a copy from the Menu Widget in
        // https://github.com/magento/magento2/blob/2.3/lib/web/mage/menu.js#L18
    });

    $.widget('holly.mmnavigation', $.holly.megamenu, {
        // code removed to not exceed character limit of StackExchange question
        // contents are a direct copy from the Navigation Widget in
        // https://github.com/magento/magento2/blob/2.3/lib/web/mage/menu.js#L665
    });

    return {
        megamenu: $.monsoon.megamenu,
        mmnavigation: $.monsoon.mmnavigation
    };
});

As you can see the only thing which I have changed from mage/menu.js are the namespace and widget names, i.e. holly.megamenu and holly.mmnavigation.

And it produces the following browser console error:

main.js:27 Uncaught TypeError: Cannot read property 'bind' of undefined enter image description here

Any ideas what could be the cause or fix for this?

Thanks!

UPDATE

I also tried creating an alias in my module's requirejs-config.js

var config = {
    map: {
        '*': {
            'hollymenu': 'Holly_Menu/js/my-menu'
        }
    }
};

And calling in template with hollymenu instead, but it does not fix the issue.

0

Figured it out. Is was an issue with naming convention, I did not follow it correctly.

I needed to add the following to my module's requirejs-config.js file.

var config = {
    map: {
        '*': {
            'megamenu': 'Holly_Menu/js/my-menu'
        }
    }
};

And call it in the template with:

<script type="text/x-magento-init">
    {
        ".my-menu": {
            "megamenu": {
                "responsive":true,
                "expanded":true,
                "delay":<?= $block->escapeHtmlAttr($menuDelay) ?>,
                "mediaBreakpoint": "<?= $block->escapeHtml($breakPoint) ?>",
                "position":{
                    "my":"left top",
                    "at":"left bottom"
                }
            }
        }
    }
</script>
| improve this answer | |
0

replace : fn = fn[component].bind(fn); with fn = fn[component] && fn[component].bind(fn); Hope it helps, also can check using try catch.

| improve this answer | |

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.