Requirejs-config.js not working for parent theme's responsive.js file

Question

I would like to change the values for the media property for the files menu.js & responsive.js from media: '(min-width: 768px)' to media: '(min-width: 992px)'.

I thought using Magento's JS Mixin approach would be best as instead overriding these files entirly, with this approach I should be able to just change the media property.

So I created the requirejs-config.js file in my theme below, but it does't work. It does not load the mixin files from my theme or give any errors in the browser console.

app/design/frontend/Namespace/mytheme/Magento_Theme/requirejs-config.js

"use strict";
var config = {
 config: {
 mixins: {
 'Magento_Theme/js/responsive': {
 'Magento_Theme/js/responsive-mixin': true
 },
 'lib/web/mage/menu': {
 'Magento_Theme/js/menu-mixin': true
 }
 }
 }
};

app/design/frontend/Namespace/mytheme/Magento_Theme/web/js/responsive-mixin.js

define([
 'jquery',
 'matchMedia',
 'mage/tabs',
 'domReady!'
], function (,ドル mediaCheck) {
 'use strict';
 var mixin = {
 media: '(min-width: 992px)'
 };
 return function (target) {
 return target.extend(mixin);
 };
});

I have cleared the cache and remove the static files. i.e.

bin/magento cache:clean
rm -rf pub/static/frontend/ var/view_preprocessed/

I'm not sure what else to do? Is it not possible to write a mixin for these files? Is there another approach I can take. Ideally, I would prefer not to have to overide the files entirely in my theme.

UPDATE

I have noticed if I try to add a mixin for another file it works... i.e.

"use strict";
var config = {
 config: {
 mixins: {
 'Magento_Ui/js/modal/confirm': {
 'Magento_Theme/js/test-mixin': true
 }
 }
 }
};

So is it that JS Mixins do not work for JS files which come from a parent theme or /lib directory?

Also, another way I can change the breakpoint in menu.js is to override the template in my theme and passing "mediaBreakpoint": "(max-width: 992px)" as one of the options

app/design/frontend/Namespace/mytheme/Magento_Theme/templates/html/topmenu.phtml

<?php $columnsLimit = $block->getColumnsLimit() ?: 0; ?>
<?php $_menu = $block->getHtml('level-top', 'submenu', $columnsLimit) ?>
<nav class="navigation" data-action="navigation">
 <ul data-mage-init='{"menu":{"mediaBreakpoint": "(max-width: 992px)", "responsive":true, "expanded":true, "position":{"my":"left top","at":"left bottom"}}}'>
 <?= /* @escapeNotVerified */ $_menu ?>
 <?= /* @escapeNotVerified */ $block->getChildHtml() ?>
 </ul>
</nav>

Answer 1

I found the issue with the mixin for menu.js. It should use mage/menu rather than lib/web/mage/menu'

"use strict";
var config = {
 config: {
 mixins: {
 'mage/menu': {
 'Magento_Theme/js/menu-mixin': true
 }
 }
 }
};

And then in the menu-mixin.js file I have.

define([], function () {
 return function (widget) {
 widget.menu.prototype.options.mediaBreakpoint = "(max-width: 992px)";
 return widget;
 };
});

I'm still having the issue with Magento_Theme/js/responsive though, I think this may be because it is initialised in the deps block of parent theme's (blank) requirejs-config file rather than within a define block or with data-mage-init.