Понимание импорта/экспорта модулей ES6

Я начинаю изучать модули ES6 и синтаксис import/export и хочу, чтобы мои модули выполнялись только там, где они нужны.

Я создал два простых модуля, которые подключаются к <div> с определенными class или id для запуска.

Например:

// product.js

import Vue from 'vue/dist/vue';

export default function() {

  var app = new Vue({
    el: '#c-product',
    data: {
      counter: 0,
    },
    methods: {
      addToCart: function() {
        this.counter++;
      },
      removeFromCart: function() {
        this.counter--;
      }
    }
  });

}

Затем у меня есть другой модуль для карусели:

// carousel.js

import Glide from '@glidejs/glide';

export default function() {

  new Glide('.glide', {
    type: 'carousel',
    startAt: 0,
    perView: 3,
    breakpoints: {
      800: {
        perView: 2
      }
    }
  }).mount();

};

Затем я связываю все с помощью Gulp + Browserify, чтобы иметь файл main.js, в который я импортирую и запускаю модули:

// main.js
import Product from './product';
import Carousel from './carousel';

Product();
Carousel();

Теперь у меня есть файл main.js, и я готов вставить его на страницы .html, но у меня возникают ошибки в консоли в зависимости от того, существуют ли эти элементы div на странице или нет.

Пример: если на странице product.html нет каруселей, у меня в консоли возникают ошибки относительно отсутствия <div> с классом карусели.

Надеюсь быть ясным.

Можете ли вы помочь мне понять?

Вот пример на странице продукта