How to use 3rd party JS library with SAPUI5

Question

Hello Im trying to use the PapaParse library to read content from a csv file into an array. Im not sure how to use the library in my controller. I added the papaparse.min.js folder in my project and defined it in my controller but it still doesnt work. Could anyone provide some advice on what I should do to get a 3rd party library like this to work wit a UI5 app?

I followed this tutorial step by step but cant seem to get it to work --> https://blogs.sap.com/2017/04/30/how-to-include-third-party-libraries-modules-in-sapui5/

 sap.ui.define([ "sap/ui/core/mvc/Controller", "cap/trn/Amar_Billing/libs/papaparse" ], function (Controller, PapaParse) { "use strict"; return Controller.extend("cap.trn.Amar_Billing.controller.Home", { onInit: function () { this.oRouter = this.getOwnerComponent().getRouter(); }, handleUploadFile: function(oEvent) { //var that = this; var oFileToRead = sap.ui.getCore().byId("fileUploader").getFocusDomRef().files[0]; PapaParse.parse(oFileToRead, { download:true, header: true, skipEmptyLines: true, complete: function(results){ console.log(results); } }); }); });

 <core:FragmentDefinition xmlns:core="sap.ui.core" xmlns="sap.m" xmlns:f="sap.ui.layout.form" xmlns:u="sap.ui.unified"> <u:FileUploader id="fileUploader" uploadUrl="upload/" tooltip="upload your billing request" uploadComplete="handleUploadComplete" /> <Button text="Upload File" press="handleUploadFile" /> </core:FragmentDefinition>

File structure of project

Error in console when pressing upload button

Answer 1

The variable PapaParse in your controller is undefined because PapaParse doesn't use the same module architecture like UI5. This is also mentioned in your linked article.

The global variable is named Papa , so try calling Papa.parse .

It's important that the global name and the imported name are different, otherwise the import will overwrite the global with undefined .

/* global Papa:true */

sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "cap/trn/Amar_Billing/libs/papaparse"
], function (Controller, PapaParse) { // Use any name for your lib here (but not the name of the global variable)

    Papa.parse(...); // Use the global variable here.

});