How can I extend a Ui component JavaScript in Magento 2?

Question

I know there is already a topic about this, as well as a documentation, but I just can't get it to work:

How can I extend Ui Components' JavaScript in Magento 2?

I'm trying to extend Magento_Ui/js/form/form (located in vendor/magento/module-ui/view/base/web/js/form/form.js).

So I added requirejs-config.js In my modules' view/base-folder:

var config = {
 map: {
 '*': {
 "Magento_Ui/js/form/form": "Vendor_Module/js/form/form"
 }
 }
};

And in my file base/web/js/form/form.js:

define([
 "Magento_Ui/js/form/form"
], function(FormComponent){
 "use strict";
 /**
 * Rewrite original UI Component:
 */
 return FormComponent.extend({});
});

But for some reason, FormComponent is not the UI Component I'm trying to extends, but undefined.

According to the documentation, this should work, but it doesn't. So what am I missing here?

• Max: Please, describe your task, because I think that you don't need to override core form component. Looks like your component require itself because there is map in require config
• Giel Berkers: @MaxStsepantsevich Well, it's related to my other question: magento.stackexchange.com/questions/154201/… I have dynamically added upload fields and I want to have those submitted as well when I save my form.

Answer 1

This can be accomplished using a requirejs "mixin".

First create Your_Module/view/base/requirejs-config.js with this code:

var config = {
 'config': {
 'mixins': {
 'Magento_Ui/js/form/form': {
 'Your_Module/form-hook': true
 }
 }
 }
};

Now make the file Your_Module/view/base/web/form-hook.js :

define([], function () {
 'use strict';
 return function (Form) {
 return Form.extend({
 initialize: function () {
 this._super();
 console.log('Hello from the mixin!');
 }
 });
 }
});

This example extends the initialize method of the form component.

You can read more about "mixins" here: http://alanstorm.com/the-curious-case-of-magento-2-mixins/

Answer 2

I had a similar problem and I solved it.

Try to find declaration of ui component in code and replace it. For example:

Magento_Checkout: LayoutProcessor.php

private function processPaymentConfiguration(array &$configuration, array $elements)
...
$output[$paymentCode . '-form'] = [
 'component' => 'Vendor_Module/js/view/billing-address',

P.S. Don't use this:

var config = {
 map: {
 '*': {
 "Magento_Ui/js/form/form": "Vendor_Module/js/form/form"
 }
 }
};

Answer 3

The issue seems to be caused by the map in your requirejs-config.js. I follow this method below, mentioned in the DevDocs.

1 - Create your custom Ui Component file

It can be inside one of these folders below, depending on if you're creating a module or theme customization.

Theme: <theme_dir>/web/js or <theme_dir>/<VendorName>_<ModuleName>/web/js

Module: <module_dir>/view/frontend/web/js

2 - Extend the default Ui Component

In your Ui Component, you will have to extend and call the default component, as the code below.

define([
 'Magento_Ui/js/default/component/path/here'
], function(DefaultComponentExample){
 return DefaultComponentExample.extend({
 defaults: { ... }, // properties with default values
 ... // methods of your component
 });
});

• Mark Shust at M.academy: Your component code doesn't work because when you replace "Magento_Ui/js/form/form" with "Vendor_Module/js/form/form" in your map, "Magento_Ui/js/form/form" will reference "Vendor_Module/js/form/form" in your JS component. It's a circular reference.