function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Jap Hendy WijayaJap Hendy Wijaya 

LWC 3rd party library, how to know the function name ?

Hi All, 

So i've been learning LWC, and got to the topic of using 3rd party library. i'm curious as to how do we know what function name to use in the 3rd library.

For example, i'm using axios to fetch data from external server
link: https://github.com/axios/axios
I'm configuring the js file of lwc, loadScript to point to '/axios-master/dist/axios.js'

I can call the function, namely axios({ url: ...}).then().catch()
But when i inspect the file axios.js inside folder dist, nowhere i can find the function with name axios, there is function with name Axios though (capitalized first letter). The curious thing is, if i call function Axios, it doesn't work in lwc.

Can somebody help to explain this to me, as i'm very curious how to know the function name to use.

Thank you very much friends.
Best Answer chosen by Jap Hendy Wijaya
Alain CabonAlain Cabon
hi @Jap  i used axios not Axios. The exported value is "axios". 
// Create the default instance to be exported
var axios = createInstance(defaults);
// Expose Axios class to allow class inheritance
axios.Axios = Axios;
...
module.exports = axios;
// Allow use of default import syntax in TypeScript 
module.exports.default = axios;

// Make a request: same syntax in salesforce
axios.get('<relative url')
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })
  .then(function () {
    // always executed
  });

All Answers

mukesh guptamukesh gupta
Hi Jap,

Please follow below url:-

https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.js_third_party_library

if you need any assistanse, Please let me know!!

Kindly mark my solution as the best answer if it helps you.

Thanks
Mukesh 
Alain CabonAlain Cabon

axios = static resource that contains:  https://cdn.jsdelivr.net/npm/axios/dist/axios.js 
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,force:lightningQuickAction" access="global" >
	<ltng:require scripts="{!$Resource.axios}" afterScriptsLoaded="{!c.scriptsLoaded}" />
</aura:component>


({
    scriptsLoaded : function(component, event, helper) {
        var toastEvent = $A.get("e.force:showToast");
        toastEvent.setParams({
            "title": "Success!",
            "message": "Axios loaded!",
            "type":"success"
        });
        toastEvent.fire();

        console.log('axios functions:');
        console.log(Object.getOwnPropertyNames(axios).filter(function (p) { return typeof axios[p] === 'function';}));
    }
})
Result: toast + console.log 
axios functions:

Lex_axios.js:19 (18) ['request', 'getUri', 'delete', 'get', 'head', 'options', 'post', 'put', 'patch', 'create', 'Axios', 'Cancel', 'CancelToken', 'isCancel', 'all', 'spread', 'isAxiosError', 'default']
'get' is one of the returned methods
Jap Hendy WijayaJap Hendy Wijaya
hi @alain, thanks for your reply. i see, so this is how we know the returned function name. but it's not 'get' what i'm curious about, it's the function 'Axios'.

See, from your returned values, the function name is 'Axios' with capital A, so naturally we should use the function with that name right ? for example: Axios.get() / Axios.put() / Axios.post() / Axios() ...,  but it's not working in LWC, instead of 'Axios' with capital A, i have to use 'axios' with lowercase a.
Alain CabonAlain Cabon
hi @Jap  i used axios not Axios. The exported value is "axios". 
// Create the default instance to be exported
var axios = createInstance(defaults);
// Expose Axios class to allow class inheritance
axios.Axios = Axios;
...
module.exports = axios;
// Allow use of default import syntax in TypeScript 
module.exports.default = axios;

// Make a request: same syntax in salesforce
axios.get('<relative url')
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })
  .then(function () {
    // always executed
  });
This was selected as the best answer
Jap Hendy WijayaJap Hendy Wijaya
hi alain, yes thankyou. two friends of mine just told me the same, that we should look for the name used in module.exports.default, just like your answer.

Although turns out, not all 3rd library use the module.exports.default in the dist file or in any entry point file.
We find that it is likely more reliable to look within the 'window' object, and see what name is loaded from the library to the component.
Praveen Rajendran 9Praveen Rajendran 9
CreateInstance says it is not there. how to load it?