PapaParse in LWC after Winter '23 heightened security?

Question

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.

Answer 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.