opacity property in <Rect/> occur error

• Hello, I’m using your React-Konva library and find it super easy and helpful!
• I just have 1 issue atm. everything worked fine until I add opacity={opacity} on Rect component.
• I also tried opacity="0.8"(which caused type error) and opacity={0.8} but it also caused exact same error. So I’m wondering is this my problem or konva opacity problem!
• I’d appreciate if you also let me know what I could do to fix it!
• FYL) rgba() worked fine to add opacity! But I’m asking just in case I’m missng something about opacity propery or any possible issues

Thanks a lot!

[Error]

[My Code]

const VerticallyDraggableDiv: React.FC<VerticallyDraggableDivProps> = ({
  x,
  y,
  width,
  height,
  handleDragging,
  handleDragEnd,
  borderColor,
  backgroundColor,
  text,
  fontColor,
  idx,
}) => {
  const [opacity, setOpacity] = useState(0.5);
  return (
    <Group
      x={x}
      y={y}
      draggable
      dragBoundFunc={(pos) => handleDragging({ pos })}
      onDragEnd={idx !== undefined && handleDragEnd ? (e) => handleDragEnd({ e, idx }) : undefined}
    >
      <Rect
        width={width}
        height={height}
        stroke={borderColor}
        strokeWidth={0.3}
        fill={backgroundColor}
        text={text}
        cornerRadius={2}
        opacity={opacity} // opacity is here!
      />
      <Text
        width={width}
        height={height}
        fill={fontColor}
        fontSize={20}
        align="center"
        verticalAlign="middle"
        text={text}
      />
    </Group>
  );
};

export default VerticallyDraggableDiv;

+Also my react-konva and konva versions are like below

    "konva": "^8.3.6",
    "react-konva": "^17.0.2-6",`

[lavrton]

I don’t know. This is why I need a demo. You don’t need to give access to your app or copy its code. Just make a small, reproducible demo. Simple stage with one rectangle. And set properties in a way when error is visible.

[lavrton]

Looks like Konva can’t handle the case, when size of the stage is 0. As a workaround, set minimum to 1.

const [ref, { width, height }] = useMeasure();
<Stage width={Math.max(1, width)} height={Math.max(1, height)}>

Closing, as extreme edge case. But I am happy to apply Pull Request to handle zero stage size correctly.