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: akiran/react-slick#1642

Please watch.