调用函数时遇未定义错误：ES6模块导出addToCart异常

出现Uncaught SyntaxError: Export 'addToCart' is not defined in module错误，大概率是导出语法、路径或者模块配置出了问题，直接对应排查解决：

1. 核对导出与导入的语法匹配 #

ES6模块有两种导出方式，必须和导入方式严格对应：

• 命名导出：
  导出文件里要明确用命名导出语法：

  // 写法1：直接在函数前加export
  export function addToCart(product) {
    // 你的jQuery和API逻辑
    $('.cart-item').append(`<div>${product.name}</div>`);
    // ...API请求代码
  }
  
  // 写法2：先定义函数再导出
  function addToCart(product) {
    // 逻辑同上
  }
  export { addToCart };
  

  导入的时候必须用解构语法：

  import { addToCart } from './你的文件名.js';
  

• 默认导出：
  导出文件里用默认导出：

  export default function addToCart(product) {
    // 逻辑同上
  }
  

  导入的时候不用解构：

  import addToCart from './你的文件名.js';
  

2. 确认模块配置和路径正确 #

• HTML中引入模块文件时，必须加上type="module"属性，否则浏览器不会按ES6模块解析：

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script type="module" src="./主文件.js"></script>
  

• 检查导入路径：相对路径要准确，比如文件在同一目录用./文件名.js，上级目录用../文件名.js，路径写错会导致找不到模块，间接触发这个错误。

3. 检查函数定义和拼写 #

• 确保导出文件里确实存在addToCart函数，没有漏写或者拼写错误（ES6模块区分大小写，addtocart和addToCart是两个不同的名字）。
• 导出语句必须在函数定义之后，不能先导出再定义函数，比如下面这种写法就会报错：

  export { addToCart }; // 错误：此时addToCart还没定义
  function addToCart() {}
  

完整示例 #

导出文件（cartUtils.js）：

export function addToCart(product) {
  // 更新购物车UI
  $('.cart-count').text(parseInt($('.cart-count').text()) + 1);
  // 调用添加购物车API
  fetch('/api/cart/add', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ productId: product.id })
  })
  .then(res => res.json())
  .then(data => console.log(data));
}

主文件（main.js）：

import { addToCart } from './cartUtils.js';

// 绑定点击事件调用函数
$('.add-btn').click(function() {
  const product = { id: $(this).data('id') };
  addToCart(product);
});

HTML引入：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="module" src="./main.js"></script>

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