Carousel Types Not Found After Updating to embla-carousel 8.0.0-rc18

[KaizelZero]

Issue Description

After updating to embla-carousel version 8.0.0-rc18, the carousel types are not being recognized. This issue seems to be affecting the carousel's functionality and type checking.

Steps to Reproduce

1. Update the embla-carousel package to version 8.0.0-rc18.
2. Observe that the carousel types (such as EmblaCarouselType, EmblaOptionsType, and EmblaPluginType) are not found.

Expected Behavior

The carousel types should be properly imported and recognized, allowing for the normal functioning of the carousel.

Actual Behavior

The carousel types are not found, leading to errors and malfunctioning of the carousel component.

Possible Fix

Update the import statement in the carousel component as follows:

Current Import Statement:

import  useEmblaCarousel, {
  type EmblaCarouselType as CarouselApi,
  type EmblaOptionsType as CarouselOptions,
  type EmblaPluginType as CarouselPlugin,
} from "embla-carousel-react"

Updated Import Statement:

import  {
  type EmblaCarouselType as CarouselApi,
  type EmblaOptionsType as CarouselOptions,
  type EmblaPluginType as CarouselPlugin,
} from "embla-carousel"

import useEmblaCarousel from "embla-carousel-react"

The new embla carousel update removed export { EmblaOptionsType, EmblaEventType, EmblaPluginType, EmblaCarouselType } from 'embla-carousel/index.ts'; from embla-carousel-react.

[SMUEric1127]

I don't know if it's something extra but it took me around 1 hour to figured out what is this error, so I will paste the error here so the search engine can route the user to this updated import!

#19 24.27 Type error: '"embla-carousel-react"' has no exported member named 'EmblaCarouselType'. Did you mean 'UseEmblaCarouselType'?
#19 24.27
#19 24.27   1 | import * as React from "react"
#19 24.27   2 | import useEmblaCarousel, {
#19 24.27 > 3 |   type EmblaCarouselType as CarouselApi,
#19 24.27     |        ^
#19 24.27   4 |   type EmblaOptionsType as CarouselOptions,
#19 24.27   5 |   type EmblaPluginType as CarouselPlugin,
#19 24.27   6 | } from "embla-carousel-react"
#19 24.35 error Command failed with exit code 1.
#19 24.35 info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
------
executor failed running [/bin/sh -c yarn build]: exit code: 1

[akynau]

Instead of installing the base package, I resolved the missing types with the following:

import useEmblaCarousel, {
  type UseEmblaCarouselType,
} from "embla-carousel-react";

type CarouselApi = UseEmblaCarouselType[1];
type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
type CarouselOptions = UseCarouselParameters[0];
type CarouselPlugin = UseCarouselParameters[1];

I feel like this is better than installing and managing embla-carousel in the client repo and instead let embla-carousel-react handle it. This is also tightly coupled with embla-carousel-react and if it's api changes, this should break with it, which feels right in this case.

With all that said, I'm not sure what the best practices are around this.

[kiikoh]

Instead of installing the base package, I resolved the missing types with the following:

import useEmblaCarousel, {
  type UseEmblaCarouselType,
} from "embla-carousel-react";

type CarouselApi = UseEmblaCarouselType[1];
type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
type CarouselOptions = UseCarouselParameters[0];
type CarouselPlugin = UseCarouselParameters[1];

I feel like this is better than installing and managing embla-carousel in the client repo and instead let embla-carousel-react handle it. This is also tightly coupled with embla-carousel-react and if it's api changes, this should break with it, which feels right in this case.

With all that said, I'm not sure what the best practices are around this.

This works great!

[nianiam]

Using the suggestion by @akynau I also had to change:

type CarouselProps = {
  opts?: CarouselOptions
  plugins?: CarouselPlugin  // <-- From CarouselPlugin[]
  orientation?: "horizontal" | "vertical"
  setApi?: (api: CarouselApi) => void
}

[WilliamWelsh]

This is going to need to be a PR because I installed via bun and was broken immediately for me

[codesjedi]

Using the suggestion by @akynau I also had to change:

type CarouselProps = {
  opts?: CarouselOptions
  plugins?: CarouselPlugin  // <-- From CarouselPlugin[]
  orientation?: "horizontal" | "vertical"
  setApi?: (api: CarouselApi) => void
}

this worked great, thanks

[L4Ph]

Using the suggestion by @akynau I also had to change:

type CarouselProps = {
  opts?: CarouselOptions
  plugins?: CarouselPlugin  // <-- From CarouselPlugin[]
  orientation?: "horizontal" | "vertical"
  setApi?: (api: CarouselApi) => void
}

Thanks! LGTM & worked!

[benjamin-guibert]

Same for me, it works this way, thanks for the workaround!

import useEmblaCarousel, {
  type UseEmblaCarouselType,
} from "embla-carousel-react";

type CarouselApi = UseEmblaCarouselType[1];
type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
type CarouselOptions = UseCarouselParameters[0];
type CarouselPlugin = UseCarouselParameters[1];

type CarouselProps = {
  opts?: CarouselOptions;
  plugins?: CarouselPlugin;
  orientation?: "horizontal" | "vertical";
  setApi?: (api: CarouselApi) => void;
};

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.