Почему консоль ругаеться на .click() на страницах где нет класса?

Всем привет! Я еще совсем новичек, и не могу понять почему в консоле ругается на click() ?

После верстки табов все работает отлично, но когда перехожу на другую страницу, у меня выскакивает ошибка в консоле и перестает работать Swiper. Хотя на странице где используются эти табы все окей, и тот же Swiper работает отлично и консоль не ругаеться.

<div class="product__tabs tabs-product">
    <div class="tabs-product__triggers">
        <a href="#tab-1" class="tabs-product__item">Описание</a>
        <a href="#tab-2" class="tabs-product__item">Доставка и оплата</a>
        <a href="#tab-3" class="tabs-product__item">Комментарии</a>
        <a href="#tab-4" class="tabs-product__item">Своя упаковка</a>
    </div>
    <div class="tabs-product__content">
        <div id="tab-1" class="tabs-product__text"></div>
        <div id="tab-2" class="tabs-product__text"></div>
        <div id="tab-3" class="tabs-product__text"></div>
        <div id="tab-4" class="tabs-product__text"></div>
    </div>
</div>

document.querySelectorAll('.tabs-product__item').forEach((item) =>
item.addEventListener('click', function (e) {
    e.preventDefault();
    const id = e.target.getAttribute('href').replace('#', '');

    document.querySelectorAll('.tabs-product__item').forEach(
        (child) => child.classList.remove('tabs-product__item--active')
    );
    document.querySelectorAll('.tabs-product__text').forEach(
        (child) => child.classList.remove('tabs-product__text--active')
    );

    item.classList.add('tabs-product__item--active');
    document.getElementById(id).classList.add('tabs-product__text--active');
}));

document.querySelector('.tabs-product__item').click();

Как я понимаю, ругаеться на то, что нет такого класса на странице в которой появляется ошибка. Может нужно JS код обвернуть в блок или функцию, не знаю как это сделать правильно.

Подскажите пожайлуста как решить данную проблему ?