BuilderIO / BuilderIO/builder

@builder.io/widgets carousel issue with slideCount prop

Open
#1,312 4 comments 4 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
8.8k
Forks
1.2k
Avg merge
1d 6h
Merged PRs (30d)
17

Description

**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

Contributor guide

No contributing guide indexed for this repository

Research direction

Start with packages/widgets/src/components/Carousel.tsx around lines 107-126 and compare its carousel usage with the react-slick workaround linked in the issue. Reproduce the warning with the @builder.io/widgets carousel, then verify that the console warning and resulting hydration error no longer occur.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.