'TypeError: Cannot read properties of undefined (reading 'app') at asyncData

<script>
export default {
    components: {
        PageInfoSection,
        ProductGrid: () => import("~/components/category/ProductGrid.vue"),
        FilterSidebar: () => import("~/components/FilterSidebar.vue")
    },
    setup(props, {root}) {
    const catIds = root.$store.state.catItemIds;
    const productRangeFilterData = ref([]);
    const familiesFilterData = ref([]);
    const heroHerbFilterData = ref([]);
    const dietaryFilterData = ref([]);
    const doshaFilterData = ref([]);
    const timeOfDayFilterData = ref([]);
    const wellbeingTopicFilterData = ref([]);

    const {
      search:loadProduct,
      products: allProducts,
      loading: productloading
    } = useProduct('cat-products');

        onSSR( async () => {
            await loadProduct({ids: catIds})
        });

        return {
            allProducts,
            productloading,
            productRangeFilterData,
            familiesFilterData,
            heroHerbFilterData,
            dietaryFilterData,
            doshaFilterData,
            timeOfDayFilterData,
            wellbeingTopicFilterData
        }

    },
    asyncData({ $CfClient, $config, error, app, route, $store, context }) {
        return  Promise.all([
            $CfClient.getEntries({
                'include': 3,   
                'content_type': 'pageOverview',
                'locale': context.app.i18n.localeProperties.iso,
                'fields.slug': route.params && route.params.slug_1 && route.fullPath.includes('category') ? `category/${route.params.slug_1}` : 'category/all'
            })       
        ]).then((entries) => {
            
            if (entries[0].total === 0) {
                return error({ statusCode: 404, message: 'This page could not be found' });
            }
            
            const pageTemplateData = getContentfulEntryItem(entries[0]);
            
            let pageInfoTitle = pageTemplateData.title ? pageTemplateData.title : '';
            let pageInfoDesc = pageTemplateData.description ? pageTemplateData.description : {};

            let pageLeftRightImg = pageTemplateData.vineImage ? pageTemplateData.vineImage : {};
            
            let gridItemData = pageTemplateData.products ? pageTemplateData.products : [];
            const ids = getProductEcondedID(gridItemData);
            app.store.commit('SET_CAT_ITEM_IDS', ids);

            let oldgridItemData = pageTemplateData.products ? pageTemplateData.products : [];

            let disableSortby = pageTemplateData.disableSortby ? pageTemplateData.disableSortby : false;

            let filterGroupsData = pageTemplateData.filterGroups ? pageTemplateData.filterGroups : [];

            let seoTitle = pageTemplateData.seoTitle ? pageTemplateData.seoTitle : '';
            let seoDescription = pageTemplateData.seoDescription ? pageTemplateData.seoDescription : {};

            let hreflangs = getHrefLangs(entries[0], $config.baseURL, route.path);
            let schemas = usePukkaSchemaForLD('website',{siteName: 'PukkaHerbs',url: process.env.appURL+route.path, sameAs: []})

            return {
                pageInfoTitle,
                pageInfoDesc,
                pageLeftRightImg,
                gridItemData,
                disableSortby,
                filterGroupsData,
                oldgridItemData,
                seoTitle,
                seoDescription,
                hreflangs,
                schemas
            }
        })
    },
    mounted() {
        const filterArr = [];
        filterArr.push(this.$route.params.slug_1);
        this.receivedFilterList();
    },
    
    methods: {

        getItemsFromFilter(items, filterGroup){  
            return items.filter((item) => {
                let matched = false;
                if (item.fields.filterItems) {
                    
                    item.fields.filterItems.map((filter) => {
                        if (filterGroup.includes(filter.fields.filterTitle && filter.fields.filterTitle)) {
                            matched = true;
                            return false;
                        }
                    })

                }
                return matched;
            })
        },

        filterByProductRange(array) {
            if (this.productRangeFilterData && this.productRangeFilterData.length > 0) {
                const filteredProdsByProductRange = this.getItemsFromFilter(array, this.productRangeFilterData);
                return this.filterByFamilies(filteredProdsByProductRange)
            } else {
                return this.filterByFamilies(array)
            }
        },

        filterByFamilies(array) {
            if (this.familiesFilterData && this.familiesFilterData.length > 0) {
                const filteredProdsByFamily = this.getItemsFromFilter(array, this.familiesFilterData);
                return this.filterByHeroHerb(filteredProdsByFamily)
            } else {
                return this.filterByHeroHerb(array)
            }
        },

        filterByHeroHerb(array) {
            if (this.heroHerbFilterData && this.heroHerbFilterData.length > 0) {
                const filteredProdsByHeroHerb = this.getItemsFromFilter(array, this.heroHerbFilterData);
                return this.filterByDietary(filteredProdsByHeroHerb)
            } else {
                return this.filterByDietary(array)
            }
        },

        filterByDietary(array) {
            if (this.dietaryFilterData && this.dietaryFilterData.length > 0) {
                const filteredProdsByDietary = this.getItemsFromFilter(array, this.dietaryFilterData);
                return this.filterByDosha(filteredProdsByDietary)
            } else {
                return this.filterByDosha(array)
            }
        },

        filterByDosha(array) {
            if (this.doshaFilterData && this.doshaFilterData.length > 0) {
                const filteredProdsByDosha = this.getItemsFromFilter(array, this.doshaFilterData);
                return this.filterByTimeOfDay(filteredProdsByDosha)
            } else {
                return this.filterByTimeOfDay(array)
            }
        },

        filterByTimeOfDay(array) {
            if (this.timeOfDayFilterData && this.timeOfDayFilterData.length > 0) {
                const filteredProdsByTimeOfDay = this.getItemsFromFilter(array, this.timeOfDayFilterData);
                return this.filterByWellbeingTopic(filteredProdsByTimeOfDay)
            } else {
                return this.filterByWellbeingTopic(array)
            }
        },

        filterByWellbeingTopic(array) {
            if (this.wellbeingTopicFilterData && this.wellbeingTopicFilterData.length > 0) {
                const filteredProdsByWellbeingTopic = this.getItemsFromFilter(array, this.wellbeingTopicFilterData);
                return this.createFilteredProducts(filteredProdsByWellbeingTopic)
            } else {
                return this.createFilteredProducts(array)
            }
        },

        createFilteredProducts(array) {
            this.gridItemData = array;
        },
       
        receivedFilterList(productRangeFilter, familiesFilter, heroHerbFilter, dietaryFilter, doshaFilter, timeOfDayFilter, wellbeingTopicFilter) {
            this.productRangeFilterData = productRangeFilter
            this.familiesFilterData = familiesFilter
            this.heroHerbFilterData = heroHerbFilter
            this.dietaryFilterData = dietaryFilter
            this.doshaFilterData = doshaFilter
            this.timeOfDayFilterData = timeOfDayFilter
            this.wellbeingTopicFilterData = wellbeingTopicFilter            


            this.filterByProductRange(this.oldgridItemData);
        }
    },
    computed: {
        gridItems() {
            return this.gridItemData;
        }
    },
    head() {
        return {
            title: this.seoTitle,
            meta: [
                {
                    hid: 'description',
                    name: 'description',
                    content: this.seoDescription && this.seoDescription.content[0].content[0].value,
                }
            ],
            script: [
                {
                    //   innerHTML:this.schemas
                    type: "application/ld+json",
                    innerHTML:JSON.stringify(this.schemas)
                },
            ],
            __dangerouslyDisableSanitizers: ['script'],
            link: this.hreflangs
        };
    }
}
</script>


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source