wadackel/react-stack-grid

Error in client console: Infinity is an invalid value for the height css style property

harrisonlo opened this issue · 9 comments

harrisonlo commented

Complete error in Chrome console:

Warning: `Infinity` is an invalid value for the `height` css style property.

Check the render method of `TransitionGroup`.

It didn't locate where that error comes from. It's simply a warning.js error. I'm getting this message after using react-stack-grid.

xfumihiro commented

Interestingly, the warning only shows when render stackgrid inside react-swipeable-views in my case.

polad commented

We have the same issue

gpinhey commented

The root of this issue is based on ctrlplusb/react-sizeme#120 where element-resize-detector injects a div into the DOM at a very low level, bypassing React. This causes react-sizeme to return a width of 0 for that instant when the DOM under react-stackgrid's node only consists of a 0-width div, so react-stackgrid lays out elements with 0 columns, resulting in a divide by 0.

This bug is ultimately harmless, as once React has a chance to mount the actual children as DOM nodes, react-sizeme re-evaluates and passes a non-zero width, so everything works out fine.

A zero check here should fix the warning message: https://github.com/tsuyoshiwada/react-stack-grid/blob/25e61df87d7ad112a1873a83899d53aa48b079a7/src/components/StackGrid.js#L225

  • 👍1
bilicio commented

Change the line 425 on the newer version of the file StackGrid.js, put any value of height instead of 0.

  • 👎1
Cantinaband commented

I had the same issue with react@16.8.4 and react-stack-grid@0.7.1.

Solved it by changing line 487 to:

var height = columnHeights.length ? Math.max.apply(Math, _toConsumableArray(columnHeights)) - gutterHeight : 0;

  • 👍1
indu95 commented

I'm using "react": "^17.0.0", "react-stack-grid": "^0.7.1", and this issue still persists and I see there is lag on screen because of this error, can anyone please let me know the solution how to resolve this? or any workarounds? @Cantinaband

Guaaan commented

I'm having the exact same problem on react "^18.2.0", "react-stack-grid": "^0.7.1". Has someone found a solution yet?

osomaher2020 commented

I've faced the same problem, and found the issue was the [array of elements] to be shown in the Slider is empty [ ]
So I enclosed the Slider by (items.length) condition like:

(items.length) &&
<>
    <Slider {...settings} className="pb-sm-5 mb-5 slick-slider-wrapper">
          .....................
    </Slider>
</>

Hope this may help

  • 👍4
CeciliaJorcin commented

I've faced the same problem, and found the issue was the [array of elements] to be shown in the Slider is empty [ ] So I enclosed the Slider by (items.length) condition like:

(items.length) &&
<>
    <Slider {...settings} className="pb-sm-5 mb-5 slick-slider-wrapper">
          .....................
    </Slider>
</>

Hope this may help

solved the problem for me! Thank you @osomaher2020!
I was getting client.js:1 Warning: NaN is an invalid value for the width css style property.