Constr is not a constructor on layout.js line 137 error custom module

Question

I have gone through this posts and tried to implement the answers and suggestions

Magento2 getting 'Constr is not a constructor' error for custom theme && Error in layout.js, cart not loading && No Way to Clear/delete a Selected Image using Media Browser on category edit page

But I am not able to resolve this issue .

Here is what I have done -> I am trying to reuse module-checkout/view/frontend/web/js/view/billing-address.js file in my custom module, Here is what I have done so far

This is my registration.js file

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Rahul_Learning',
    __DIR__
);

This is Rahul/Learning/etc/module.xml file

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Rahul_Learning" setup_version="0.0.1"/>
</config>

This is Rahul/Learning/view/frontend/requirejs-config.js

var config = {
    config: {
        mixins: {
            'Magento_Checkout/js/view/billing-address': {
                'Rahul_Learning/js/view/billing-address': true
            }
        }
    }
};

and at location Rahul/Learning/view/frontend/web/js/view I have copy pasted module-checkout/view/frontend/web/js/view/billing-address.js file without any changes but I am getting this error on checkout page

Looking forward for your suggestions not sure what I am doing wrong here.

Thanks

Answer 1

You should avoid the copy-paste technique as much as possible.

In your requirejs-config.js you are declaring that you would like to apply mixins to Magento_Checkout/js/view/billing-address with Rahul_Learning/js/view/billing-address.

The original component, i.e. Magento_Checkout/js/view/billing-address when applying mixins, is referred to as the target, and inside the component that does the override of the target, you will ALWAYS get A REFERENCE TO THE TARGET.

The code then, in your .js file should be like

define([], function(){

    'use strict';

    return function(originalBillingAddress){
        return originalBillingAddress.extend({
            //YOUR NEW CODE GOES HERE
        });
    };
});

So, in this example the variable originalBillingAddress would be the original object that comes from Magento_Checkout/js/view/billing-address and you return AN EXTENSION of it by using the .extend function.

I have left the define([], function(){ as empty, but, as by default RequireJS functionality, you can pass any dependencies here that you like, for example

define(['jquery'], function($){

this way you load jQuery and refer to it later as $.

I hope this helps.

Answer 2

I am not sure whether this is the correct answer or not but this fix the issue hope it will help someone so I am posting here .

Made changes to requirejs-config.js and the error I was facing is gone.

var config = {
    "map": {
        "*": {
            "Magento_Checkout/js/view/billing-address":"Rahul_Learning/js/view/billing-address"
        }
    }
};