Avoid errors in standard Salesforce delegate.js file when opening packaged lwc inside VF page in subscriber org without My Domain feature enabled?

Question

I have build functionality for my client using the latest LWC framework and shipped that functionality as Managed Package (2GMP). Unfortunately, the client doesn't have MyDomain feature enabled so my both Lightning Component tab and Lightning page tab do not render in his org.

I assumed that if I embed my LWC inside a Visualforce page that would work since Visualforce page tab does not require MyDomain feature enabled.

So I embedded my LWC inside a Visualforce Page and released a new version of 2GMP. This works fine on the Developer environment where MyDomain is not enabled, but it doesn't work in the subscriber org if the page is part of the managed package.

I don't understand why this approach works in an unpackaged version in the org without My Domain enabled but doesn't work inside a package, and why a strange error happens when I try to open my Visualforce page tab which includes the LWC component inside exposed through Lightning Out feature.

Is there any way to avoid errors in standard Salesforce delegate.js file when opening packaged lwc inside VF page in subscriber org without My Domain feature enabled?

lightning.out.delegate.js?v=1609730908320:71 Uncaught TypeError: Cannot read property 'split' of undefined
    at displayErrorText (lightning.out.delegate.js?v=1609730908320:71)
    at lightning.out.delegate.js?v=1609730908320:179
    at XMLHttpRequest.xhr.onreadystatechange (lightning.out.delegate.js?v=1609730908320:113)

After some debugging, I have found out that this function in the lightning.out.delegate.js file

function displayErrorText(error) {
    var para = document.createElement("P");
    var lines = error.split("\\n");
    for (var n = 0; n < lines.length; n++) {
        var t = document.createTextNode(lines[n]);
        para.appendChild(t);
        var br = document.createElement("BR");
        para.appendChild(br);
    }
    document.body.appendChild(para);
};

can be patched to

function displayErrorText(error) {
    var para = document.createElement("P");
    var lines = error && error.split("\\n");
    if (lines) {
        for (var n = 0; n < lines.length; n++) {
            var t = document.createTextNode(lines[n]);
            para.appendChild(t);
            var br = document.createElement("BR");
            para.appendChild(br);
        }
        
    }

    document.body.appendChild(para);
};

to avoid the error, however, the page is still not rendered.

After some additional investigation of call stack, I have seen that code in the else branch of the requestApp function.

                requestApp(applicationTag, lightningEndPointURI, authToken, paramsObj, function(xhr) {
                    var errorMarker = xhr.responseText.indexOf("/*ERROR*/");
                    if (errorMarker == -1) {
                        ...
                    } else {
                        // Strip aura servlet error markers
                        var startIndex = (xhr.responseText.startsWith("*/")) ? 2 : 0;
                        var jsonExcptn = xhr.responseText.substring(startIndex,errorMarker);
                        jsonExcptn = jsonExcptn.replace(/\\n/g, "\\\\n"); // preserve newlines inside json stringified values by escaping them
                        var exceptn = JSON.parse(jsonExcptn);
                        displayErrorText(exceptn.message);
                    }
            });

The value of the xhr.responseText is the following

"*/{
  "event":{
    "descriptor":"markup://aura:noAccess",
    "attributes":{
      "values":{

      }
    },
    "eventDef":{
      "descriptor":"markup://aura:noAccess",
      "t":"APPLICATION",
      "xs":"G",
      "a":{
        "redirectURL":["redirectURL","aura://String","G",false]
      }
    }
  },
  "exceptionEvent":true
}/*ERROR*/"

The documentation of aura:noAccess doesn't provide any clues on this.

This documentation page only says that aura:noAccess event indicates that a requested resource is not accessible due to security constraints on that resource. However, it doesn't provide a solution how this can avoided.

I have double verified that I have set access="GLOBAL" in my lightning-out app, so every Visualforce page even build unpackaged in the subscriber org should have access to this app.

<aura:application access="GLOBAL" extends="ltng:outApp"> 
    <aura:dependency resource="c:lwcComponent"/>
</aura:application>

Also I have verified that my LWC Component has <isExposed>true</isExposed> set in js-meta.xml file due to the Access migration documentation.

Why does this error happen? Is there any way to make this work without having to rewrite the whole application functionality in a pure Visualforce?

Answer 1

Actually in fact I have missed access="GLOBAL" in the dependency app definition, so the package version contained the following code

<aura:application extends="ltng:outApp"> 
    <aura:dependency resource="c:lwcComponent"/>
</aura:application>

When I created a new package version which contained this code

<aura:application access="GLOBAL" extends="ltng:outApp"> 
    <aura:dependency resource="c:lwcComponent"/>
</aura:application>

the tab has opened successfully