Warning: `Infinity` is an invalid value for the `height`

Created on 28 February 2025, 25 days ago

Overview

Initially when we drag and drop a component in canvas in console we get a warning.

hook.js:608 Warning: `Infinity` is an invalid value for the `height` css style property. Error Component Stack
    at div (<anonymous>)
    at chunk-WSLF4LMB.js?v=c1ffb393:80:11
    at chunk-WSLF4LMB.js?v=c1ffb393:61:11
    at chunk-N2XEZRHB.js?v=c1ffb393:43:13
    at chunk-ZWGNZLV7.js?v=c1ffb393:995:13
    at @radix-ui_themes.js?v=c1ffb393:856:38
    at Provider (chunk-N2XEZRHB.js?v=c1ffb393:89:15)
    at Provider (chunk-N2XEZRHB.js?v=c1ffb393:89:15)
    at Provider (chunk-N2XEZRHB.js?v=c1ffb393:89:15)
    at Popper (chunk-RIUCQ242.js?v=c1ffb393:2200:11)
    at Menu (chunk-NQLF4ZLJ.js?v=c1ffb393:1406:11)
    at Provider (chunk-N2XEZRHB.js?v=c1ffb393:89:15)
    at ContextMenu (chunk-ZWGNZLV7.js?v=c1ffb393:959:11)
    at ContextMenu.Root (<anonymous>)
    at ComponentContextMenu (ComponentContextMenu.tsx:153:3)
    at ComponentOverlay (ComponentOverlay.tsx:94:11)
    at div (<anonymous>)
    at RegionOverlay (RegionOverlay.tsx:25:3)
    at div (<anonymous>)
    at ViewportOverlay (ViewportOverlay.tsx:31:11)
    at div (<anonymous>)
    at div (<anonymous>)
    at Viewport (Viewport.tsx:31:11)
    at ComponentHtmlMapProvider (DataToHtmlMapContext.tsx:51:8)
    at Preview (Preview.tsx:37:18)

Steps to reproduce

1. Reload page
2. Drag and drop a component
3. Check the console for warning

Proposed resolution

In ComponentOverlay.tsx and SlotOverlay.tsx we should check if number is finite or not. Something like this maybe

        style={{
          display: initialized ? '' : 'none',
          height: isFinite(rect.height * canvasViewPortScale)
            ? rect.height * canvasViewPortScale
            : 'auto',
          width: isFinite(rect.width * canvasViewPortScale)
            ? rect.width * canvasViewPortScale
            : 'auto',
          top: isFinite(elementOffset.verticalDistance * canvasViewPortScale)
            ? elementOffset.verticalDistance * canvasViewPortScale
            : 0,
          left: isFinite(elementOffset.horizontalDistance * canvasViewPortScale)
            ? elementOffset.horizontalDistance * canvasViewPortScale
            : 0,
        }}
      style={{
        height: isFinite(elementRect.height * canvasViewPortScale)
          ? elementRect.height * canvasViewPortScale
          : 'auto',
        width: isFinite(elementRect.width * canvasViewPortScale)
          ? elementRect.width * canvasViewPortScale
          : 'auto',
        top: isFinite(elementOffset.verticalDistance * canvasViewPortScale)
          ? elementOffset.verticalDistance * canvasViewPortScale
          : 0,
        left: isFinite(elementOffset.horizontalDistance * canvasViewPortScale)
          ? elementOffset.horizontalDistance * canvasViewPortScale
          : 0,
      }}

User interface changes

🐛 Bug report
Status

Active

Version

0.0

Component

Theme builder

Created by

🇮🇳India omkar-pd

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

  • Issue created by @omkar-pd
  • 🇮🇳India divyansh.gupta Jaipur

    Working on it.

  • 🇮🇳India meghasharma

    I tested this issue locally and found that updating only ComponentOverlay.tsx resolved the warning. The issue occurred because an Infinity value was being assigned to the height CSS property. After modifying ComponentOverlay.tsx to ensure only finite and positive values using isFinite(), the warning no longer appears when dragging and dropping a component.

    To fix this, update the style attribute at line number 261 in the ComponentOverlay.tsx file. This ensures rect.height * canvasViewPortScale is a valid finite number before assigning it to height.

    style={{
      display: initialized ? '' : 'none',
      height: isFinite(rect.height * canvasViewPortScale) && rect.height * canvasViewPortScale > 0
        ? rect.height * canvasViewPortScale
        : 'auto',
      width: isFinite(rect.width * canvasViewPortScale) && rect.width * canvasViewPortScale > 0
        ? rect.width * canvasViewPortScale
        : 'auto',
      top: isFinite(elementOffset.verticalDistance * canvasViewPortScale)
        ? elementOffset.verticalDistance * canvasViewPortScale
        : 0,
      left: isFinite(elementOffset.horizontalDistance * canvasViewPortScale)
        ? elementOffset.horizontalDistance * canvasViewPortScale
        : 0,
    }}
    
  • 🇮🇳India meghasharma

    @divyansh.gupta Are you working on it?

  • 🇧🇪Belgium wim leers Ghent 🇧🇪🇪🇺

    I think >3 days of silence is enough to assume that's not the case.

  • 🇮🇳India meghasharma

    I have updated the merge request to resolve the console error. Now, when we drag and drop a component in the canvas, no warning appears in the console. Please review and let me know if any further changes are needed. Thanks!

  • Pipeline finished with Failed
    22 days ago
    Total: 1072s
    #438720
  • 🇮🇳India omkar-pd

    This will not solve the issue for slots (one col, two col). Changes should be made in SlotOverlay.tsx to also solve that issue.

  • 🇮🇳India divyansh.gupta Jaipur

    @meghasharma
    Previous two days were weekends so I was not active over here. Also i was working on it today and did not see new messages in this issue lately, but now that you have solved this issue its fine.

  • 🇮🇳India divyansh.gupta Jaipur

    Changed the state by mistake.

  • 🇮🇳India meghasharma

    Updated MR to resolve the console error for one and two column components. Let me know if any further adjustments are needed.
    Thanks @omkar-pd

  • Pipeline finished with Failed
    21 days ago
    Total: 1117s
    #439058
  • 🇧🇪Belgium wim leers Ghent 🇧🇪🇪🇺

    The issue occurred because an Infinity value was being assigned to the height CSS property.

    How can this happen? 🤔

  • 🇮🇳India meghasharma

    Yes @wim leers, This can happen when rect.height * canvasViewPortScale results in Infinity. This usually occurs if rect.height has an extremely large value or if canvasViewPortScale is not properly defined.

  • 🇮🇳India omkar-pd

    Code Looks good. But need approval from code owner. so keeping this in Needs Review.

  • 🇺🇸United States hooroomoo

    Left a suggestion

  • 🇺🇸United States hooroomoo

    Marking stable blocker because it's a long and disruptive console warning

  • 🇮🇳India meghasharma

    Tried conditionally rendering the div using {initialized &&

    ...

    } instead of just applying display: none, but the issue persists. The console still shows the 'Infinity' warning for height. Keeping the original approach with isFinite checks seems to work.

Production build 0.71.5 2024