Indicators causing bug in Carousel: "invalid array length"

ddavisj commented 1 month ago

Environment

Operating System: Linux
Node Version: v18.16.1
Nuxt Version: 3.12.4
CLI Version: 3.12.0
Nitro Version: 2.9.7
Package Manager: pnpm@9.6.0
Builder: -
User Config: devtools, colorMode, css, runtimeConfig, modules, device, compatibilityDate
Runtime Modules: @nuxtjs/device@3.1.1, @nuxt/ui@2.18.4, @pinia/nuxt@0.5.1, @nuxt/image@1.7.0

Version

v2.18.4

Reproduction

N/A - website is still in beta, not ready for launch/links

Description

Carousel appears to be working. When included, the indicator buttons do appear and work but also throw an error in the JS console. The arrows also work.

HTML

      <UCarousel
         v-slot="{ item }"
         :items="photos"
         :ui="{
            item: 'basis-full',
            indicators: {
               active: 'bg-primary-500 dark:bg-white',
               inactive: 'bg-gray-700 dark:bg-gray-900 mix-blend-overlay',
            },
         }"
         class="sm:rounded overflow-hidden"
         :prev-button="{
            color: 'gray',
            icon: 'i-heroicons-chevron-left',
         }"
         :next-button="{
            color: 'gray',
            icon: 'i-heroicons-chevron-right',
         }"
         arrows
      >
         <!-- indicators -->

JS console error

runtime-core.esm-bundler.js?v=87832025:1627 

Uncaught (in promise) RangeError: Invalid array length
    at renderList (runtime-core.esm-bundler.js?v=87832025:1627:11)
    at Proxy._sfc_render (Carousel.vue:195:67)
    at renderComponentRoot (runtime-core.esm-bundler.js?v=87832025:6286:16)
    at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js?v=87832025:5044:26)
    at ReactiveEffect.run (reactivity.esm-bundler.js?v=87832025:150:19)
    at instance.update (runtime-core.esm-bundler.js?v=87832025:5097:17)
    at callWithErrorHandling (runtime-core.esm-bundler.js?v=87832025:200:33)
    at flushJobs (runtime-core.esm-bundler.js?v=87832025:413:9)

Additional context

No response

Logs

No response

selemondev commented 2 weeks ago

Hey there @ddavisj, you can fix the above issue by removing the v-slot="{ item }" from the UCarousel component.

ddavisj commented 2 weeks ago

Hey there @ddavisj, you can fix the above issue by removing the v-slot="{ item }" from the UCarousel component.

Thanks @selemondev, I just tried removing this line and it broke the functionality. The images no longer appear at all. The error seems to act intermittently, it's not appearing - not sure why but will update this page if it reoccurs.

selemondev commented 2 weeks ago

Hey there @ddavisj, here is an example of one:

UCarousel

nuxt / ui