Início / user-30270876

ZETDOU's questions

Martin Hope
ZETDOU
Asked: 2025-04-15 02:20:18 +0800 CST
  • 4

Estou fazendo um pequeno projeto para o meu portfólio. Sou um programador iniciante e estou com um problema ao importar a função js de outro arquivo. Esta função é necessária porque preciso usá-la em outra lógica do meu código. Esses dois arquivos estão na mesma pasta chamada scripts. Os scripts são adicionados a index.html antes da tag de fechamento do corpo com o atributo defer.

ProdutosDb.mjs:

import axios from "axios";

const productsDb = process.env.DB_BASE_URL;
let products;

export const fetchProducts = async () => {
  const productsDb = process.env.DB_BASE_URL;
  try {
    const res = await axios.get(productsDb);
    products = res.data;
    //console.log("value of products:", products);
    return products;
  } catch (err) {
    console.err("Error fetching products: ", err);
    throw err;
  }
};
const createProductCart = async () => {
  await fetchProducts();
  const shopList = document.querySelector(".shop-list");
  shopList.innerHTML = "";
  console.log(products);

  products.forEach((element) => {
    const shoppingCart = document.createElement("li");
    shoppingCart.classList.add("shop-list-item");

    let imgURL = `http://127.0.0.1:3000${element.image}`;
    shoppingCart.innerHTML = `
        <a href="#">
          <img class="item-image" height="320px" width="320px" src="${imgURL}" alt="${element.name}" />
          <div class="shop-list-info">
            <p>${element.category}</p>
            <h3>${element.name}</h3>
          </div>
        </a>
        <button class="openCartModal" data-id="${element.id}">Wybierz opcje</button>
      `;

    shopList.appendChild(shoppingCart);
  });
  return;
};

document.addEventListener("DOMContentLoaded", async () => {
  try {
    createProductCart();
  } catch (err) {
    console.error("Error", err);
  }
});

modal.mjs:

import { fetchProducts } from "./productsDb.mjs";

// Open quick shopping modal window
const shopList = document.querySelector(".shop-list");
shopList.addEventListener("click", function (ev) {
  const modal = document.querySelector("[modalOpen]");
  const modalClose = document.querySelector("[modalClose]");

  if (ev.target.closest(".openCartModal")) {
    openModal(modal, modalClose);
  }
});

function openModal(modal, modalClose) {
  modal.classList.toggle("isHidden");

  function close() {
    modal.classList.toggle("isHidden");
    document.removeEventListener("keydown", keyClose);
    modal.removeEventListener("click", clickOutClose);
    modalClose.removeEventListener("click", close);
  }

  function keyClose(ev) {
    if (ev.key === "Escape" && !modal.classList.contains("isHidden")) {
      close();
    }
  }

  function clickOutClose(ev) {
    if (ev.target === modal || ev.target.classList.contains("isHidden")) {
      close();
    }
  }
  document.addEventListener("keydown", keyClose);
  modal.addEventListener("click", clickOutClose);
  modalClose.addEventListener("click", close);
}

Preciso usar a função fetchProducts na lógica modal para passar valores do banco de dados para o modal de abertura. Estou tentando alterar o tipo do meu script para módulo, também no package.json, alterando o tipo para módulo, mas sem resultados positivos. Quando reinicio meu frontend, apenas o nome do módulo no console muda a cada vez.

Eu recebo algo assim:

Uncaught Error: Cannot find module '92Na4'
    at newRequire (kk-js.6bb1462e.js:74:19)
    at newRequire (kk-js.57740558.js:66:18)
    at newRequire (kk-js.8b89b8d5.js:66:18)
    at newRequire (kk-js.8b89b8d5.js:58:18)
    at localRequire (kk-js.8b89b8d5.js:97:35)
    at fsaaM../productsDb.mjs (modal.mjs:1:1)
    at newRequire (kk-js.8b89b8d5.js:84:24)
    at kk-js.8b89b8d5.js:144:5
    at kk-js.8b89b8d5.js:163:3

Qualquer ideia será muito útil para mim.

javascript