Issue with loading/using external javascript static resource in Lightning component when Locker service is Enabled

Question

My requirement is to zip the content in client side controller using javascript library JSZIP, i have included it as a static resource. Below is the code.

Component:

<aura:component >

    <ltng:require scripts="/resource/jszip" afterScriptsLoaded="{!c.onPress}"/>

</aura:component>

Controller:

({
    onPress : function(component) {
        var packageXml = '<?xml version="1.0" encoding="UTF-8"?>' + 
            '<Package xmlns="http://soap.sforce.com/2006/04/metadata">' +
            '<version>35.0</version>' +
            '</Package>' ;

        var zipFile = new JSZip();
        zipFile.file('package.xml',packageXml,{base64: 'true'});
        var data = zipFile.generate();
        alert(data);
    }
})

I click on Press button, while locker service is enabled I am facing issue and when Locker service disabled the alert is showed as expected (attached the outputs).

Locker service enabled:

Locker service disabled: How to make this work when locker service is enabled. Thank you for help.

The error is very cryptic and not helpful

Answer 1

You just forgotten to declare the variable zipFile, change the line

zipFile = new JSZip();

to this line:

var zipFile = new JSZip();

also I will recommend you to use the Salesforce Lightning CLI to check this kind of issues, its a heroku command line tool that check for this errors.

Follow this steps to install Salesforce Lightning CLI: https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/cli_intro.htm

---

UPDATE: In my personal org I tested the code you provided with a few modifications in an aura application and it worked fine. Here is the code:

App:

<aura:application >
    <ltng:require scripts="/resource/jszip/jszip.min.js" afterScriptsLoaded="{!c.onPress}"/>
</aura:application>

Js controller:

  ({
        onPress : function(component) {
            var packageXml = '<?xml version="1.0" encoding="UTF-8"?>' + 
                '<Package xmlns="http://soap.sforce.com/2006/04/metadata">' +
                '<version>35.0</version>' +
                '</Package>' ;

            var zipFile = new JSZip();
            zipFile.file('package.xml',packageXml,{base64: 'true'});
            var data = zipFile.generateAsync();
            alert(data);
        }
    })

I downloaded the last version (3.0.0) of jszip from their site and had the issue that the method generate() is deprecated, so I changed it to generateAsync() as is suggested in the upgrade guide.

Answer 2

I have found the right fix for this problem.

Open the downloaded source JSZip.js (minified version also should be ok) and find near the top of the file the next string:

"g.JSZip = f()"

change it to:

"window.JSZip = f()"

upload this source and have fun. That's it

some explanation:

This string is the part of a dependency header generated by Browserify, and if you follow the logic, you will see environments checks of whether it is Node.js, or browser or so.

At the end it looks like the following:

... else {
    var g;
    if (typeof window !== "undefined") {
        g = window;
    } else ...
    ...
    g.JSZip = f();
}
...

In Lightning under the LockerService, "window" is a secured object, and things like

g = window;
g.blabla = something;

do not work, you have to assign directly to window properties:

window.blabla = something;

The same way you may fix other libraries.