Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Cannot open joystick or color palette #512

Open
daysond opened this issue Aug 19, 2024 · 1 comment
Open

Cannot open joystick or color palette #512

daysond opened this issue Aug 19, 2024 · 1 comment

Comments

@daysond
Copy link

daysond commented Aug 19, 2024 •
edited
Loading 

  "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
Copy link

this should solve your issue: #508 (comment)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@daysond @Remi-Tribia