[bug]: Type error: using autoplay in carousel

[eduardojpanzo]

Describe the bug

I'm trying to use the plugins prop to add plugins to the carousel.and I'm having a typing error.

My componet:

<Carousel
      plugins={[plugin.current]}
      onMouseEnter={plugin.current.stop}
      onMouseLeave={plugin.current.reset}
      opts={{
        align: "start",
        loop: true,
      }}>
...
</Carousel>

My dependencies

"dependencies": {
    "@hookform/resolvers": "^3.3.4",
    "@radix-ui/react-avatar": "^1.0.4",
    "@radix-ui/react-checkbox": "^1.0.4",
    "@radix-ui/react-dialog": "^1.1.1",
    "@radix-ui/react-dropdown-menu": "^2.0.6",
    "@radix-ui/react-label": "^2.0.2",
    "@radix-ui/react-navigation-menu": "^1.1.4",
    "@radix-ui/react-popover": "^1.0.7",
    "@radix-ui/react-radio-group": "^1.1.3",
    "@radix-ui/react-select": "^2.0.0",
    "@radix-ui/react-slot": "^1.0.2",
    "axios": "^1.7.2",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.0",
    "embla-carousel-autoplay": "^8.1.6",
    "embla-carousel-react": "^8.0.2",
    "lucide-react": "^0.367.0",
    "next": "14.1.4",
    "next-themes": "^0.3.0",
    "react": "^18",
    "react-dom": "^18",
    "react-hook-form": "^7.51.2",
    "react-resizable-panels": "^2.0.16",
    "tailwind-merge": "^2.2.2",
    "tailwindcss-animate": "^1.0.7",
    "zod": "^3.22.4"
  },

Affected component/components

Carousel

How to reproduce

This is the error: Type 'AutoplayType' is not assignable to type 'CreatePluginType<LoosePluginType, {}>'.

more:

Type 'AutoplayType' is not assignable to type 'CreatePluginType<LoosePluginType, {}>'.
  Type 'AutoplayType' is not assignable to type '{ name: string; options: Partial<{ active: boolean; breakpoints: { [key: string]: Omit<Partial<...>, "breakpoints">; }; }>; init: (embla: EmblaCarouselType, OptionsHandler: OptionsHandlerType) => void; destroy: () => void; }'.
    Types of property 'init' are incompatible.
      Type '(embla: EmblaCarouselType) => void' is not assignable to type '(embla: EmblaCarouselType, OptionsHandler: OptionsHandlerType) => void'.
        Types of parameters 'embla' and 'embla' are incompatible.
          Property 'clickAllowed' is missing in type 'import("/home/eduardojpanzo/Projects/Vaawel/smarttech-ui/node_modules/embla-carousel-react/node_modules/embla-carousel/esm/components/EmblaCarousel").EmblaCarouselType' but required in type 'import("/home/eduardojpanzo/Projects/Vaawel/smarttech-ui/node_modules/embla-carousel/components/index").EmblaCarouselType'.ts(2322)

Codesandbox/StackBlitz link

No response

Logs

No response

System Info

node version: v20.15.1
npm version: 10.7.0

Before submitting

• [X] I've made research efforts and searched the documentation
• [X] I've searched for existing issues

[Chr1s0Blood]

same issue here

[Chr1s0Blood]

Temporary: (this is a f***** sin)

plugins={[
        plugin.current as any
      ]}
      onMouseEnter={plugin.current.stop}
      onMouseLeave={plugin.current.play as any}

[alivault]

This is a version mismatch error. Set the version for both embla-carousel-react and embla-carousel-autoplay to latest which is ^8.1.7. So your dependencies should look like this:

    "embla-carousel-autoplay": "^8.1.7",
    "embla-carousel-react": "^8.1.7",

[eduardojpanzo]

This is a version mismatch error. Set the version for both embla-carousel-react and embla-carousel-autoplay to latest which is ^8.1.7. So your dependencies should look like this:

    "embla-carousel-autoplay": "^8.1.7",
    "embla-carousel-react": "^8.1.7",

Hello, I also tried this and it didn't work. What I did was change the typing (I added any ) in the base component (components/ui/carousel)

type CarouselPlugin = UseCarouselParameters[1] | any;

[alivault]

You have to run npm install after you change the versions in your package.json file.

[eduardojpanzo]

@alivault yes! I do..