LWC - Spurious Strict-Mode Failure on Library Load

Question

I am attempting to load a third-party Javascript library into a Lightning Component. The third-party assures me that the code is valid under "Strict Mode" and I have no reason to doubt them as this is a widely-used library.

HOWEVER, when I attempt to load the library I get the following error from the console in Chrome:

WARNING: Failed to load script at /resource/1587586407000/PCMilerJavascript: Delete of an unqualified identifier in strict mode. [Delete of an unqualified identifier in strict mode.]

Here is the the offending part of my js file:

import { LightningElement, api, wire } from 'lwc';
import { loadStyle, loadScript } from 'lightning/platformResourceLoader';
// apex methods
import getCredentials from '@salesforce/apex/ALKMapController2.getCredentials';
// static resources
import PCMilerCSS from '@salesforce/resourceUrl/PCMilerCSS';
import PCMilerJavascript from '@salesforce/resourceUrl/PCMilerJavascript';

export default class AlkMap extends LightningElement {

    connectedCallback() {
        debugger;
        Promise.all([loadStyle(this, PCMilerCSS), loadScript(this, PCMilerJavascript)])
            .then(() => {
                debugger;
                this.initializeMap();
            })
            .catch(error => {
                debugger;
                LightningUtil.logError(this, error);
            });
    }

The load of the Javascript is attempted in connectedCallback and fails as noted above.

Again the third-party assures me that their file passes strict mode.

Thanks in advance for your help!

Answer 1

I won't claim to be an expert on strict mode, but it appears that they are either unaware of all the rules of strict mode, or are just making an assertion without actually verifying that they are, in fact, strict mode compliant. It is unlikely that they are compliant, and the browser has it wrong. It is, however, also possible that their source code is strict compliant, but the minification process resulted in code that is not strict compliant (they may need to look at their minification tool's settings).

Looking at the code, I found a couple of possible culprits:

var a = this.createRequestForm();
this.imgDiv.appendChild(a);
a.submit();
this.imgDiv.removeChild(a);
delete a;

---

var a = this.imgDiv.firstChild;
ALKMaps.Event.stopObservingElement(a);
this.imgDiv.removeChild(a);
delete a;

---

To test this logic, I made a simple check:

function x() { 
  "use strict"; 
  var a = {x:5}; 
  delete a; 
}

This code fails to compile with the same error in strict mode (tested in Google Chrome's Developer Console), so this is most likely the problem. You may want to report a bug to them.

In strict mode, compilation fails when the code is compiled, before it has a chance to execute at all. In this case, trying to delete a local variable declared with var is an error, and will prevent compilation.