useVisibleTask does not work in Qwik because it is not a function

Question

I'm trying to use Swiper in my Qwik application. Based on the docs I figured out that I have to use useVisibleTask$.

This is my code:

import {
    component$,
    useVisibleTask$,
} from '@builder.io/qwik'
import Swiper from 'swiper'
import 'swiper/css'

const Courses = component$(() => {

    useVisibleTask$(() => {

        const swiper = new Swiper(`.swiper`, {
            loop: true,
            pagination: {
                el: '.swiper-pagination',
            },

            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },

            scrollbar: {
                el: '.swiper-scrollbar',
            },
        })
    })

    retrun <div>Courses HTML here</div>
})

export default Courses

And this is the error that I get:

vite_ssr_import_1.useVisibleTaskQrl is not a function

What should I do?

score 0 · Answer 1 · answered Mar 24 '23 at 15:56

useVisibleTask$() registers a hook to be executed when the component becomes visible in the viewport, it will run at least once in the browser, and it can be reactive and re-executed when some tracked signal or store changes.

So from the error, it seems your project is SSR which is on the server. If that's the case, it means the useVisibleTask$ hook won't be available.

useVisibleTask does not work in Qwik because it is not a function

1 Answers1