0

I have an developed with the new Lightning Web Component framework. The issue comes when I wrap it in an Aura app it order to expose it direclty at a single URL. Everything works except that when I click on a specific part of the app I get this cryptic error :

Cannot read property 'apply' of undefined

The specific control that throws the error when clicked is the SLDS dropdown in the following LWC component :

Template :

<template>
    <div if:false={mobile} class="slds-grid" onclick={blockOnClick}>
        <div class="slds-col slds-size_12-of-12 slds-large-size_4-of-12 slds-grid">
            <div class="slds-dropdown-trigger slds-dropdown-trigger_click filter-list slds-col slds-size_4-of-12">
                <button onclick={toggleFilter}
                        class="toggle-filter slds-button slds-button_icon slds-button_icon-border-filled"
                        aria-haspopup="true" title="Show More">
                    {currentFilter}
                    <lightning-icon icon-name="utility:down" size="x-small"></lightning-icon>
                </button>
                <div class="slds-dropdown slds-dropdown_left">
                    <ul class="slds-dropdown__list" role="menu" aria-label="Show More">
                        <template for:each={activityTypes} for:item="type">
                            <c-select-activity-filter-item activity-type={type} key={type}
                                                           onselect={filterList}></c-select-activity-filter-item>
                        </template>
                    </ul>
                </div>
            </div>
            <div class="main-input-wrapper slds-form-element__control slds-input-has-icon slds-input-has-icon_left slds-col slds-size_8-of-12">
                <lightning-icon class="slds-icon slds-input__icon slds-input__icon_left slds-icon-text-default"
                                icon-name="utility:search" size="x-small"></lightning-icon>
                <input
                        type="text"
                        class="slds-input main-input"
                        onclick={toggleList}
                        oninput={handleInput}
                        placeholder={placeholder}
                />
            </div>
            <div
                    class="slds-dropdown-trigger activity-list slds-dropdown-trigger_click"
            >
                <div class="slds-dropdown activity-list activity-list-responsive slds-dropdown_small">
                    <ul class="slds-dropdown__list" role="menu" aria-label="Show More">
                        <template for:each={activities.list} for:item="activity">
                            <li key={activity.activityId} onclick={select} class="slds-dropdown__item slds-is-selected"
                                role="presentation">
                                <a aria-checked="true" href="javascript:void(0);" role="menuitemcheckbox" tabindex="0">
                        <span class="slds-truncate" title={activity.fullName}>
                            <div class="slds-checkbox" onclick={checkActivity}>
                                    <template if:true={activity.defaultActivity}>
                                            <input type="checkbox" name={activity.activityId} id={activity.activityId}
                                                   disabled/>
                                    </template>
                                    <template if:false={activity.defaultActivity}>
                                            <input type="checkbox" name={activity.activityId} id={activity.activityId}/>
                                    </template>
                                    <label class="slds-checkbox__label" for={activity.activityId}>
                                            <span class="slds-checkbox_faux"></span>
                                            <template if:true={activity.defaultActivity}>
                                              <span class="slds-form-element__label" style="color: #cccccc">&nbsp; {activity.fullName}</span>
                                            </template>
                                            <template if:false={activity.defaultActivity}>
                                              <span class="slds-form-element__label">&nbsp; {activity.fullName}</span>
                                            </template>



                                    </label>
                                </div>
                        </span>
                                </a>
                            </li>
                        </template>
                    </ul>
                </div>
            </div>
        </div>
        <div class="slds-col slds-size_12-of-12 slds-large-size_2-of-12">
            <template if:true={addBtn}>
                <template if:false={mobile}>
                    <button class="slds-button add-button" onclick={handleAdd}>
                        <lightning-icon icon-name="utility:add" variant="inverse" size="x-small"></lightning-icon>
                    </button>
                </template>
            </template>

        </div>
        <div class="slds-col slds-size_0-of-12 slds-large-size_6-of-12"></div>
    </div>

    <!-- ============================================= Mobile  ============================================= -->


    <div if:true={mobile}>
        <button class="slds-button green-button modalButton" onclick={showModal}>{addActivities}</button>
        <div if:true={modalShown}>
            <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true"
                     aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
                <div class="slds-modal__container">
                    <header class="slds-modal__header">
                        <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">{addActivities}</h2>
                    </header>
                    <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">

                        <div class="slds-dropdown-trigger slds-dropdown-trigger_click filter-list slds-col slds-size_4-of-12">
                            <button onclick={toggleFilter}
                                    class="toggle-filter slds-button slds-button_icon slds-button_icon-border-filled"
                                    aria-haspopup="true" title="Show More">
                                {currentFilter}
                                <lightning-icon icon-name="utility:down" size="x-small"></lightning-icon>
                            </button>
                            <div class="slds-dropdown slds-dropdown_left">
                                <ul class="slds-dropdown__list" role="menu" aria-label="Show More">
                                    <template for:each={activityTypes} for:item="type">
                                        <c-select-activity-filter-item activity-type={type} key={type}
                                                                       onselect={filterList}></c-select-activity-filter-item>
                                    </template>
                                </ul>
                            </div>
                        </div>
                        <div class="main-input-wrapper slds-form-element__control slds-input-has-icon slds-input-has-icon_left slds-col slds-size_8-of-12">
                            <lightning-icon
                                    class="slds-icon slds-input__icon slds-input__icon_left slds-icon-text-default"
                                    icon-name="utility:search" size="x-small"></lightning-icon>
                            <input
                                    type="text"
                                    class="slds-input main-input"
                                    oninput={handleInput}
                                    placeholder={placeholder}
                                    onfocusin={minimize}
                                    onfocusout={maximize}
                            />

                        </div>
                        <lightning-button-icon if:true={emptyButtonShown} onclick={handleEmptyButton} class="slds-icon slds-input__icon slds-input__icon_right slds-icon-text-default" variant="bare" icon-name="utility:close" alternative-text="remove" ></lightning-button-icon>
                        <br><br>
                        <div class="activity-list">
                            <template for:each={activities.list} for:item="activity">
                                <div key={activity.activityId} class="slds-checkbox" onclick={checkActivity}>
                                    <template if:true={activity.defaultActivity}>
                                        <input type="checkbox" name={activity.activityId} id={activity.activityId}
                                               disabled/>
                                    </template>
                                    <template if:false={activity.defaultActivity}>
                                        <input type="checkbox" name={activity.activityId} id={activity.activityId}/>
                                    </template>
                                    <label class="slds-checkbox__label" for={activity.activityId}>
                                        <span class="slds-checkbox_faux"></span>
                                        <template if:true={activity.defaultActivity}>
                                            <span class="slds-form-element__label" style="color: #cccccc">&nbsp; {activity.fullName}</span>
                                        </template>
                                        <template if:false={activity.defaultActivity}>
                                            <span class="slds-form-element__label">&nbsp; {activity.fullName}</span>
                                        </template>


                                    </label>
                                </div>
                            </template>
                        </div>
                    </div>
                    <footer class="slds-modal__footer slds-grid">
                        <button class="slds-button slds-col slds-size_1-of-2 slds-button--neutral" onclick={hideModal}>Cancel</button>
                        <button class="slds-button slds-col slds-size_1-of-2 green-button" onclick={handleAdd}>{addActivities}</button>
                    </footer>
                </div>
            </section>
            <div class="slds-backdrop slds-backdrop_open"></div>
        </div>

    </div>

