SvelteKit出现Found non-callable @@iterator错误 关联Swiper组件如何修复

Found non-callable @@iterator报错的核心原因是代码尝试对非可迭代对象执行迭代操作，结合你定位到Swiper相关代码，可按以下步骤排查修复：

• 修正错误的props写法：现有代码中navigation="{true}"属于错误写法，外层引号会将布尔值转为字符串类型，Swiper内部处理navigation参数时预期接收布尔值/配置对象/可迭代节点，传入字符串会触发迭代逻辑异常，直接改为navigation={true}即可。
• 补全Swiper模块注册：Swiper 7及以上版本需要手动导入所需功能模块并传入组件，你用到了navigation功能，需要先在script标签中导入Navigation模块、对应样式，再给Swiper组件添加modules={[Navigation]}属性，参考导入代码：

<script>
  import { Swiper, SwiperSlide } from 'swiper/svelte';
  import { Navigation } from 'swiper/modules';
  import 'swiper/css';
  import 'swiper/css/navigation';
</script>

• 兼容非可迭代遍历对象：接口返回的p.pkgImages可能存在返回null/undefined的情况，直接用{#each}遍历会触发迭代异常，修改为{#each (p.pkgImages || []) as img}兜底处理空值。
• 锁定依赖版本：未修改代码突然报错大概率是依赖自动更新引入的兼容性问题，可在package.json中固定swiper的版本号，删除node_modules和包锁文件后重新安装验证。

修复后的Swiper代码参考 #

<Swiper
  loop={true}
  navigation={true}
  modules={[Navigation]}
  class="overflow-hidden rounded-xl w-full h-72 relative justify-center items-center object-cover"
>
  <SwiperSlide>
    <img
      src={p.image}
      alt=""
      class="h-80 border border-gray-100 w-full object-cover rounded-xl group-hover:rotate-0 group-hover:transform"
    />
  </SwiperSlide>
  {#each (p.pkgImages || []) as img}
    <SwiperSlide>
      <img
        class="h-80 border border-gray-100 w-full object-cover rounded-xl"
        src={img.image}
        alt="product"
      />
    </SwiperSlide>
  {/each}
</Swiper>

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