Can't import EmblaCaroouselType, EmblaOptionsType, EmblaPluginType from embla-carousel-react, embla-carousel-vue and embla-carousel-svelte

[proninyaroslav]

Bug is related to

• embla-carousel-react
• embla-carousel-vue
• embla-carousel-svelte
• embla-carousel-solid

Embla Carousel version

• v8.0.0-rc15

Describe the bug

Since version v8.0.0-rc15, ESLint says that the SliderPropsOptions type does not have a loop property. This happens to all properties that are in EmblaOptionsType:

Also because of this, useEmblaCarousel has the options argument type Partial<OptionsType> | undefined instead of EmblaOptionsType | undefined, which causes a linter error:

[davidjerleke]

Thanks @proninyaroslav,

I’ve noted this bug a couple of days ago and already started working on it. However, thanks for creating a bug report so I can connect it to a pull request and devs can track it 👍🏻.

Best,
David

[davidjerleke]

@proninyaroslav a bug fix for this was just released in v8.0.0-rc16. Try it out and let me know if it's working as expected.

[proninyaroslav]

@davidjerleke
Updated to v8.0.0-rc17 and still have this problem.

[davidjerleke]

@proninyaroslav then I suggest you create a CodeSandbox with your setup in order to demonstrate the problem. You didn’t provide one in your bug report but it’s a requirement as mentioned in the contribution guidelines.

[davidjerleke]

@proninyaroslav I think it's better to get the types directly from the main package. Because embla-carousel is a dependency, you can do this:

import { EmblaOptionsType } from 'embla-carousel'; // Get it like so
import useEmblaCarousel from 'embla-carousel-react';

I will remove the type re-exports from the library wrappers like embla-carousel-react, embla-carousel-vue etc. and will recommend the above demonstrated approach in the docs. This reduces the code complexity in the project significantly. This will be added to the docs here:

• Add TypeScript usage examples to the docs #658

Best,
David

[proninyaroslav]

@davidjerleke
It works, thank you.

[davidjerleke]

Turns out, this approach doesn’t work with pnpm so I need to solve this differently. Stay tuned.

[div-cowboy]

@davidjerleke Please let us know when the pnpm solution is ready 🙏

Appreciate all you do

[davidjerleke]

@div-cowboy, @proninyaroslav. I've added examples of how to import types to the docs. There's also information about how to do it with pnpm:

• api/options
• api/methods
• api/events
• api/plugins

Important

Remember to switch to the React tab if you're using embla-carousel-react etc.

[suiboli314]

With bun and shadcn for "embla-carousel-react": "^8.1.7",,
eslint (es2024) gives EmblaCarouselType not found in 'embla-carousel' eslint[import/named] when import { EmblaCarouselType } from "embla-carousel";.

But no complain if import type { EmblaCarouselType } from "embla-carousel";

Should I

install embla-carousel as a devDependency

as pnpm?

Edit:
It seems it is my eslint config issue.
With eslint: ^9 and some incompatible plugins ("next/core-web-vitals", "plugin:import/recommended", "plugin:jsx-a11y/recommended", "plugin:react-hooks/recommended"), recommend import { EmblaCarouselType } from "embla-carousel"; reports not found eslint[import/named].
With eslint: ^8, and "extends": ["eslint:recommended","next/core-web-vitals"], both import seems good.👍

[davidjerleke]

@suiboli314 yes, as the docs says: