Magento 2 : Override 'Magento_Checkout/js/view/billing-address.js' with Custom JS

Question

I want to override Magento's Magento_Checkout/js/view/billing-address.js with my custom JS file, for that I have added below code in my requirejs-config.js

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

This works perfectly and I can see my js file overriding magento's default file.

The issue is when I enable JS minify option from admin panel, my JS file does not get loaded and checkout page displays below error.

Failed to load the Magento_Checkout/js/view/billing-address component.

Is there anyway to resolve this issue?

• Nikunj Vadariya: I hope my solution will work for you!
• kunj: Try with the different name like this : var config = { map: { "*": { "Magento_Checkout/js/view/billing-address": "Example_Module/js/view/custom-billing-address" } } };

Answer 1

Solution:

In your modules config.xml file add the following:

Example/Module/etc/config.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Store:etc/config.xsd">
 <default>
 <dev>
 <js>
 <minify_exclude>
 Example_Module/js/view/billing-address.js
 </minify_exclude>
 </js>
 </dev>
 </default>
</config>

rm -rf pub/static/frontend/

php bin/magento setup:static-content:deploy

After doing above steps it is working for me.

• Jaimin Sutariya: Hi, I have tried above code but the issue is the same. I have tried with Magento_Checkout/js/view/billing-address.js and Example_Module/js/view/billing-address.js for above code but none worked.
• Nikunj Vadariya: @JaiminSutariya, I have updated my answer and its working for me. I have tested it in my local.
• Jaimin Sutariya: Thanks Nikunj. I got to override default billing-address.js with my JS but the error is not resolved. There is still the error Failed to load the Magento_Checkout/js/view/billing-address component. and the checkout page keeps loading.
• Chirag Patel: What above code perform an action? it will exclude billing-address.js to minify?
• Chirag Patel: Because I am facing the relevant issue while checkout it will redirect to 404 because i have override this js in my custom module using require.js. if i use your answer code then it is working fine. i just want to know what is the reason?