Preact 10.20 + @mui/x-data-grid v7 causes datagrid to appear multiple times in dev-mode, but not in preview-mode

[vsacom]

• Check if updating to the latest Preact version resolves the issue
  Using version: 10.20.2

Describe the bug

Environment: Preact 10.20.2 + Typescript 5.4.5 + Vite 5.2.9 + @mui/x-data-grid 7.2.0.

Using vite+preact in development mode, the x-data-grid appears multiple times on the page.
With the same setup, running vite --preview, the x-data-grid appears once as expected.

Bug report has been opened at @mui/mui-x, where maintainer has requested to open ticket here. Link to ticket: mui/mui-x#12829

To Reproduce

Codesandbox: https://codesandbox.io/p/devbox/datagridpro-test-7-2-0-47rlrc

Sample source code based on the codesandbox:
datagrid_720_preact.zip

With the sample source code, run:

1. npm install
2. npm run dev -> The output should have just one datagrid, but has multiple overlapping.
3. npm run preview --> The output appears as expected.

Expected behavior
The datagrid should appear just once

[rschristian]

Looks to be using NaN in a dependency array, might be related to #3954

---

Edit: Can confirm, preact/debug (correctly) throws an error upon encountering this, as it is not a valid usage at the moment (NaN != NaN, and we don't handle this).

Couple options to unblock you:

• More work, but strip out the error from preact/debug, specifically this block. You'll need to edit/patch the built (and minified) files, but this shouldn't be too hard to do.
• Disable preact/debug by disabling devToolsEnabled in your vite.config.js, i.e., preact({ devToolsEnabled: false }). This will disable all debug warnings & errors, so I'm not sure I'd recommend it.

[JoviDeCroock]

@rschristian maybe we should convert it to a console.warn rather than throwing an error, in libraries users can't change much but if it works they should just be warned.

[rschristian]

I agree, though in general I'd prefer if NaN wasn't (mis)used in this way.