Leva 0.9.35 color picker error : Cannot read properties of null (reading 'getBoundingClientRect')

[Sean-Bradley]

When pressing the color picker coloured square, a JS error occurs. ([email protected])

In Chrome and Edge, the error is,

react-dom.development.js:22878  Uncaught TypeError: Cannot read properties of null (reading 'getBoundingClientRect')
    at leva.esm.js:137:30
    at commitHookEffectListMount (react-dom.development.js:23189:26)
    at commitLayoutEffectOnFiber (react-dom.development.js:23307:17)
    at commitLayoutMountEffects_complete (react-dom.development.js:24727:9)
    at commitLayoutEffects_begin (react-dom.development.js:24713:7)
    at commitLayoutEffects (react-dom.development.js:24651:3)
    at commitRootImpl (react-dom.development.js:26862:5)
    at commitRoot (react-dom.development.js:26721:5)
    at performSyncWorkOnRoot (react-dom.development.js:26156:3)
    at flushSyncCallbacks (react-dom.development.js:12042:22)

In FireFox, the error is written differently,

Uncaught TypeError: wrapperRef.current is null
    usePopin leva.esm.js:137
    React 24
    render vector-plugin-6f82aee9.esm.js:466
    useRenderRoot leva.esm.js:2172
    React 8
    workLoop scheduler.development.js:266
    flushWork scheduler.development.js:239
    performWorkUntilDeadline scheduler.development.js:533
    js scheduler.development.js:571
    js scheduler.development.js:633
    __require chunk-I4MZPW7S.js:8
    js index.js:6
    __require chunk-I4MZPW7S.js:8
    React 2
    __require chunk-I4MZPW7S.js:8
    js React
    __require chunk-I4MZPW7S.js:8
    js React
    __require chunk-I4MZPW7S.js:8
    <anonymous> react-dom_client.js:37

The error does not happen with [email protected], but does occur in [email protected]

E.g., This is a minimal example. Press the green square in the Leva panel and view the browser console.

https://k6m8gm-5173.csb.app/

react 18.3.1
react-dom 18.3.1
leva 0.9.35

I have also tried react 18.2.0 and the error still occurs.

This error occurs when using a bundler locally. I have tried Vite, React-Scripts, R3F-Pack and WebPack.

The error also occurs when using the newer CodeSandbox DevBox IDE, but not the legacy Sandbox IDE.

This CodeSandbox DevBox link below demonstrates the problem, it is a Vite project.

https://codesandbox.io/p/devbox/leva-color-picker-k6m8gm?file=%2Fsrc%2Findex.jsx

And here is a zip of the mini Vite project.
sandbox.zip

unzip it,
cd into folder,

npm install
npm run dev 

Open http://localhost:5173/

And this is the minimal script.

import React from 'react'
import { createRoot } from 'react-dom/client'
import { useControls } from 'leva'

function App() {
    const color = useControls({
        value: 'lime'
    })

    return (
        <div style={{ backgroundColor: color.value }}>
            <h1>Hello, world!</h1>
            <h2>Time is {new Date().toLocaleTimeString('en-US')}.</h2>
        </div>
    )
}

createRoot(document.getElementById('root')).render(<App />)

[Jbmanllr]

Same problem here.

[Kalekdan]

Also encountering this issue

[Kreshnik]

It is specifically this line in the usePopin function for me.

const {
  height
} = wrapperRef.current.getBoundingClientRect();

[l4j3b]

Same :(

[laileihuang]

same

[ericrius1]

same here

[Sean-Bradley]

Here is a band-aid until there is a fix.

Add an overrides to your package.json to lower the @radix-ui/react-portal version which Leva imports as a dependency.

  "overrides": {
    "leva": {
      "@radix-ui/react-portal": "1.0.2"
    }
  }

Run,

npm install

# vite
npm run dev

# react-scripts | r3f-pack
npm start 

[Jbmanllr]

Here is a band-aid until there is a fix.

Add an overrides to your package.json to lower the @radix-ui/react-portal version which Leva imports as a dependency.

  "overrides": {
    "leva": {
      "@radix-ui/react-portal": "1.0.2"
    }
  }

Run,

npm install

npm run dev

Thanks !

PNPM version:

"pnpm": { "overrides": { "_comment": "Temporary fix for leva control color selection. See: https://github.com/pmndrs/leva/issues/508#issuecomment-2228569482", "leva>@radix-ui/react-portal": "1.0.2" } },

[Mdelacruzmelo]

It's working with previous version: 0.9.34

[MagnesiumDev]

Im on 0.9.35 and have this issue, but the band-aid solution works

[golden-fruit]

it work!
"overrides": { "leva": { "@radix-ui/react-portal": "1.0.2" } }

[mz8i]

PNPM version:

"pnpm": { "overrides": { "_comment": "Temporary fix for leva control color selection. See: https://github.com/pmndrs/leva/issues/508#issuecomment-2228569482", "leva>@radix-ui/react-portal": "1.0.2" } },

Out of curiosity, how did you get the _comment to work, though? I get:

ERR_PNPM_INVALID_SELECTOR Cannot parse the "_comment" selector

[niccolofanton]

If you are using yarn

"resolutions": {
    "@radix-ui/react-portal": "1.0.2"
}

and then run: yarn

[Tom-Sloan]

Band aid still works. Thanks @Sean-Bradley

[izmaelmag]

When official update?

[ektogamat]

Same here guys ;)

[fanchen4139]

If you are using yarn如果您使用的是纱线

"resolutions": {
    "@radix-ui/react-portal": "1.0.2"
}

and then run: yarn然后运行： yarn

pnpm should do this as well