Intermittent 404 errors using Lightning Out in Visualforce

Question

I'm seeing intermittent 404 errors when attempting to use lightning components inside a Visualforce page via Lightning Out, but one org seems far more affected than others.

The VF markup:

<apex:page standardController="AMS_Order__c" >

    <apex:includeLightning />
    <div id="lightning"/>

    <script>
        $Lightning.use("c:BGM_OB_OrderHeaderApp", function() {
            $Lightning.createComponent("c:BGM_OB_OrderHeaderContainer",
                  {orderId: "{!AMS_Order__c.Id}"},
                  "lightning"
            );
        });    
    </script>
</apex:page>

So pretty much as per the docs and has been working fine for several months now.

Since Winter 17, and particularly in one org, I get intermittent blank page results, and when I go to the JavaScript console I see the following error:

Failed to load resource: https://bgm-dev-ed--c.eu3.visual.force.com/c/BGM_OB_OrderHeaderApp.app?aura.format=JSON&aura.formatAdapter=LIGHTNING_OUT the server responded with a status of 404 (Not Found)

If I open that URL directly it works every time I try it. After I've loaded the app reference directly, the page then loads. I can also make the page load by disabling the cache and reloading 5-6 times.

Answer 1

1. You have to set up an "aura:application".
2. That aura:application needs to extend ltng:outApp
3. The aura:application must use the component(s) as a dependency. This is key, otherwise you will see some odd behavior.
4. Your error looks like you might be including an extra protocol (extra https://) somewhere in your code.
5. You could also supposedly do this without an aura:application and use LC4VF (lightning components for VF) instead, but I haven't seen a working solution of this yet.

6. Here's a working example of a VF page that includes 3 components (3 dependencies in the aura application):

   <div id="sldsSpinner" />
   
   <script>
       $Lightning.use("c:MyAuraApp", function() {
               $Lightning.createComponent(
                   "c:MyComponent1",
                   {},
                   "formSelection"
               );
               $Lightning.createComponent(
                   "c:MyComponent2",
                   {},
                   "objectSelection"
               );
               $Lightning.createComponent(
                   "c:MyComponent3",
                   {},
                   "fieldSelection"
               );
           }
       );
   </script>
   

Here's what my aura:application looks like:

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

Answer 2

This issue is happening to me on managed packages that were previously working before. The callbacks are returning with a status of INCOMPLETE. It seems to be, like Bob says, an issue with cache or maybe some redirection problems.

The error message sometimes goes away on its own after minutes and tries, but overall seems to be pretty consistent and started to happen last week.