Cannot read property 'bind' from copy of mage/menu.js

Question

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

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.

Answer 1

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>

Answer 2

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

Answer 3

The following solution worked for me, on Magento 2.3.6, with a problem on js from a third party theme:

Replace

fn = fn[component].bind(fn);

With

fn = fn[component] && fn[component].bind (fn);