search

BuilderIO / builder

Visual Development for React, Vue, Svelte, Qwik, and more
https://builder.io
MIT License
7.26k stars 897 forks source link

@builder.io/widgets carousel issue with slideCount prop #1312

Open ersinakinci opened 1 year ago

ersinakinci commented 1 year ago

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:

  1. Use the carousel from @builder.io/widgets.
  2. 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

Caperious commented 1 year ago

Same issue here, any update on this?

samijaber commented 1 year ago

Is there any performance or behaviour issue with using the Carousel, besides seeing the warning in the console?

jcfuentesglobant commented 1 year ago

Any update on this?

TheDevMinerTV commented 3 weeks ago

Still happening on 3.2.9.