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.