How do I export a function in a non-Node environment in JavaScript

I am making a full stack ecommerce site with HTML, SCSS, Javascript, Node, Express and MongoDB. I have an addToCart() function in the catalog.js file, because the logic is that when the customer clicks the cart button, it should add the item to the cart.html file.

I tried using require, tried setting the type to module in the package.json, also tried that in the script tag, and tried importing both files but that didn’t work either

This is the addToCart() function.

export async function addToCart() {
    console.log("Adding something to the cart..")
    try {
        const response = await fetch(API_CART_URL, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            body: JSON.stringify({
                id: "product ID"

        if (!response.ok) {
        const data = await response.json()

    } catch (error) {

And this is the cart.js file

import { addToCart } from "./catalog.js"

let price = document.querySelector(".amount-price")
let reduceQty = document.querySelector(".reduce")
let increaseQty = document.querySelector(".increase")
let quantity = document.querySelector(".product-quantity")
let basketContainer = document.querySelector(".basket")
let totalsContainer = document.querySelector(".total")
let clearCartbtn = document.querySelector(".clear-cart-btn")

// parent
let basket = document.querySelector(".basket")

// if there are no products in basket, display "basket empty text"
// if (basketContainer) {
//     basketContainer.textContent = 'Basket Empty!'
// = 'center'
//     totalsContainer.textContent = ''
// }

const API_CART_URL_CART_JS = "http://localhost:3000/cart"
const API_PRODUCT_URL_CART_JS = "http://localhost:3000/products"

async function fetchSelectedProduct() {

    try {
        const response = await fetch(`${API_PRODUCT_URL_CART_JS}`)
        if(!response.ok) {

        const parsedData = await response.json()

        parsedData.forEach(selectedProduct => {
        // dynamically update html in cart.html with selected product
        // if (product is selected): render html code for selected product

        let newAddedProduct = document.createElement('div')
        newAddedProduct.innerHTML = 

        `<div class="basket-container">
            <div class="product-image">
                <img src = ${selectedProduct.image} width = ${selectedProduct.width} height = ${selectedProduct.height}>

        <div class="name">
            <h5 class="product-name">${}</h5>
        <div class="quantity">
            <h5 class="amount-quantity">Quantity</h5>
            <div class="quantity-details">
                <button class="reduce">-</button>
                <h5 class="product-quantity">0</h5>
                <button class="increase">+</button>

        <div class="price">
            <h5 class="amount-price">Price</h5>
            <h5 class="product-price">${selectedProduct.prices}</h5>

    } catch (error) {

// get product id selected

clearCartbtn.addEventListener('click', function() {
    basketContainer.textContent = ''
    totalsContainer.textContent = ''

    // log an "empty basket" message