</template>

Controller :

/* eslint-disable no-console */
import { LightningElement, track, api } from 'lwc';
import getUserBAUsableObject from '@salesforce/apex/TOCK_Main_CTRL_CLS.getUserBAUsableObject'
import TOCK_ActivityFilterLabel from '@salesforce/label/c.TOCK_ActivityFilterLabel';
import TOCK_ActivityFilterProjects from '@salesforce/label/c.TOCK_ActivityFilterProjects';
import TOCK_ActivityFilterTraining from '@salesforce/label/c.TOCK_ActivityFilterTraining';
import TOCK_ActivityFilterAll from '@salesforce/label/c.TOCK_ActivityFilterAll';
import TOCK_AddActivities from '@salesforce/label/c.TOCK_AddActivities'
import addTockUserCurrBA from '@salesforce/apex/TOCK_Main_CTRL_CLS.addTockUserCurrBA'
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
// import loadScript from 'lightning/platformResourceLoader';
// import FuseJS from '@salesforce/resourceUrl/FuseJS';
import TOCK_SelectActivityPlaceholder from '@salesforce/label/c.TOCK_SelectActivityPlaceholder';
import TOCK_SearchActivity from '@salesforce/label/c.TOCK_SearchActivity';

export default class SelectActivity extends LightningElement {

