Uncaught TypeError: subscribe is not a function at web.js of react-three-fiber at useEffect(() => { const unsubscribe = subscribe(ref, renderPriority); return () => unsubscribe(); }, [renderPriority]);

[Parjanya7]

Issue is, when I use useRender method on a reference of a , It does not render anything on page, page comes blank. When I remove the useRender method from the code, the page renders.

I dont get to know if the issue is of ref of react or is it the issue of useRender method.

I think, it is issue of react-three-fiber in web.js file, as it shows Uncaught TypeError: subscribe is not a function at web.js of react-three-fiber when I open console.

Please guide me through.
Thank you.

[drcmda]

it has been renamed to useFrame

[Parjanya7]

Firstly, I am big fan Paul sir. I cannot believe you messaged.

I guess, the issue is of react, not of useRender or useFrame. Because both the methods are rendering a blank page. The ref.current is undefined as first when the page gets rendered, but when I hover over it, it gets reference of . It is in case of ref created using useRef(). Using React.creatRef(), the ref is always null, initially and when i hover over it.

I am not getting what I am missing. Or what to do instead.

Please guide me through.

[drcmda]

a codesandbox would be best, drop your code in there, make it run as best as you can, i'll have a look then

[Parjanya7]

Sure sir, I'll do it. Thank you so much for your valuable response.

[likethemammal]

Not sure my setup was the same, but I was getting this error too. Figured out the issue for myself, might be the same issue for others.

Since I'm new to react-three-fiber, reading through the first example I assumed I could combine the individual Thing example component that exports a mesh with the <Canvas> component, inside the component function that calls useFrame. So something like this:

const Thing = () => {
  const ref = useRef()

  useFrame(() => {
    // this causes an error, even empty
  })

  return <Canvas>
    <mesh
      ref={ref}
    >
      ...
    </mesh>
  </Canvas>
}

After digging through the source I realized useFrame depends on getting subscribe from context using useContext earlier in execution. Again being a newbie to this lib, I then realized that <Canvas> must be the provider for that context which is why calling useFrame (which tries to call subscribe) inside a component that hasnt been rendered inside a Canvas provider would throw this error.

Basically, for those that dont know, follow the example more exactly. Create a separate Thing component to be rendered inside a Canvas.

Maybe the docs could be clearer in that first example around why Canvas is needed as a Provider when it comes to useFrame. Also, great work on this library 👊

[drcmda]

it's in the docs, but i think we could throw some warning, or even allow it if you only have a single canvas. gets more complex if you have multiple.

[drcmda]

warnings are done. allowing it isn't feasible imo.