Can't use react-slick react library

[frosty wagon]

Hi ! I need to use the react-slick library to create image or component carousels. but I can't use it at all, it gives me this error:

Internal server error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

However, I installed everything and used qwikify to convert my react component into a qwik component

commands I used :

npm install react-slick --save-dev
npm install @types/react-slick
npm install react-carousel
npm run qwik add react

carousel.tsx :

/** @jsxImportSource react */
import { qwikify$ } from "@builder.io/qwik-react";
import Slider, {type Settings} from "react-slick";

const CarouselSlider = () => {
    const settings : Settings = {
        dots: true,
        infinite: true,
        speed: 500,
        slidesToShow: 1,
        slidesToScroll: 1,
    };
    return (
        <Slider {...settings}>
            <div>
                <h3>1</h3>
            </div>
            <div>
                <h3>2</h3>
            </div>
            <div>
                <h3>3</h3>
            </div>
            <div>
                <h3>4</h3>
            </div>
            <div>
                <h3>5</h3>
            </div>
            <div>
                <h3>6</h3>
            </div>
        </Slider>
    );
}

export const QCarouselSlider = qwikify$(CarouselSlider)```

index.tsx

```tsx
import { component$ } from "@builder.io/qwik";
import { QCarouselSlider } from "~/components/carousel";

export default component$(() => {
  return <div>
    <QCarouselSlider />
  </div>
});

I have no idea what I'm missing or what I'm doing wrong to make it not work 😦

and to be honest I don't even know if this is really a qwik-related problem but any help would really be appreciated.

minimal reproduction here : https://github.com/ericthibergedigitail/qwik-react-slick

[native coral]

im getting the same error when trying to use react masonry library D: , got no clue

end up switching to a vanilla js library and initializing it in useVisibleTask

found this comment that might be helpful https://github.com/vitejs/vite/issues/6776#issuecomment-1031215897

[daring monolith]

where is the hydration directive on the component? cc @native coral

also could try taking the carousel https://qwikui.com/docs/headless/carousel/ code from the qwik ui repo. It's native to qwik and resumable. Hasn't been pushed in a release yet, but you can grab it from the qwik ui repo in packages -> kit-headless -> carousel.

[native coral]

ahhhhh i see what happens here, the library is supposed to be used with "use client" and I did not put client:only on the qwikified component (QCarouselSlider for your case eric), everything works fine after adding it @daring monolith @frosty wagon

[frosty wagon]

OMG it works thanks a lot @native coral @daring monolith I was beginning to despair :0 !
I hadn't noticed that the component needed to be rendered client-side and I totally missed the fact that you could give hydration directives. But now it seems obvious. Thanks again!

export default component$(() => {
  return <div>
    <QCarouselSlider client:only />
  </div>
});

[daring monolith]

To explain a bit how qwik-react works, things are "partially hydrated" lazily. This is because React is bound to a hydration model, and so a hydration directive is also needed.

Whenever possible, you want to use native Qwik components, because you get the javascript streaming benefits. There is a combined effort on Qwik UI on a headless (think radix ui, melt ui, etc.) and styled ui library (think shadcn). if you see something that qwik ui doesn't have, would recommend going through this: https://qwikui.com/contributing/

cc @native coral @frosty wagon .

Awesome to hear it's working 🙂

[native coral]

@daring monolith I am still a bit confused as to how {eagerness: hover} and client:hover works together/differ. To my understanding, eagerness determines when to load the scripts needed for interactivity and client:hover determines when the hydration is performed? But in the docs they both seem to add interactivity 🤔

[naive lily]

have you tried passing the children prop down through react-slick? I haven't beed able to get that to work.

It works fine defining child nodes statically in the React file like you're doing in the example.