    // Labels
    filter = TOCK_ActivityFilterLabel;
    projects = TOCK_ActivityFilterProjects;
    training = TOCK_ActivityFilterTraining;
    all = TOCK_ActivityFilterAll;
    placeholder = TOCK_SelectActivityPlaceholder;
    search = TOCK_SearchActivity;
    addActivities = TOCK_AddActivities;

    @api
    mobile;

    @track
    activities = { // Activities displayed in the list (possibly filtered)
        list : []
    }

    allActivities= { // All of the user's activities (unfiltered)
        list : []
    }

    connectedCallback(){
        this.loadActivities();

    }



    // ======================================== BA List =================================================

    @api
    loadActivities(){
        getUserBAUsableObject()
        .then( result => {
            let listBA = JSON.parse(result)
            this.activities.list = listBA;
            this.allActivities.list = listBA;
            this.searchList = this.activities.list;
        })
        .catch( error =>{
            this.dispatchEvent(new ShowToastEvent({
                title: "Load activities error",
                message: "Something went wrong, please report this error",
                variant: "error",
            }));
            console.error(error);
        });
    }

    toggleList(){

        const list = this.template.querySelector(".activity-list");
        const input = this.template.querySelector(".main-input");
        if(list.classList.contains("slds-is-open")){
            list.classList.remove("slds-is-open");
            input.placeholder = this.placeholder;
        }
        else{
            list.classList.add("slds-is-open");
            input.placeholder = this.search;
        }
    }

    blockOnClick(event){
        event.stopPropagation();
    }

    @api
    closeListAndFilter(){
        const input = this.template.querySelector(".main-input");
        const list = this.template.querySelector(".filter-list");
        const filter = this.template.querySelector(".activity-list");
        if(!this.mobile){
            if(list){
                list.classList.remove("slds-is-open");
            }
            if(filter){
                filter.classList.remove("slds-is-open");
            }
            if(input){
                input.placeholder = this.placeholder;
            }
        }


    }

    // ================================== Adding business activities ====================================

    @track
    addBtn = false;

    checkActivity(){
        const checkboxes = this.template.querySelectorAll(".activity-list input");
        for(const checkboxe of checkboxes){
            if(checkboxe.checked){
                this.addBtn = true;
                return;
            }
        }
        this.addBtn = false;
    }

    handleAdd(){
        const list = this.template.querySelector(".activity-list");
        if(list.classList.contains("slds-is-open")){
            list.classList.remove("slds-is-open");
        }

        const checkboxes = this.template.querySelectorAll(".activity-list input");

        let dto = [];

        for(const checkboxe of checkboxes){
            if(checkboxe.checked){
                dto.push({activityId: checkboxe.name});
            }
        }

        addTockUserCurrBA({ params: JSON.stringify(dto)})
        .then( ()=>{
            this.dispatchEvent(new CustomEvent('baupdate'));
            this.loadActivities();
            if(this.mobile){
                this.hideModal();
            }
        })
        .catch( error =>{
            this.dispatchEvent(new ShowToastEvent({
                title: "Add default user BA error",
                message: "Something went wrong, please report this error",
                variant: "error",
            }));
            console.error(error);
        });

    }

