builder
builder copied to clipboard
@builder.io/widgets carousel issue with slideCount prop
Describe the bug When using the carousel widget, I get this warning in my console:
Warning: React does not recognize the `slideCount` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `slidecount` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
at div
at PrevArrow (/Users/ersin/projects/underoutfit/node_modules/@builder.io/widgets/node_modules/react-slick/lib/arrows.js:52:5)
at div
at InnerSlider (/Users/ersin/projects/underoutfit/node_modules/@builder.io/widgets/node_modules/react-slick/lib/inner-slider.js:70:5)
at Slider (/Users/ersin/projects/underoutfit/node_modules/@builder.io/widgets/node_modules/react-slick/lib/slider.js:60:5)
at div
at CarouselComponent (/Users/ersin/projects/underoutfit/node_modules/@builder.io/widgets/dist/lib/components/Carousel.js:34:47)
at LoadableImpl (/Users/ersin/projects/underoutfit/node_modules/next/dist/shared/lib/loadable.js:89:9)
at div
at BuilderBlock (/Users/ersin/projects/underoutfit/node_modules/@builder.io/react/dist/builder-react.cjs.js:1:9718)
at div
at BasicProvider (/Users/ersin/projects/underoutfit/node_modules/@emotion/core/dist/emotion-element-c423a2c0.cjs.dev.js:45:32)
at EmotionCssPropInternal
at t (/Users/ersin/projects/underoutfit/node_modules/@builder.io/react/dist/builder-react.cjs.js:1:18705)
at div
at div
at VariantsProvider (/Users/ersin/projects/underoutfit/node_modules/@builder.io/react/dist/builder-react.cjs.js:1:23860)
at BuilderContent (/Users/ersin/projects/underoutfit/node_modules/@builder.io/react/dist/builder-react.cjs.js:1:24952)
at div
at t (/Users/ersin/projects/underoutfit/node_modules/@builder.io/react/dist/builder-react.cjs.js:1:37287)
at Page (webpack-internal:///./pages/[[...page]].tsx:55:17)
at main
at Layout (webpack-internal:///./components/Layout.tsx:20:19)
at MyApp (webpack-internal:///./pages/_app.tsx:19:18)
at StyleRegistry (/Users/ersin/projects/underoutfit/node_modules/styled-jsx/dist/index/index.js:448:36)
at AppContainer (/Users/ersin/projects/underoutfit/node_modules/next/dist/server/render.js:298:29)
at AppContainerWithIsomorphicFiberStructure (/Users/ersin/projects/underoutfit/node_modules/next/dist/server/render.js:327:57)
at div
at Body (/Users/ersin/projects/underoutfit/node_modules/next/dist/server/render.js:614:21)
It seems to be due to some kind of bug or unexpected behavior in the React Slick library. The author of that library posted a workaround here, but I don't know enough about React Slick to understand its meaning: https://github.com/akiran/react-slick/issues/1195#issuecomment-390383615
I think maybe something in these lines need to be changed? Maybe? https://github.com/BuilderIO/builder/blob/d968fafb3e01da9cf1718a7ce7d6addde4e2c495/packages/widgets/src/components/Carousel.tsx#L107-L126
The warning appears to be the root of a hydration error that I keep seeing in my content items.
cc: @samijaber
To Reproduce Steps to reproduce the behavior:
- Use the carousel from
@builder.io/widgets. - Observe the warning in the console.
Expected behavior There shouldn't be any warning when using the carousel.
Additional context Content item: https://builder.io/content/a8790b93f30c433aa5318bfde636504b
Same issue here, any update on this?
Is there any performance or behaviour issue with using the Carousel, besides seeing the warning in the console?
Any update on this?
Still happening on 3.2.9.