useHelper for spotlight

[malmualla]

Am trying to add helper for the spotLight but its throwing back this error!

react-three-fiber.esm.js:1340 Uncaught R3F hooks can only be used within the Canvas component!

const Lights = ()=>{
  const light = useRef()
  useHelper(light, SpotLightHelper, 'cyan')
  return(
  <group>
   <ambientLight />
   <spotLight ref={light}  position={[50, 40, 40]} castShadow/>
  </group>
  )
}

I couldn't figure it our from the Drei documentation, any suggestions ?

[drcmda]

its probably your build system. im seeing this error with vite all the time now. the helper works otherwise: https://codesandbox.io/s/v6-adaptive-regression-gf5dn?file=/src/App.js

[malmualla]

First I would like to thank you Paul for all the amazing work you've done so far! I hope I won't be coming back a lot here with my issue as am starting my new APP which will be integrated with PHP (wordpress theme).

Am not sure if my App class has to do anything with the Error but I just wanted to share it for quick look

function App() {
  return (
   <>
   <Canvas colorManagement concurrent shadowMap camera={{ position: [0, -0, 5], fov:75}} >
   <Suspense fallback={<Loader />}>
     <Lights />
     <Sky />
     <Floor />
     <Model />
     </Suspense>
    </Canvas>
   </>
  );
}
export default App;

I tried to remove / add / upgrade my dependencies but wasn't lucky with that
here are my yarn dependencies

 "dependencies": {
    "@react-three/drei": "^4.0.1",
    "@react-three/fiber": "^6.0.1",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "react-three-fiber": "^5.3.22",
    "three": "^0.126.1",
    "web-vitals": "^1.0.1"
  }

[malmualla]

Your right I copied my project to your sandbox it worked perfectly, ill have to work on that.

Thank you

[Ahmed-UPEC]

I'm using NextJS have you find a solution for the probem ?

[drcmda]

the error can only mean two things, either the hook really is outside canvas, which it cannot

const foo = useThree()
return <Canvas>...</Canvas>

or you somehow end up with multiple react and or r3f in the end-bundle, usually due to misspelled imports or conflicting versions in package.json.