[Bug?]: Setting a Signal in ResizeObserver Breaks in dev

[sabercoy]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

Setting a signal inside ResizeObserver API causes screen to flash and blank null errors in console.

Expected behavior 🤔

It behaves fine in normal SolidJS (both dev and build)
It behaves fine in SolidStart (just the build)
I expect it to behave fine in SolidStart dev mode

Steps to reproduce 🕹

1. Create a new SolidStart project
2. Add this code to a page

import { createSignal, Index, onMount } from "solid-js";

const getSquaresPerRow = (containerWidth: number, squareMinWidth: number, gap: number) => {
  return Math.floor((containerWidth + gap) / (squareMinWidth + gap))
}

export default function Home() {
  const [squares] = createSignal(Array(20).fill(0))
  const [test, setTest] = createSignal(0)
  let containerRef!: HTMLDivElement

  const onContainerResize = (entries: ResizeObserverEntry[]) => {
    const newSquaresPerRow = getSquaresPerRow(entries[0].contentRect.width, 260, 2)
    setTest(newSquaresPerRow)
  }

  onMount(() => {
    new ResizeObserver(onContainerResize).observe(containerRef)
  })

  return (
    <div ref={containerRef}>
      <div style={{ 'display': 'grid', 'gap': '2px', 'grid-template-columns': `repeat(${test()}, 1fr)`}}>
        <Index each={squares()}>{square => <div style={{ 'background-color': 'gray', 'aspect-ratio': 1 }}></div>}</Index>
      </div>
    </div>
  );
}

3. Open the console, should have errored by then, in case not resize the viewport.

Context 🔦

I am trying to use ResizeObserver in dev without getting errors

Your environment 🌎

Chrome on Fedora Linux
used Bun

[lxsmnsyc]

Can you check first if containerRef has an element before observing?

[sabercoy]

Can you check first if containerRef has an element before observing?

it does

[g-mero]

I encountered the same issue. It worked fine for a while after rebooting my PC. However, the problem reappeared when I refreshed the page.

[sabercoy]

I encountered the same issue. It worked fine for a while after rebooting my PC. However, the problem reappeared when I refreshed the page.

in the meantime, I found you can disable devOverlay in app config

[g-mero]

In my case. The issue happened when observer a visual 'overflow-x' element.

[g-mero]

try use https://primitives.solidjs.community/package/resize-observer#createResizeObserver, it works fine