Skip to content

Magento 2: Custom component fails to load when implementing Magento_Checkout/js/model/totals

I have created a custom Knockout-Component that so far does not do anything. It is just the basic skeleton but it already fails to load.

Template:

<div class="my-module" data-bind="scope:'my-module'">
    <!-- ko template: getTemplate() --><!-- /ko -->
</div>
<script type="text/x-magento-init">
{
    "*": {
        "Magento_Ui/js/core/app": {
            "components": {
                "my-module": {
                    "component": "My_Module/js/my-module"
                }
            }
        }
    }
}
</script>

js component:

define([
    'jquery',
    'uiComponent',
    'ko',
    'Magento_Customer/js/customer-data',
    'Magento_Checkout/js/model/totals'
    ], function ($, Component, ko, customerData, totals) {

        'use strict';

        let cartData = customerData.get('cart');

        return Component.extend({
            defaults: {
                template: 'My_Module/my-module-template'
            },

            initialize: function () {
                this._super();
            }
        });
    }
);

But the component won’t load (browser console error):

Failed to load the "My_Module/js/my-module" component.

After banging my head over this I tried to strip this down even more. So once I removed 'Magento_Checkout/js/model/totals' my component loads fine.

I am totally lost about this. The totals component totally exists but just does not work for me. I see it being implemented the same way in several other core components. I don’t see what I am doing wrong here.

Would there be another way to get the current cart’s totals ANYwhere in the shop (not only in cart or checkout)?

Thank you