How to overwrite a payment method js renderer component?

Question

Resolved: Seems the error has been caused by the requirejs and my lobster hands :) I rewrite a default Component and trying to extend it inside own component which rewrites a default component: recursion.

Note: I know about this answer and it is good, but my question is about JS error when overwriting a renderer using my way.

I've created a map for standard Magento offline payment method renderer:

app/code/MageWorx/Checkout/view/frontend/requirejs-config.js

var config = {
    map: {
        '*': {
            'Magento_OfflinePayments/js/view/payment/method-renderer/purchaseorder-method':
                'MageWorx_Checkout/js/view/payment/method-renderer/purchaseorder-method'
        }
    }
};

and here the my component in where I want to change a regular (default) template of this payment method:

define([
    'Magento_OfflinePayments/js/view/payment/method-renderer/purchaseorder-method',
    'jquery',
    'mage/validation'
], function (Component, $) {
    'use strict';

    return Component.extend({
        defaults: {
            template: 'MageWorx_Checkout/payment-method/renderer/purchaseorder-form'
        }
    });
});

Seems good, but... It does not work, because of error:

"TypeError: Cannot read property 'extend' of undefined at http://1001101010.com/pub/static/frontend/Magento/blank/en_US/MageWorx_Checkout/js/view/payment/method-renderer/purchaseorder-method.js:12:22 at Object.execCb (http://1001101010.com/pub/static/frontend/Magento/blank/en_US/requirejs/require.js:1650:33) at Object.context.execCb (http://1001101010.com/pub/static/frontend/Magento/blank/en_US/mage/requirejs/resolver.js:145:31) at Module.check (http://1001101010.com/pub/static/frontend/Magento/blank/en_US/requirejs/require.js:861:55) at http://1001101010.com/pub/static/frontend/Magento/blank/en_US/requirejs/require.js:616:33 at each (http://1001101010.com/pub/static/frontend/Magento/blank/en_US/requirejs/require.js:57:31) at breakCycle (http://1001101010.com/pub/static/frontend/Magento/blank/en_US/requirejs/require.js:605:17) at http://1001101010.com/pub/static/frontend/Magento/blank/en_US/requirejs/require.js:618:29 at each (http://1001101010.com/pub/static/frontend/Magento/blank/en_US/requirejs/require.js:57:31) at breakCycle (http://1001101010.com/pub/static/frontend/Magento/blank/en_US/requirejs/require.js:605:17)"

But if I change my component next way (total copy with changed template) it start working without any error:

define([
    'Magento_Checkout/js/view/payment/default', //'Magento_OfflinePayments/js/view/payment/method-renderer/purchaseorder-method',
    'jquery',
    'mage/validation' ], function (Component, $) {
    'use strict';

    return Component.extend({
        defaults: {
            template: 'MageWorx_Checkout/payment-method/renderer/purchaseorder-form',
            purchaseOrderNumber: ''
        },

        /** @inheritdoc */
        initObservable: function () {
            this._super()
                .observe('purchaseOrderNumber');

            return this;
        },

        /**
         * @return {Object}
         */
        getData: function () {
            return {
                method: this.item.method,
                'po_number': this.purchaseOrderNumber(),
                'additional_data': null
            };
        },

        /**
         * @return {jQuery}
         */
        validate: function () {
            var form = 'form[data-role=purchaseorder-form]';

            return $(form).validation() && $(form).validation('isValid');
        }
    });
});

Where is error?

Answer 1

Working code:

Create a mixin for the default payment method view:

app/code/MageWorx/Checkout/view/frontend/requirejs-config.js

var config = {
    config: {
        mixins: {
            'Magento_OfflinePayments/js/view/payment/method-renderer/purchaseorder-method': {
                'MageWorx_Checkout/js/view/payment/method-renderer/purchaseorder-method-mixin': true
            }
        }
    }
};

app/code/MageWorx/Checkout/view/frontend/web/js/view/payment/method-renderer/purchaseorder-method-mixin.js

define([], function () {
    'use strict';

    return function (origComponent) {
        return origComponent.extend({
            defaults: {
                template: 'MageWorx_Checkout/payment-method/renderer/purchaseorder-form'
            }
        });
    };
});

And create a template with own content, based on the original template:

app/code/MageWorx/Checkout/view/frontend/web/template/payment-method/renderer/purchaseorder-form.html