3

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

enter image description here

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

Thanks

3

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.

  • Thank you so much , This seems to be the correct and better solution . – Rahul Makwana Sep 20 '18 at 9:01
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"
        }
    }
};

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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