Magento2 Mixins: How to write a requirejs-config.js?

by where   Last Updated September 11, 2019 21:09 PM

What exactly do I need to add to the requirejs-config.js for adding a mixin?

The Magento documentation has an example for this, but I seem to lack some basic understanding about javascript and frontend development.

var config = {
 config: {
     mixins: {
         'Magento_Ui/js/grid/controls/columns': {
             'OrangeCompany_Sample/js/columns-mixin': true
         "Magento_Ui/js/modal/modal": {
             "OrangeCompany_Sample/js/modal-widget-mixin": true

Why, for example, is it Magento_Ui/js/grid/controls/columns? It seems to refer to the file src/vendor/magento/module-ui/view/base/web/js/grid/controls/columns.js (this is the path with composer).

The text js/grid/controls/columns matches between file name and requirejs. Magento_Ui is the extension name. Does it mean, this is the syntax?

<module name>/<path of file in module>/<filename without extension>

Or is there any other way to determine; another logic? I have the same question for the next line (OrangeCompany_Sample/js/modal-widget-mixin). Same syntax?

Tags : magento2 mixins

Related Questions

magento2 mixins not working

Updated June 14, 2017 10:09 AM

When to use mixin js in magento2?

Updated December 24, 2018 12:09 PM