Skip to main content
2 of 5
edited title
Black
  • 3.4k
  • 4
  • 40
  • 123

Magento 2 - Create simple hello world script with UiComponent

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

Component File:

app\design\frontend\company\fresh\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("test");
        }
    });
});

requirejs-config.js:

app\design\frontend\company\fresh\requirejs-config.js

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

Using the new component:

app\design\frontend\company\fresh\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();

    ...

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

Black
  • 3.4k
  • 4
  • 40
  • 123