search

pmndrs / leva

🌋 React-first components GUI
https://leva.pmnd.rs
MIT License
4.99k stars 198 forks source link

Cannot open joystick or color palette #512

Open daysond opened 2 months ago

daysond commented 2 months ago 
  "devDependencies": {
    "@vitejs/plugin-react": "4.3",
    "vite": "^5.4.1"
  },
  "dependencies": {
    "@react-three/drei": "^9.111.2",
    "@react-three/fiber": "^8.17.5",
    "leva": "^0.9.35",
    "react": "18.3",
    "react-dom": "18.3",
    "three": "^0.167.1"
  }

I am doing a tutorial and this is my code:

import { OrbitControls } from "@react-three/drei";
import { useControls } from "leva";

export default function Experience() {

    const {color, position} = useControls({
        position: {
            value: {x: -2, y: 0 },
            step: 0.01
        },
        color: "#ff0000"

    })

    console.log(color)

  return (
    <>
      <OrbitControls makeDefault />

      <directionalLight position={[1, 2, 3]} intensity={1.5} />
      <ambientLight intensity={0.5} />

      <mesh position={[position.x, position.y, 1]}>
        <sphereGeometry />
        <meshStandardMaterial color= {color} />
      </mesh>

      <mesh position-x={2} scale={1.5}>
        <boxGeometry />
        <meshStandardMaterial color="mediumpurple" />
      </mesh>

      <mesh position-y={-1} rotation-x={-Math.PI * 0.5} scale={10}>
        <planeGeometry />
        <meshStandardMaterial color="greenyellow" />
      </mesh>
    </>
  );
}

And whenever I click on the joystick or color, I got an error: Screenshot 2024-08-19 at 11 41 49 AM

Error when clicking on color:

chunk-GPLYVEWD.js?v=abca52b8:16659 Uncaught 
TypeError: Cannot read properties of null (reading 'getBoundingClientRect')
    at leva.js?v=abca52b8:8901:30
    at commitHookEffectListMount (chunk-GPLYVEWD.js?v=abca52b8:16904:34)
    at commitLayoutEffectOnFiber (chunk-GPLYVEWD.js?v=abca52b8:16992:23)
    at commitLayoutMountEffects_complete (chunk-GPLYVEWD.js?v=abca52b8:17976:17)
    at commitLayoutEffects_begin (chunk-GPLYVEWD.js?v=abca52b8:17965:15)
    at commitLayoutEffects (chunk-GPLYVEWD.js?v=abca52b8:17916:11)
    at commitRootImpl (chunk-GPLYVEWD.js?v=abca52b8:19349:13)
    at commitRoot (chunk-GPLYVEWD.js?v=abca52b8:19273:13)
    at performSyncWorkOnRoot (chunk-GPLYVEWD.js?v=abca52b8:18891:11)
    at flushSyncCallbacks (chunk-GPLYVEWD.js?v=abca52b8:9135:30)

