Magento 2 - Create simple hello world script with uiComponent

Question

I try to create my own Component and reuse it. So I created these files:

THEME = app\design\frontend\company\fresh

Component File:

THEME\web\js\elements\custom\input_number.js

define([
  "jquery",
  "uiComponent"
], 
function($, Component) {
  "use strict";

    return Component.extend({
        
        initialize: function () {
            return this._super();
        },
        
        test: function()
        {
            console.log("Hello world!");
        }
    });
});

requirejs-config.js:

THEME\requirejs-config.js

var config = {
    paths: {
        inputNumber: 'js/elements/custom/input_number'
    },
};

Using the new component:

THEME\Magento_Checkout\web\js\view\minicart.js

I copied the file from vendor into my theme so that I can make changes. Now I try to use my component and call my test method:

define([
    'uiComponent',
    'Magento_Customer/js/customer-data',
    'jquery',
    'ko',
    'underscore',
    'sidebar',
    'mage/translate',
    'mage/dropdown',
    'inputNumber'
], function (Component, customerData, $, ko, _, inputNumber) {
    'use strict';

    inputNumber.test();    // [ERROR] Failed to load the "Magento_Checkout/js/view/minicart" component.`

    ...

---

I also tried to fix the parameter order like Jorge Henrique explained:

define([
    'uiComponent',
    'Magento_Customer/js/customer-data',
    'jquery',
    'ko',
    'underscore',
    'inputNumber',
    'sidebar',
    'mage/translate',
    'mage/dropdown'
], function (Component, customerData, $, ko, _, inputNumber) {
    'use strict';

    inputNumber.test();    // [ERROR] Failed to load the "Magento_Checkout/js/view/minicart" component.`

    ...

But I still get this error in the console [ERROR] Failed to load the "Magento_Checkout/js/view/minicart" component.

---

I also tried to call the method inside of the method initSidebar but then I get Uncaught TypeError: inputNumber.test is not a function

THEME\Magento_Checkout\web\js\view\minicart.js:

define([
    'uiComponent',
    'Magento_Customer/js/customer-data',
    'jquery',
    'ko',
    'underscore',
    'inputNumber',
    'sidebar',
    'mage/translate',
    'mage/dropdown'
], function (Component, customerData, $, ko, _, inputNumber) {
    'use strict';
    
    var sidebarInitialized = false,
        addToCartCalls = 0,
        miniCart;

    miniCart = $("#minicart");

    function initSidebar()
    {
        inputNumber.test();  // Uncaught TypeError: inputNumber.test is not a function

        ...

Answer 1

I figured it out. I had to remove return Component.extend({ and just create a normal javascript object and return it.

define([
  "uiComponent",    // <-- uiComponent has to get called first!!! Otherwise you get `[ERROR] Failed to load the "Magento_Checkout/js/view/minicart" component.`
  "jquery"
], 
function(Component, $) {
  "use strict";

    data = {
        test: function() {
            console.log("Hello World!");
        },
    };

//
// ↓↓↓ Important ↓↓↓ 
// Code like this is not allowed if you plan to use the method like in my example, otherwise you get "[ERROR] Failed to load the "Magento_Checkout/js/view/minicart" component."
// You have to put your methods into the data object.
//
//  $(".number-input button.minus").click(function() {
//
//      let $input = $(this).parent().find("input[type=number].quantity");
//      
//      // Step Down
//      $($input)[0].stepDown();
//
//      // Set Width according to input length
//      setWidth($input);
//  });
    
    return data;
});

Hint: uiComponent is needed, even if we do nothing with it here, otherwise it won't work!

Next I had to fix the parameter order, like @Jorge Henrique pointed out correctly:

define([
    'uiComponent',
    'Magento_Customer/js/customer-data',
    'jquery',
    'ko',
    'underscore',
    'inputNumber',
    'sidebar',
    'mage/translate',
    'mage/dropdown',
], function (Component, customerData, $, ko, _, inputNumber) {
    'use strict';

    inputNumber.test();    // Hello World!

    ...

Answer 2

That is because the order of the arguments you are passing to define is wrong.

Try the following:

define([
    'uiComponent',
    'Magento_Customer/js/customer-data',
    'jquery',
    'ko',
    'underscore',
    'inputNumber', // HERE
    'sidebar',
    'mage/translate',
    'mage/dropdown'
], function (Component, customerData, $, ko, _, inputNumber) {
    'use strict';

    inputNumber.test();

    ...

Note that I have changed the inputNumber to after the underscore, as the same order that we are passing in the function.