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

The Magento documentation has an example of this, but I seem to lack some basic understanding of 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?

My specific case seems to have an additional hurdle: Most of the extensions are installed via composer and therefore in the vendor directory. But a handful of the 3rd party extensions is not able to use composer and therefore lives in app/code/<3rdparty>. Playing around with the paths in the requirejs-config.js file, I am able to address javascript files in the vendor folder, but not those in the app/code/... folder.

1 Answer 1


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

  1. In theme - app/design/frontend/Vendor/theme/requirejs-config.js
  2. In module - app/code/Vendor/Module/view/frontend/requirejs-config.js

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.