useFrame hook not working

[sewonist]

Hi

I just keep working with fiber and mind-ar.

I've add 3d model and animation with useFrame. Unfortunatley, useFrame hook didn't work with below error.

Uncaught Error: R3F: Hooks can only be used within the Canvas component!

When I put useFrame directly inside Canvas it was working. But not working insdie ARView.

I know ARView wrapped Canvas. So it's really weird.

Can you use useFrame inside ARView?

[tommasoturchi]

Hi sewonist,
Uhm this is weird, it supposed to work since as you noticed, ARView is just a wrapper over the @react-three/fiber Canvas. Are you using useFrame inside a component that is instantiated inside the ARView? Can you share an example? I tried replicating it inside the face-tracking example and it looks like it's working.
Cheers,

Tommaso

[sewonist]

Hi.

I found reason. It is occurred when using latest threejs and fiber. It works with fiber 7.0.26 but doesn't work with fiber 8.8.10. I don't know why. Fiber should be changed something. I will research more.

[sewonist]

Hi Tommaso,

I figure out this issue. I've updated dependencies in react-three-mind and rebuild it. And I removed dependencies for react-three-mind in my project. I use just react-three-mind package. Now it works for me. I commit it to forked my repositories.
Cheers,

Sewon

[tommasoturchi]

Ok, I've updated the dependencies on the main repository too and changed the code accordingly (the latest version of @react-three/fiber removed attachObjects in favour of attach). Closing the issue.

[samueljoos]

Removing the r3f dependency does not work for me.
Module not found: Can't resolve '@react-three/drei'
Which seems kind of logical.

I'm using nextjs with node 17.0.1

[samueljoos]

Update: it works when using npm but not when using yarn.

[tommasoturchi]

I definitely need to look into this. I'm still experimenting with the new PR for mind-ar mentioned here #4 that might improve compatibility across the board, will keep you posted, I'm reopening the issue to remind myself :-)

[sewonist]

It should be package version issue. Check @react-three/drei and @react-three/fiber version in react-three-mind and your prokect. Normally, our project install higher verison than reac-three-mind. So I've set my package.json like below.

(my project package.json dependencies)

I remove ^ and install same version with react-three-mind dependencies. I'm not sure it is right way. But it works for me.