前端项目中从其他文件导入JS函数失败问题求助

我是一名初级开发者，正在为作品集制作项目，需要在弹窗逻辑中使用fetchProducts函数获取数据库值，该函数位于scripts文件夹下的ProductsDb.mjs文件中，modal.mjs文件与它同属该文件夹。

我已尝试将script标签设置为module类型，在package.json中设置"type": "module"，但均无效果。重启前端后，控制台中报错的模块名称每次都会变化，错误信息如下。

ProductsDb.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);
}

控制台错误信息 #

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

解决思路 #

• 检查文件名大小写：确保导入路径中的productsDb.mjs和实际文件名ProductsDb.mjs完全匹配，部分系统（如Linux/macOS）区分文件名大小写，大小写不一致会导致模块找不到
• 清理构建缓存：错误信息中的kk-js.xxxx.js是打包后的产物，大概率是构建工具缓存了旧的模块映射。删除项目中的node_modules/.cache目录或dist文件夹，然后重新执行构建命令
• 验证构建工具配置：如果使用了Vite、Webpack等打包工具，检查配置文件是否正确启用ES模块支持。比如Vite默认支持ES模块，但如果是自定义配置，确保没有禁用模块解析逻辑
• 修复重复变量声明：ProductsDb.mjs中重复声明了productsDb变量（顶部全局声明和fetchProducts函数内局部声明），虽然不直接导致导入错误，但可能引发潜在问题，建议移除函数内的重复声明
• 调整DOM查询时机：modal.mjs中直接查询.shop-list元素，可能在DOM未完全加载时执行导致null，可以将这段代码包裹在DOMContentLoaded事件监听中，避免后续连锁问题
• 确认axios可用性：如果是纯前端项目，确保axios已通过npm安装或CDN正确引入，打包工具能正确处理axios的模块导入

内容的提问来源于stack exchange，提问作者ZETDOU