React-three-fiber: useFrame drops "TypeError: subscribe is not a function" on Next.js

[talentlessguy]

When I try to use this line of code in a Next.js app, it drops an error:

  useFrame(() => (mesh.current.rotation.x = mesh.current.rotation.y += 0.01))

TypeError: subscribe is not a function

code sandbox

[drcmda]

see: https://github.com/react-spring/react-three-fiber#hooks

youre outside of the canvas context, so that useframe makes no sense. the doesnt canvas even exist at that point. or what if you have 2 canvases or more. it needs to be within to know the context.

[talentlessguy]

@drcmda could ya pls provide any example with propely working canvas? idk how to make it work properly ;-;

[drcmda]

again, you are using these hooks outside of the canvas. you can't, they are reliant on context. it's explained in the link i've sent you.

this:

useFrame(() => (mesh.current.rotation.x = mesh.current.rotation.y += 0.01));

  return (
    <Canvas gl2>

is not possible.

but this:

function Mesh() {
  const ref = useRef()
  useFrame(() => (mesh.current.rotation.x = mesh.current.rotation.y += 0.01));
  return <mesh ref={ref}> ...
}

function App() {
  return (
    <Canvas gl2>
      <Mesh />

will work.

it is just like context in react. the useContext hook can only be used within a provider.

[talentlessguy]

@drcmda oh, ok, now understand it

sorry for my stupidity :(

[drcmda]

nah, dont worry :-)