Magento 2 - mage/url is not working in module. Uncaught ReferenceError: url is not defined

Question

I am running the Magento 2 on the localhost server. http://127.0.0.1/magento3 here I've built a custom module for payment gateway. In custom JS I want to use the mage/url.
I need to use ajax for the checkout process. Below is the code where I want to get use url.build.

But I get,

Uncaught ReferenceError: url is not defined in the console for console.log(url.build) ;

Also, I've got a function method where I want to use the ajax in Custom JS file at PATH app\code\vendor_name\module_name\view\frontend\web\js

       "IOST",
       "jquery",
       "mage/url"], function ($,url) {
       console.log(url);
   });
   function transfer () {
       console.log(url.build);
   }

Button at this path with which i used to call the transfer() method. app\code\vendor_name\module_name\view\frontend\web\template\payment CODE

                     <span data-bind="i18n: 'Pay By IostPay'"></span> 
</button> 

FILE:- requirejs-config.js CODE:-

    map: {
        '*': {
            lazyloadScript:'vendorname_modulename/js/custom_func'
        }
    }
};```


Does anyone know how to do it?

Thanks in advance.

Answer 1

Please use below code in your JS file

require([
    "IOST",
    "jquery",
    "mage/url"
], function( iost, $, url ){

    console.log(url) ;
}); 
function transfer(){
    console.log(url.build) ;
}

OR you can use below code for your JS

require(
    ['uiComponent', 'jquery', 'mage/url', 'Iostpay_Iostpaymagento::js/iost.min'],
    function (uiComponent, $, url, iost) {
        "use strict";
        return uiComponent.extend({
            initialize: function () {
                this._super();
                console.log(url);
            },

            transfer: function(){
                console.log(url.build) ;
            }
        });
    }
);

After changing this you need to run below commands

php bin/magento setup:upgrade
php bin/magento cache:clean
php bin/magento cache:flush

You can follow this JS to understand how you can build URLs with the use of urlBuilder and how to use mage/url in your knockout JS.

vendor/magento/module-gift-message/view/frontend/web/js/action/gift-options.js

Hope this will work for you!

Answer 2

Use below code because you are using url variable out of the scope of the define and one more thing if you have created custom payment method then you have to use uiComponent to extended the template you can check in this path.

vendor/magento/module-offline-payments/view/frontend/web/js/view/payment/method-renderer/checkmo-method.js

define([
    "IOST",
    "jquery",
    "mage/url"
], function(iost, $, url) {
    function transfer() {
        console.log(url.build);
    }

});

OR As I mention above using uiComponent you can use below code also.

define(
[
    'Magento_Checkout/js/view/payment/default',
    'jquery',
    'mage/url'
],
function(Component, $, url) {
    'use strict';
    return Component.extend({
        transfer: function() {
            console.log(url.build);
        },
    });
});

Hope it will help you.