React paginated rendering with embla carousel mapped components

Question

So I created a search page where you get result set displayed and have options to limit results to 10, 25, 50 and it applies pagination automatically if there are more results than displayed on page. It worked perfectly, but then I added new functionality on the result posts to be able to scroll through each posts pictures while in result page, for which I used embla carousel and also vanilla-lazyload. That worked really well by itself with no issues. But when regression testing the paging functionality using result count limit, any scenario where you reduce the limit and it has to remove some objects, the code fails with below error and repeats few times.

Uncaught TypeError: Cannot read property 'removeAllEvents' of undefined

The above error occurred in the EmblaCarouselReact component:

It seems the created components are calling some function after the objects are removed already.

Below is my piece of code which lists the posts conditionally.

searchResult = this.state.posts.map((post, index) => {
                    if((index + 1) >= this.state.pagination.show_from && (index + 1) <= this.state.pagination.show_to){
                                    return  <div key={post.id} className = 'post-container'>
                                                <div className='post-picture'>
                                                    {!post.object.pictures[0] ? <img src='/images/posts/default-test.jpg' alt="logo"></img>
                                                    :
                                                        <LazyImageProvider>
                                                            <Carousel>
                                                            {post.object.pictures.map((image, i) => (
                                                                <LazyImage aspectRatio={[10, 6.5]} src={image.pictureSmall} key={i} />
                                                            ))}
                                                            </Carousel>
                                                        </LazyImageProvider>
                                                    }
                                                </div>
                                            </div>
                    }
                })

I never had this problem before, but I am using a complete solution for this carousel from online article and thus don't know the inside outs of how it works in the back end. Hopefully someone knows an easy fix, thanks for your help. I can see that the carousel code is causing this, if you have alternative superiod carousel, I'm all ears.

The code base for the carousel and lazy load is: https://codesandbox.io/s/react-image-slider-d8sl1?file=/src/index.js

Answer 1

I don't know which version of EmblaCarouselReact you're using, but this is probably because the destruction of the Embla instance has been moved into the package core since version 1.2.11, and is now done automatically when the component unmounts.

So if you're using >= version 1.2.11 and destroying the carousel instance manually you'll have to remove it like so:

useEffect(() => {
  ...

  // You'll have to remove this line
  return () => embla && embla.destroy();
}, [embla]);

This was raised in issue 13 by one of my users.

Let me know if it helps.