1

I am trying to use PapaParse (a Javascript CSV analyzer library) in a Lightning Web Component. A lightning modal hosts the tool. Although I have seen examples of doing so in the past, I have been having a lot of trouble getting the base Papa object to instantiate. It is visible in Chrome devtools (i.e. I can see Papa and this.Papa, and Papa.LocalChunkSize) but these are all undefined in the LWC itself. Has anybody successfully implemented recently? I am worried that PapaParse may no longer be compatible due to security strengthening in Salesforce Winter '23 release.

I also pasted papaparse.js into LWS Security Console and found these Linting Results. errorMessages: 1, warningMessages: 2 38:2 - error: Definition for rule 'func-name' was not found. 668:4 - warning: {XMLHttpRequest|Window}.prototype.open is distorted by Lightning Web Security. 1141:5 - warning: window.setTimeout is distorted by Lightning Web Security. The func-name refers to this line which doesn't seem like a big deal. // eslint-disable-next-line func-name

My implementation method is: Create a papaparse folder in the vscode project's staticresources folder. In it put papaparse.js. At same level as folder, create a resource-meta.xml. Push to my sandbox with sfdx force:source:deploy -p force-app/main/default/staticresources

In LWC:

...
parserLibraryFile = 'papaparse.js';
...
renderedCallback() {
        if (!this.parserReady) {
            loadScript(this, PARSER + '/' + this.parserLibraryFile) 
            .then(() => {
                this.parserReady = true;
            })
            .catch(error => 
                console.log('ERROR loading PapaParse parser '+error)
            );
        }
        
    }
In handleMonitorButtonClick() :
if (this.parserReady) {
            console.log('Papa bare obj:');
            console.log(Papa);
            console.log('Papa this obj:');
            console.log(this.Papa);
            console.log('Papa window obj:');
            console.log(window.Papa);
            console.log('papa chunksize is ');
            console.log(this.Papa.LocalChunkSize);
}

These are defined in Chrome devtools but not when I check in LWC.. then they are defined as soon as an error is thrown (typically "Cannot read properties of undefined" when trying to get LocalChunkSize.

I am running with Lightning Web Security (LWS) disabled in Session Settings, though I think it may be forced anyway with this release. Theoretically I could downgrade the API to around 38 to turn that off... Hope someone has some good news and a working example I could try.

1
  • For what it's worth, a minimal CSV reader and writer is less than 200 lines of code. If you just need simple CSV parsing, PapaParse may be overkill. I haven't tried PapaParse since the new security model, but I recall just writing my own because it was only a couple of hours of work to have a minimal implementation, which was fine for our project.
    – sfdcfox
    Commented Jan 26, 2023 at 14:50

1 Answer 1

1

Well, for now I have avoided this extremely gnarly static resource issue by slicing off a little of the papaparse.js file and dropping it alongside my LWC controller.

The key items are as follows. No more need to do any loadscript in renderedCallback!

In my LWC javascript controller:

import Papa from './papaparseRevised.js';

// These work, called in a lightning-button click handler:
console.log(Papa); 
console.log(Papa.LocalChunkSize);
console.log(Papa.parse('x,y,z'));

// Also in a lightning-input file selector handler this works:
handleFileInputChange(event) {
if(event.target.files.length > 0){
            const file = event.target.files[0];
            this.loading = true;
            Papa.parse(file, {
                quoteChar: '"',
                header: 'true',
                complete: (results) => {
                    this._rows = results.data;
                    this.loading = false;
                    console.log('GOT RESULTS!');
                    console.log(this._rows);
                },
                error: (error) => {
                    console.error(error);
                    this.loading = false;
                }
            })
        }
}

Here is the diff showing what I did to papaparse.js (v5.3.2) to make papaparseRevised.js:

5a6,7
> 
> Shredded by me 2023-0125 to fit into LWC with Salesforce Winter '23 release changes
8,32c10,11
< (function(root, factory)
< {
<   /* globals define */
<   if (typeof define === 'function' && define.amd)
<   {
<       // AMD. Register as an anonymous module.
<       define([], factory);
<   }
<   else if (typeof module === 'object' && typeof exports !== 'undefined')
<   {
<       // Node. Does not work with strict CommonJS, but
<       // only CommonJS-like environments that support module.exports,
<       // like Node.
<       module.exports = factory();
<   }
<   else
<   {
<       // Browser globals (root is window)
<       root.Papa = factory();
<   }
<   // in strict mode we cannot access arguments.callee, so we need a named reference to
<   // stringify the factory method for the blob worker
<   // eslint-disable-next-line func-name
< }(this, function moduleFactory()
< {
---
> export { Papa as default };
> 
48d26
< 
1918,1919c1896
<   return Papa;
< }));
---
> 

Now ideally I would like to make a pull request on the PapaParse project so that it can be dropped in as a static resource, but frankly I don't know for sure that I wasn't just making some dumb mistake. If anyone has time to figure it out and would like to do so be my guest! Thanks for your consideration.

3
  • Could DataWeave in Apex help you avoid this in the LWC itself? Obviously may not fit your use case.
    – Phil W
    Commented Jan 26, 2023 at 11:17
  • Hi Phil, thanks. I did notice DataWeave is available but only as a developer preview, beta subject to change. Unfortunately I need to deliver an app now so it is not an option. And it seems extremely difficult / unproven about whether there is any way to actually parse a medium size (10MB) CSV file with Apex alone. Everyone seems to recommend parsing on client side.. then send batches for bulk insert by Apex. If DataWeave can solve this for Salesforce it would be great, though I am rooting for PapaParse they seem to be that good.
    – skycafe
    Commented Jan 27, 2023 at 9:42
  • 100% don't try to parse on the org if you have large files. I know the pain of bad timing - we have more than our fair share of having to implement stuff ourselves before the platform supports it! Ho hum.
    – Phil W
    Commented Jan 27, 2023 at 9:50

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .