Init event not fired in SSR (React / NextJS)

[StevenVerbiest]

Bug is related to

• [x] embla-carousel-react

Embla Carousel version

• v8.0.0-rc19

Describe the bug

The .on("init") event is not invoked when used in a useEffect in a SSR component.

CodeSandbox

https://stackblitz.com/edit/stackblitz-starters-syez5k?file=app%2FEmblaComponent.tsx https://stackblitzstarterssyez5k-c0ir--3000--f7aa08df.local-credentialless.webcontainer.io/

const [emblaRef, emblaApi] = useEmblaCarousel();

useEffect(() => {
  if (!emblaApi) return;

  emblaApi.on('init', () => {
    console.log('init');
  });
}, [emblaApi]);

Steps to reproduce

1. Open the Stackblitz webcontainer
2. Open the console
3. There is no 'init' log

The log is shown after a hot reload. If you see the init log, do a hard refresh.

Expected behavior

The init event should always fire.

[davidjerleke]

@StevenVerbiest I can't access the link you shared. Would you mind double checking it?

Best, David

[StevenVerbiest]

@davidjerleke I can't get the direct link to work for some reason, but do you have access to the source files? If so, you could open the project in a new tab (available on the top right of the page) and connect the project then (if needed).

[davidjerleke]

@StevenVerbiest thanks for pointing me to the source files, that worked. I believe you should read this to better understand why it's happening:

• init event in #379.
• SSR.

Best, David

[StevenVerbiest]

Thanks for the info. I'm also having some other issues related to SRR regarding to special layouts, but I won't go into detail since it's unrelated to this issue. I like Embla, but not supporting SSR is an issue for me, so I will sadly need to look for an alternative. Will definitely try Embla for my CSR projects and wil try to keep an eye for SRR support in the future. Cheers!

[davidjerleke]

@StevenVerbiest thanks. Although Embla doesn't run its script on the server, it still allows rendering the HTML and CSS on the server side.

• Duplicate of #202.