What is JavaScript Override in Magento 2?

In Magento 2, JavaScript files can be overridden using RequireJS configuration. This allows developers to replace or modify core JavaScript functionality without editing core files.

Magento uses RequireJS for loading JavaScript modules. By configuring requirejs-config.js, developers can map a core JS module to a custom JS file.

Why Override JavaScript Files?

• Customize core frontend functionality.
• Modify checkout behavior.
• Fix issues without editing core files.
• Extend existing JavaScript modules.

Step 1: Create requirejs-config.js

Create the RequireJS configuration file in your custom module.

(File: app/code/VendorName/ModuleName/view/frontend/requirejs-config.js)

This configuration tells Magento to replace the core shipping JavaScript file with the custom module file.

Step 2: Create Custom JavaScript File

(File: app/code/VendorName/ModuleName/view/frontend/web/js/view/shipping.js)

This custom file overrides the original Magento checkout shipping JS component.

Step 3: Deploy Static Content

After creating the override, run the following commands:

Alternative Method: Using Mixins (Recommended)

Instead of fully overriding the JS file, Magento recommends using mixins to extend existing functionality.

(requirejs-config.js)

Mixin File Example

(File: view/frontend/web/js/shipping-mixin.js)

Override vs Mixin

Best Practices

• Use JS mixins whenever possible.
• Avoid overriding core JS files completely.
• Follow Magento module structure.
• Always clear cache after JS changes.
• Test checkout functionality carefully.