Autoplay plugin issue - Githubissues

BerenBoden commented 1 year ago

Bug is related to

[x] embla-carousel-react
[x] embla-carousel-autoplay

Embla Carousel version

8.0.0-rc03

Embla Carousel Autoplay version

8.0.0-rc07

I have tried to add the Autoplay function to the useEmblaCarousel hook in this Showcase.tsx component:

import useEmblaCarousel from "embla-carousel-react";
import CallToAction from "./CallToAction";
import Autoplay from "embla-carousel-autoplay";
import "./App.css";

export default function Showcase() {
  const data = [
....
  ];

  const [emblaRef] = useEmblaCarousel({}, [Autoplay()]);

  return (
    <div
      className="relative w-full h-full xl:h-128 2xl:h-136 embla"
      ref={emblaRef}
    >
      <div className="embla__container h-full">
        {data.map(({ image }) => {
          return <CallToAction image={image} />;
        })}
      </div>
    </div>
  );
}

I am getting a type error, specifically the 'Autoplay()' function is a red underline that says:

  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: import("/home/bricky/projects/embla-issue/node_modules/embla-carousel/components/EmblaCarousel").EmblaCarouselType, OptionsHandler: import("/home/bricky/projects/embla-issue/node_modules/embla-carousel/components/OptionsHandler").OptionsHandlerType) => void' is not assignable to type '(embla: import("/home/bricky/projects/embla-issue/node_modules/embla-carousel-react/node_modules/embla-carousel/components/EmblaCarousel").EmblaCarouselType, OptionsHandler: import("/home/bricky/projects/embla-issue/node_modules/embla-carousel-react/node_modules/embla-carousel/components/OptionsHandler").OptionsHand...'.
        Types of parameters 'embla' and 'embla' are incompatible.
          Type 'import("/home/bricky/projects/embla-issue/node_modules/embla-carousel-react/node_modules/embla-carousel/components/EmblaCarousel").EmblaCarouselType' is not assignable to type 'import("/home/bricky/projects/embla-issue/node_modules/embla-carousel/components/EmblaCarousel").EmblaCarouselType'.
            The types returned by 'internalEngine()' are incompatible between these types.
              Type 'EngineType' is missing the following properties from type 'EngineType': ownerDocument, ownerWindowts(2322)
(alias) Autoplay(userOptions?: Partial<CreateOptionsType<OptionsType>> | undefined): AutoplayType
import Autoplay

There is an error in the console that says:

Uncaught TypeError: Cannot read properties of undefined (reading 'addEventListener')
    at Object.add (embla-carousel.esm.js:195:10)
    at Object.init (embla-carousel-autoplay.esm.js:43:16)
    at embla-carousel.esm.js:1269:44
    at Array.forEach (<anonymous>)
    at Object.init (embla-carousel.esm.js:1269:19)
    at activate (embla-carousel.esm.js:1326:33)
    at EmblaCarousel (embla-carousel.esm.js:1457:3)
    at embla-carousel-react.esm.js:16:24
    at commitHookEffectListMount (react-dom.development.js:23150:26)
    at commitPassiveMountOnFiber (react-dom.development.js:24926:13)
add @ embla-carousel.esm.js:195
init @ embla-carousel-autoplay.esm.js:43
(anonymous) @ embla-carousel.esm.js:1269
init @ embla-carousel.esm.js:1269
activate @ embla-carousel.esm.js:1326
EmblaCarousel @ embla-carousel.esm.js:1457
(anonymous) @ embla-carousel-react.esm.js:16
commitHookEffectListMount @ react-dom.development.js:23150
commitPassiveMountOnFiber @ react-dom.development.js:24926
commitPassiveMountEffects_complete @ react-dom.development.js:24891
commitPassiveMountEffects_begin @ react-dom.development.js:24878
commitPassiveMountEffects @ react-dom.development.js:24866
flushPassiveEffectsImpl @ react-dom.development.js:27039
flushPassiveEffects @ react-dom.development.js:26984
commitRootImpl @ react-dom.development.js:26935
commitRoot @ react-dom.development.js:26682
performSyncWorkOnRoot @ react-dom.development.js:26117
flushSyncCallbacks @ react-dom.development.js:12042
commitRootImpl @ react-dom.development.js:26959
commitRoot @ react-dom.development.js:26682
finishConcurrentRender @ react-dom.development.js:25981
performConcurrentWorkOnRoot @ react-dom.development.js:25809
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
The above error occurred in the <Showcase> component:
 at Showcase (http://localhost:5174/src/App.tsx?t=1686957356603:31:22)

CodeSandbox

- CodeSandbox. - Github.

Steps to reproduce

Go to main page, and see that there is an error in the console, and nothing is displayed on screen.
Remove Autoplay() from the useEmblaCarosuel hook so now it looks like: const [emblaRef] = useEmblaCarousel({}); and the page will display, and the error will go away.

Expected behavior

The Autoplay plugin should automatically scroll my slides every X amount of seconds.

Additional context

This happened when I was making a slide in my Next.js application, and I got the error when trying to add the Autoplay() plugin, then made a new Vite app to reproduce, and it still gives the same error.

davidjerleke commented 1 year ago

Hi @BerenBoden,

You should always match any plugin package version with the carousel package version. So upgrade your embla-carousel-react version to 8.0.0-rc07.

Other than that, please create a public CodeSandbox so I can access it:

Best, David