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.

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

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

Closed
Parjanya7 opened this issue Dec 4, 2019 · 7 comments

Comments

@Parjanya7
Copy link

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.

@Parjanya7 Parjanya7 changed the title Uncaught TypeError: subscribe is not a function at web.js of react-three-fiber Uncaught TypeError: subscribe is not a function at web.js of react-three-fiber at useEffect(() => { const unsubscribe = subscribe(ref, renderPriority); return () => unsubscribe(); }, [renderPriority]); Dec 4, 2019
@drcmda
Copy link
Member

drcmda commented Dec 4, 2019

it has been renamed to useFrame

@Parjanya7
Copy link
Author

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

drcmda commented Dec 5, 2019

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

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

@likethemammal
Copy link

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

drcmda commented Dec 8, 2019

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

drcmda commented Dec 18, 2019

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

@drcmda drcmda closed this as completed Dec 18, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants