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

Created on 28 February 2025, about 1 month 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

Production build 0.71.5 2024