    // ======================================= Autocomplete =======================================


    handleInput(event){

        let newList = [];
        let keyword = event.target.value;
        this.emptyButtonShown = keyword !== "";
        this.activities.list = this.searchList;
        for(let activity of this.activities.list){
            if(activity.fullName.toLowerCase().includes(keyword.toLowerCase())){
                newList.push(activity);
            }
        }

        this.activities.list = newList;
    }

    // ======================================= Filter ================================================

    @track
    currentFilter = TOCK_ActivityFilterAll;

    toggleFilter(){
        const list = this.template.querySelector(".filter-list");
        list.classList.toggle("slds-is-open");
        console.log(list.className);
    }

    get activityTypes(){
        return ["All","Management","Training","Projects","Services","Development","Buy&Resale"]
    }

    filterList(event){

        this.template.querySelectorAll("c-select-activity-filter-item").forEach( e => {
           if(e.getActivityType() !== event.detail){
               e.unselect();
           }
           else{
               e.select();
           }
        });
        this.currentFilter = event.detail;
        let newList = [];
        for(let activity of this.allActivities.list){
            if(activity.type === event.detail || event.detail === "All"){
                newList.push(activity);
            }            
        }
        this.activities.list = newList;
        this.searchList = newList;

        this.closeListAndFilter();
    }

    // ============================================= Mobile =======================================================

    @track
    modalShown = false;

    @track
    emptyButtonShown = false;

    showModal(){
        this.modalShown = true;
        document.body.scrollTop = document.documentElement.scrollTop = 0;
    }

    hideModal(){
        this.modalShown = false;
    }

    handleEmptyButton(){
        this.template.querySelector(".main-input").value = "";
        this.emptyButtonShown = false;
        this.activities.list = this.searchList;
    }

    minimize(){
        this.template.querySelector(".slds-modal__content").style.height = "20rem";
    }

    maximize(){
        this.template.querySelector(".slds-modal__content").style.height = "40.5rem";
    }
}

Aura App Wrapper :

<aura:application extends="force:slds">
    <!-- <c:NewTockAuraWrapperComponent></c:NewTockAuraWrapperComponent> -->
    <c:tockMain></c:tockMain>
</aura:application>

This error doesn't occur when the app is used through its tab in Salesforce. So if you know a way to expose a Lightning Web Component App without using an Aura App, or how to find the source of this error, I'd be gratefull.

Thanks in advance,

  • 2
    can you provide minimum viable code for reproduction? On top of my head you probably are using some Lightning Container method present in one.app which are not present when you independently host it in aura:app. – Pranay Jaiswal Jul 15 '19 at 14:04
  • Thank you for your answer, I added the code of the component provoking the error and the aura app wrapper – Ombrelin Jul 15 '19 at 14:37
3

You have used showToast in your code.

import { ShowToastEvent } from 'lightning/platformShowToastEvent';

from the documentation of showToast event here

enter image description here

platformShowToastEvent is only available in Lightning Experience. As you have hosted the app in Aura app which is not in lightning experince, you are getting that error.

Solution: Remove show toast or any relevant code which is only supported in lightning experience.

| improve this answer | |
  • Hi, thank you for your advice, but after removal of the toasts, the error still occurs. Any clue about it ? – Ombrelin Jul 16 '19 at 9:22
  • There is too much code to try and reproduce, you have to debug it on your own, dev.to/daveturissini/… – Pranay Jaiswal Jul 16 '19 at 9:30
1

The problem was with a controller method that was called in the template but no longer existed. Still no clue why it happened only in aura app mod

| improve this answer | |

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.