How to get rid of error: The error in "pug" template: TypeError: Cannot read property 'length' of undefined at eval?

I work on Nuxt.js (Vue.js) application.

The code looks as following:

<template lang="pug">    div      b-nav-item.justify-content-center.d-none.d-md-block(        :class="$style.wrapper"        :link-classes="[$style.basket, 'w-100']"        @click="modalShow = !modalShow"      )        i.gicon-cart        | Корзина 0&nbsp;        i.gicon-currency-ruble      b-modal(        v-model='modalShow'        title=`Ваша корзина (${products.length})`        header-class="header-color"        hide-footer        size="lg"        centered      ).d-block.text-center        basket  </template>    <script lang="ts">  import Vue from 'vue'  import { BasketNavData } from 'types/header/nav/basketnav'  import Basket from '../../../components/Basket.vue'  import { mapState } from 'vuex'    export default Vue.extend({    components: {      Basket,    },    data: (): BasketNavData => ({      modalShow: false    }),    computed: {      ...mapState(['products']),    },  })  </script>  

But, there's an error:

ERROR  in ./src/components/header/nav/BasketNav.vue?vue&type=template&id=b59ce802&lang=pug&                                                                                                           friendly-errors 04:59:21      Module build failed (from ./node_modules/pug-plain-loader/index.js):                                                                                                                                   friendly-errors 04:59:21    TypeError: Cannot read property 'length' of undefined      at eval (eval at wrap (D:\Projects\GarageTools\Projects\frontend\node_modules\pug-runtime\wrap.js:6:10), <anonymous>:5:500)      at template (eval at wrap (D:\Projects\GarageTools\Projects\frontend\node_modules\pug-runtime\wrap.js:6:10), <anonymous>:6:7)      at Object.module.exports (D:\Projects\GarageTools\Projects\frontend\node_modules\pug-plain-loader\index.js:13:10)  

This line causes the issue:

title=`Ваша корзина (${products.length})`  

I'm not sure what I'm doing wrong.

https://stackoverflow.com/questions/66620436/how-to-get-rid-of-error-the-error-in-pug-template-typeerror-cannot-read-pro March 14, 2021 at 10:08AM