chunk-CW27B3EL.js?v=abca52b8:47385 The above error occurred in the <Color> component:

    at Color (http://localhost:5173/@fs/Users/daysond/Desktop/threejs_tutorial/57-debug-a-r3f-application/node_modules/.vite/deps/leva.js?v=abca52b8:9040:3)
    at div
    at Styled.div
    at div
    at Styled.div
    at Row (http://localhost:5173/@fs/Users/daysond/Desktop/threejs_tutorial/57-debug-a-r3f-application/node_modules/.vite/deps/leva.js?v=abca52b8:6180:5)
    at ColorComponent (http://localhost:5173/@fs/Users/daysond/Desktop/threejs_tutorial/57-debug-a-r3f-application/node_modules/.vite/deps/leva.js?v=abca52b8:9105:7)
    at div
    at Styled.div
    at ControlInput (http://localhost:5173/@fs/Users/daysond/Desktop/threejs_tutorial/57-debug-a-r3f-application/node_modules/.vite/deps/leva.js?v=abca52b8:10060:5)
    at http://localhost:5173/@fs/Users/daysond/Desktop/threejs_tutorial/57-debug-a-r3f-application/node_modules/.vite/deps/leva.js?v=abca52b8:10297:3
    at div
    at Styled.div
    at div
    at Styled.div
    at http://localhost:5173/@fs/Users/daysond/Desktop/threejs_tutorial/57-debug-a-r3f-application/node_modules/.vite/deps/leva.js?v=abca52b8:10382:11
    at div
    at Styled.div
    at http://localhost:5173/@fs/Users/daysond/Desktop/threejs_tutorial/57-debug-a-r3f-application/node_modules/.vite/deps/leva.js?v=abca52b8:10772:3
    at LevaRoot (http://localhost:5173/@fs/Users/daysond/Desktop/threejs_tutorial/57-debug-a-r3f-application/node_modules/.vite/deps/leva.js?v=abca52b8:10739:5)
    at Leva (http://localhost:5173/@fs/Users/daysond/Desktop/threejs_tutorial/57-debug-a-r3f-application/node_modules/.vite/deps/leva.js?v=abca52b8:10854:5)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
chunk-GPLYVEWD.js?v=abca52b8:9145 Uncaught 
TypeError: Cannot read properties of null (reading 'getBoundingClientRect')
    at leva.js?v=abca52b8:8901:30
    at commitHookEffectListMount (chunk-GPLYVEWD.js?v=abca52b8:16904:34)
    at commitLayoutEffectOnFiber (chunk-GPLYVEWD.js?v=abca52b8:16992:23)
    at commitLayoutMountEffects_complete (chunk-GPLYVEWD.js?v=abca52b8:17976:17)
    at commitLayoutEffects_begin (chunk-GPLYVEWD.js?v=abca52b8:17965:15)
    at commitLayoutEffects (chunk-GPLYVEWD.js?v=abca52b8:17916:11)
    at commitRootImpl (chunk-GPLYVEWD.js?v=abca52b8:19349:13)
    at commitRoot (chunk-GPLYVEWD.js?v=abca52b8:19273:13)
    at performSyncWorkOnRoot (chunk-GPLYVEWD.js?v=abca52b8:18891:11)
    at flushSyncCallbacks (chunk-GPLYVEWD.js?v=abca52b8:9135:30)

client.ts:479 [vite] hot updated: /Experience.jsx

Error when clicking on joystick:

chunk-GPLYVEWD.js?v=abca52b8:16659 Uncaught TypeError: Cannot read properties of null (reading 'style')
    at leva.js?v=abca52b8:9239:29
    at commitHookEffectListMount (chunk-GPLYVEWD.js?v=abca52b8:16904:34)
    at commitLayoutEffectOnFiber (chunk-GPLYVEWD.js?v=abca52b8:16992:23)
    at commitLayoutMountEffects_complete (chunk-GPLYVEWD.js?v=abca52b8:17976:17)
    at commitLayoutEffects_begin (chunk-GPLYVEWD.js?v=abca52b8:17965:15)
    at commitLayoutEffects (chunk-GPLYVEWD.js?v=abca52b8:17916:11)
    at commitRootImpl (chunk-GPLYVEWD.js?v=abca52b8:19349:13)
    at commitRoot (chunk-GPLYVEWD.js?v=abca52b8:19273:13)
    at performSyncWorkOnRoot (chunk-GPLYVEWD.js?v=abca52b8:18891:11)
    at flushSyncCallbacks (chunk-GPLYVEWD.js?v=abca52b8:9135:30)
(anonymous) @ leva.js?v=abca52b8:9239
commitHookEffectListMount @ chunk-GPLYVEWD.js?v=abca52b8:16904
commitLayoutEffectOnFiber @ chunk-GPLYVEWD.js?v=abca52b8:16992
commitLayoutMountEffects_complete @ chunk-GPLYVEWD.js?v=abca52b8:17976
commitLayoutEffects_begin @ chunk-GPLYVEWD.js?v=abca52b8:17965
commitLayoutEffects @ chunk-GPLYVEWD.js?v=abca52b8:17916
commitRootImpl @ chunk-GPLYVEWD.js?v=abca52b8:19349
commitRoot @ chunk-GPLYVEWD.js?v=abca52b8:19273
performSyncWorkOnRoot @ chunk-GPLYVEWD.js?v=abca52b8:18891
flushSyncCallbacks @ chunk-GPLYVEWD.js?v=abca52b8:9135
flushSyncCallbacksOnlyInLegacyMode @ chunk-GPLYVEWD.js?v=abca52b8:9120
batchedUpdates$1 @ chunk-GPLYVEWD.js?v=abca52b8:18915
batchedUpdates @ chunk-GPLYVEWD.js?v=abca52b8:3579
dispatchEventForPluginEventSystem @ chunk-GPLYVEWD.js?v=abca52b8:7176
dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay @ chunk-GPLYVEWD.js?v=abca52b8:5478
dispatchEvent @ chunk-GPLYVEWD.js?v=abca52b8:5472
dispatchDiscreteEvent @ chunk-GPLYVEWD.js?v=abca52b8:5449
Show 17 more frames
Show lessUnderstand this error
chunk-CW27B3EL.js?v=abca52b8:47385 The above error occurred in the <Joystick> component:

    at Joystick (http://localhost:5173/@fs/Users/daysond/Desktop/threejs_tutorial/57-debug-a-r3f-application/node_modules/.vite/deps/leva.js?v=abca52b8:9218:3)
    at div
    at Styled.div
    at div
    at Styled.div
    at Row (http://localhost:5173/@fs/Users/daysond/Desktop/threejs_tutorial/57-debug-a-r3f-application/node_modules/.vite/deps/leva.js?v=abca52b8:6180:5)
    at Vector2dComponent (http://localhost:5173/@fs/Users/daysond/Desktop/threejs_tutorial/57-debug-a-r3f-application/node_modules/.vite/deps/leva.js?v=abca52b8:9378:7)
    at div
    at Styled.div
    at ControlInput (http://localhost:5173/@fs/Users/daysond/Desktop/threejs_tutorial/57-debug-a-r3f-application/node_modules/.vite/deps/leva.js?v=abca52b8:10060:5)
    at http://localhost:5173/@fs/Users/daysond/Desktop/threejs_tutorial/57-debug-a-r3f-application/node_modules/.vite/deps/leva.js?v=abca52b8:10297:3
    at div
    at Styled.div
    at div
    at Styled.div
    at http://localhost:5173/@fs/Users/daysond/Desktop/threejs_tutorial/57-debug-a-r3f-application/node_modules/.vite/deps/leva.js?v=abca52b8:10382:11
    at div
    at Styled.div
    at http://localhost:5173/@fs/Users/daysond/Desktop/threejs_tutorial/57-debug-a-r3f-application/node_modules/.vite/deps/leva.js?v=abca52b8:10772:3
    at LevaRoot (http://localhost:5173/@fs/Users/daysond/Desktop/threejs_tutorial/57-debug-a-r3f-application/node_modules/.vite/deps/leva.js?v=abca52b8:10739:5)
    at Leva (http://localhost:5173/@fs/Users/daysond/Desktop/threejs_tutorial/57-debug-a-r3f-application/node_modules/.vite/deps/leva.js?v=abca52b8:10854:5)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
console.error @ chunk-CW27B3EL.js?v=abca52b8:47385
overrideMethod @ console.js:288
logCapturedError @ chunk-GPLYVEWD.js?v=abca52b8:14036
update.callback @ chunk-GPLYVEWD.js?v=abca52b8:14056
callCallback @ chunk-GPLYVEWD.js?v=abca52b8:10511
commitUpdateQueue @ chunk-GPLYVEWD.js?v=abca52b8:10528
commitLayoutEffectOnFiber @ chunk-GPLYVEWD.js?v=abca52b8:17083
commitLayoutMountEffects_complete @ chunk-GPLYVEWD.js?v=abca52b8:17976
commitLayoutEffects_begin @ chunk-GPLYVEWD.js?v=abca52b8:17965
commitLayoutEffects @ chunk-GPLYVEWD.js?v=abca52b8:17916
commitRootImpl @ chunk-GPLYVEWD.js?v=abca52b8:19349
commitRoot @ chunk-GPLYVEWD.js?v=abca52b8:19273
performSyncWorkOnRoot @ chunk-GPLYVEWD.js?v=abca52b8:18891
flushSyncCallbacks @ chunk-GPLYVEWD.js?v=abca52b8:9135
flushSyncCallbacksOnlyInLegacyMode @ chunk-GPLYVEWD.js?v=abca52b8:9120
batchedUpdates$1 @ chunk-GPLYVEWD.js?v=abca52b8:18915
batchedUpdates @ chunk-GPLYVEWD.js?v=abca52b8:3579
dispatchEventForPluginEventSystem @ chunk-GPLYVEWD.js?v=abca52b8:7176
dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay @ chunk-GPLYVEWD.js?v=abca52b8:5478
dispatchEvent @ chunk-GPLYVEWD.js?v=abca52b8:5472
dispatchDiscreteEvent @ chunk-GPLYVEWD.js?v=abca52b8:5449
Show 21 more frames
Show lessUnderstand this error
chunk-GPLYVEWD.js?v=abca52b8:9145 Uncaught TypeError: Cannot read properties of null (reading 'style')
    at leva.js?v=abca52b8:9239:29
    at commitHookEffectListMount (chunk-GPLYVEWD.js?v=abca52b8:16904:34)
    at commitLayoutEffectOnFiber (chunk-GPLYVEWD.js?v=abca52b8:16992:23)
    at commitLayoutMountEffects_complete (chunk-GPLYVEWD.js?v=abca52b8:17976:17)
    at commitLayoutEffects_begin (chunk-GPLYVEWD.js?v=abca52b8:17965:15)
    at commitLayoutEffects (chunk-GPLYVEWD.js?v=abca52b8:17916:11)
    at commitRootImpl (chunk-GPLYVEWD.js?v=abca52b8:19349:13)
    at commitRoot (chunk-GPLYVEWD.js?v=abca52b8:19273:13)
    at performSyncWorkOnRoot (chunk-GPLYVEWD.js?v=abca52b8:18891:11)
    at flushSyncCallbacks (chunk-GPLYVEWD.js?v=abca52b8:9135:30)
Remi-Tribia commented 2 months ago

this should solve your issue: https://github.com/pmndrs/leva/issues/508#issuecomment-2239498515