0

We have embeded Lightning Component in VF page using lightning out app and we are using JQuery reference in both VF page and Aura Component. Previously we had loaded JQuery in VF page only but after the locker service concept we have loaded the JQuery in VF page and aura component both, as we are not able to access JQuery reference which is loaded in VF page when locker service is enabled. Now, the issue is that with this change, it is working with locker service enabled but it's not working with locker service disabled. The error encountered is as below. **

This page has an error. You might just need to refresh it. Error during init [Action failed: ltng$require$controller$init [ltng:require encountered an existing element for /resource/1478970295000/jQuery/jquery/js/jquery-2.2.4.min.js that was not created by an ltng:require instance. Unable to determine when the script would complete loading!]]

**

VF page code.

<apex:page>
    <link rel="stylesheet" type="text/css" href="{!$Resource.jQuery}/jquery/css/ui-smoothness/jquery-ui.min.css" />
    <apex:includeScript value="{!$Resource.jQuery}/jquery/js/jquery-2.2.4.min.js" />
    <apex:includeScript value="{!$Resource.jQuery}/jquery/js/jquery-migrate-1.3.0.min.js" />
    <apex:includeScript value="{!$Resource.jQuery}/jquery/js/jquery-ui-1.11.4.min.js" />

    <div id="demoCmp"></div>

    <script>
        $( window ).load(function() { 
            $Lightning.use("c:LightningApp", function() {
                $Lightning.createComponent("c:demoCmp",
                    {
                    },
                "demoCmp",
                function(cmp) {
                });
            });
        });
    </script>
</apex:page>

democmp.cmp

<aura:component implements="flexipage:availableForAllPageTypes" access="global" >
     <ltng:require styles="{!join(',',
                          $Resource.jQuery + '/jquery/css/ui-smoothness/jquery-ui.min.css',
                          $Resource.jQuery + '/jquery/css/ui-smoothness/jqgrid-ui-custom.min.css')}"
                  scripts="{!join(',',
                           $Resource.jQuery + '/jquery/js/jquery-2.2.4.min.js',
                           $Resource.jQuery + '/jquery/js/jquery-migrate-1.3.0.min.js',
                           $Resource.jQuery + '/jquery/js/jquery-ui-1.11.4.min.js')}" />
</aura>

Error with locker service desabled enter image description here

1

My current solution is to refer jquery from different path for VF page and Lightning component.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.