react-magic-slider-dots
react-magic-slider-dots copied to clipboard
patricktran
Uncaught Invariant Violation error after resize
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)
Is this reproducible on the demo page? https://patricktran.github.io/react-magic-slider-dots/
If not, please provide a JSFiddle or CodeSandbox example.
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.
Ok was able to reproduce the issue and I am currently working on an update.
@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
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
@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.
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: <NextArrow />,
prevArrow: <PrevArrow />,
slidesToShow: this.itemsPerPage,
slidesToScroll: this.itemsPerPage,
beforeChange: () => this.beforeChange(),
afterChange: () => this.afterChange(),
appendDots: (dots) => {
return <MagicSliderDots dots={dots} numDotsToShow={5} dotWidth={30} />
}
}
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 } }
]
@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.
@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.
I have opened an issue with react-slick: https://github.com/akiran/react-slick/issues/1642
Please watch.