2

Getting below error in Firefox, when using Swiper.js in a simple Lightning​ App.

enter image description here

TypeError: cannot use the given object as a weak map key throws at https://rio-education-dev-ed.lightning.force.com/auraFW/javascript/1bO4dJePbDnoI-_VdhdsEQ/aura_prod.js:4:277

This doesn't seem to appear in other browsers ( Microsoft Edge, Chrome), they worked perfect. Has anyone encountered similar before? Any idea why it happens in Firefox only.

My code as below.

Markup

<aura:application extends="force:slds">
    <aura:attribute name="mySwiperObj" type="object" description="for swiper navigation" />
    <div aura:id="termMapItems" class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide"  >AAAA<lightning:icon iconName="action:approval" size="large"/></div>
            <div class="swiper-slide"  >BBBB<lightning:icon iconName="action:approval" size="large"/></div>
            <div class="swiper-slide"  >CCC<lightning:icon iconName="action:approval" size="large"/></div>
            <div class="swiper-slide" >DDDD<lightning:icon iconName="action:approval" size="large"/></div>
        </div>
    </div>
    <ltng:require styles="{!$Resource.Swiper + '/css/swiper.min.css'}" scripts="{!$Resource.Swiper + '/js/swiper.min.js'}" afterScriptsLoaded="{!c.loadSwiper}" />
</aura:application>

JS Controller

({
    loadSwiper: function(component, event, helper){
        console.log('load swiper called!');
        var mySwiper = new Swiper ('.swiper-container', {
            initialSlide: 2,
            effect: 'coverflow',
            grabCursor: true,
            centeredSlides: true,
            slidesPerView: 'auto',
            coverflowEffect: {
                rotate: 50,
                stretch: 0,
                depth: 100,
                modifier: 1,
                slideShadows : false,
            },
            pagination: {
                el: '.swiper-pagination'
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
        });
        console.log('2 swiper object: '+    mySwiper);  // mySwiper is initialized, but not working in firefox :/
        component.set("v.mySwiperObj", mySwiper);
    }
})

This Mozilla issue looks similar, but don't feel they are related. Appreciate any help/thoughts to workaround/fix it. Thanks.

  • Given that it's only in FireFox, it's most likely a FireFox bug. You might try submitting an issue on Swiper's GitHub and see if they can fix it on their end. – sfdcfox May 17 '18 at 1:07
  • Thanks @sfdcfox, moved <ltng:require styles="{!$Resource.Swiper + '/css/swiper.min.css'}" scripts="{!$Resource.Swiper + '/js/swiper.min.js'}" afterScriptsLoaded="{!c.loadSwiper}" /> and set API version to 38 and that fixed the issue for me. – Pasan Eeriyagama May 17 '18 at 2:01
0

Found this workaround,

Moved below line,

<ltng:require styles="{!$Resource.Swiper + '/css/swiper.min.css'}" scripts="{!$Resource.Swiper + '/js/swiper.min.js'}" afterScriptsLoaded="{!c.loadSwiper}" />

To the top and also set API version to 38 and that fixed the issue for me.

Also, in the real program I had to remove below JS code,

component.find("viewCssdBtn").set("v.class","slds-button slds-align_absolute-center ");

and utilized class with Inline IFs.

Hope someone would benefit from it. Also would appreciate and welcome any suggestions to make it better. Cheers!

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.