I'm following the Magento dev docs Add a new checkout step how to guide. But I get the following error in my browser console once I go to the checkout...

GET http://example.test/checkout/Holy_CheckoutTuts/js/view/my-step-view.js net::ERR_ABORTED    require.js:1895 

[ERROR] Failed to load the "Holy_CheckoutTuts/js/view/my-step-view.js" component.    console-output-handler.js:34

I've declared the component in my modules checkout_index_index.xml...

├── etc
│   └── module.xml
├── composer.json
├── registration.php
└── view
    └── frontend
        ├── layout
        │   └── checkout_index_index.xml
        └── web
            ├── js
            │   └── view
            │       └── my-step-view.js
            └── template
                └── mystep.html


<?xml version="1.0"?>

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="checkout" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
        <referenceBlock name="checkout.root">
                <argument name="jsLayout" xsi:type="array">
                    <item name="components" xsi:type="array">
                        <item name="checkout" xsi:type="array">
                            <item name="children" xsi:type="array">
                                <item name="steps" xsi:type="array">
                                    <item name="children" xsi:type="array">
                                        <!-- The new step you add -->
                                        <!--<item name="my-new-step" xsi:type="array">-->
                                            <!--<item name="component" xsi:type="string">uiComponent</item>-->
                                            <!--<item name="sortOrder" xsi:type="string">2</item>-->
                                            <!--<item name="children" xsi:type="array">-->
                                                <!--<item name="shipping-step" xsi:type="array">-->
                                                    <!--&lt;!&ndash;<item name="component" xsi:type="string">Holy_CheckoutTuts/js/view/my-step-view.js</item>&ndash;&gt;-->
                                                    <!--<item name="sortOrder" xsi:type="string">1</item>-->
                                                    <!--<item name="children" xsi:type="array"></item>-->
                                        <item name="my-new-step" xsi:type="array">
                                            <item name="component" xsi:type="string">Holy_CheckoutTuts/js/view/my-step-view.js</item>
                                            <!--To display step content before shipping step "sortOrder" value should be < 1-->
                                            <!--To display step content between shipping step and payment step  1 < "sortOrder" < 2 -->
                                            <!--To display step content after payment step "sortOrder" > 2 -->
                                            <item name="sortOrder" xsi:type="string">2</item>
                                            <item name="children" xsi:type="array">
                                                <!--add here child component declaration for your step-->

1 Answer 1


Found the issue. I had left the .js extension when I declared the js file to use for my component.

<item name="component" xsi:type="string">Holy_CheckoutTuts/js/view/my-step-view.js</item>

I should of used...

<item name="component" xsi:type="string">Holy_CheckoutTuts/js/view/my-step-view</item>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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