Uncaught Invariant Violation error after resize

[Wooody82]

Hi, I got this error. If we resize the window and then we do swipe for the last slide and then resize the window again for full size.

react.development.js:88 Uncaught Invariant Violation: React.cloneElement(...): The argument must be a React element, but you passed undefined. at invariant (webpack:///./node_modules/react/cjs/react.development.js?:88:15) at Object.cloneElement (webpack:///./node_modules/react/cjs/react.development.js?:840:51) at Object.cloneElementWithValidation [as cloneElement] (webpack:///./node_modules/react/cjs/react.development.js?:1782:33) at MagicSliderDots.render (webpack:///./node_modules/react-magic-slider-dots/dist/index.es.js?:158:157) at finishClassComponent (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:14741:31) at updateClassComponent (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:14696:24) at beginWork (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:15644:16) at performUnitOfWork (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:19312:12) at workLoop (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:19352:24) at HTMLUnknownElement.callCallback (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:149:14)

[patricktran]

Is this reproducible on the demo page? https://patricktran.github.io/react-magic-slider-dots/

If not, please provide a JSFiddle or CodeSandbox example.

[Wooody82]

Hi, Thank you for your answer. Its working fine on https://patricktran.github.io/react-magic-slider-dots/ , I think because you have one slide on all sizes. no breakpoint there. ( setting in slick slide) I could not fix react like your demo on JSFiddle :( If you add breakpoint for ex on desktop 3 and on mobile 2 slides then resize to mobile and slide to the end and then change the window size to desktop u will see the error then.

[patricktran]

Ok was able to reproduce the issue and I am currently working on an update.

[patricktran]

@malasaad82 Can you please try out 1.2.0-beta.0
Would appreciate your help in testing it.

npm install react-magic-slider-dots@next

[MohammedAlasaad]

Hi @patricktran , Thanks, I have test it and its seems working fine and I did not get any error message. But the strange thing I got two dots active and sometime no dot active after resize to bigger window :)

Regards

[patricktran]

@Mohammedalasaad Please post your react-slick settings with the breakpoints defined. Also what's your total number of slides? I'd like to debug using your exact configuration.

[MohammedAlasaad]

Hi @patricktran , Here is my config: let itemsPerPage = 4

getSettings() { var settings = { dots: true, //dotsClass: "slick-dots-custom", infinite: this.isInfinite(), speed: 500, arrows: true, responsive: this.responsive, nextArrow: , prevArrow: , slidesToShow: this.itemsPerPage, slidesToScroll: this.itemsPerPage, beforeChange: () => this.beforeChange(), afterChange: () => this.afterChange(),
appendDots: (dots) => { return }
} return settings }

let responsive = [ { breakpoint: 900, settings: { slidesToShow: 3, slidesToScroll: 3, arrows: true } }, { breakpoint: 750, settings: { slidesToShow: 2, slidesToScroll: 2, arrows: true } }, { breakpoint: 600, settings: { slidesToShow: 2, slidesToScroll: 2, arrows: false } }, { breakpoint: 350, settings: { slidesToShow: 1, slidesToScroll: 1, arrows: false } }

]

[patricktran]

@Mohammedalasaad Thanks for uploading your config. My initial testing is showing that the root cause of this issue is a bug in the react-slick package. Notice in my GIF, I have magic-slider-dots turned off. However, under certain situations, react-slick is rendering the wrong number of dots and I can't navigate to the last slide.

[patricktran]

@Mohammedalasaad Here's another example of how I was able to reproduce the bug in react-slick. Notice that enable magic-slider-dots is turned off.

[patricktran]

I have opened an issue with react-slick: https://github.com/akiran/react-slick/issues/1642

Please watch.