Uncaught R3F hooks can only be used within the Canvas component

[lifeng1992]

Describe the bug

hello, I'm use vite.js + react-three-fiber to create something.

for debugging purposes, config rollup make use local react-three-fiber.esm.js, but got

Uncaught R3F hooks can only be used within the Canvas component!

Reproduction

https://github.com/lifeng1992/r3f

sandbox

https://codesandbox.io/s/adoring-feynman-kvxw8?file=/vite.config.js

[njm222]

Next time please provide a sandbox.

I think the error explains itself, you can only call r3f hooks inside the Canvas component so do something like this

function Scene() {
  // you can use r3f hooks here

  return (
    <Stage>
      <Box />
    </Stage>
  );
}

function App() {
  return (
    <>
      <Canvas>
         <Scene />
      </Canvas>
    </>
  );
}

[lifeng1992]

@njm222 sandbox has been added
but i'm not call r3f hooks inside the Canvas component

[drcmda]

i don't see that exception in your box, all seems good.

function Inspector() {
  const test = useThree();
  return <group />;
}

it also had an alias to a local r3f which i removed. it runs. can it be that your window.app is causing it, because maybe there is no window in your dev env (it looks like node ...)? other than that it could be the vite alias. i had similar problems with vite and i think it does not handle aliases correctly. if you end up with conflicting namespaces then context does not work. "Uncaught R3F hooks can only be used within the Canvas component" simply means it cannot access the context:

export function useThree<T = RootState>(
  selector: StateSelector<RootState, T> = (state) => (state as unknown) as T,
  equalityFn?: EqualityChecker<T>,
) {
  const useStore = React.useContext(context)
  if (!useStore) throw `R3F hooks can only be used within the Canvas component!`
  return useStore(selector, equalityFn)
}

if useStore is undefined here then there's no provider or something inhibits it, this is a pure react thing. that's why i don't think this is a bug in r3f, if it can't reach parent context then that must be caused by your env.

[hybridherbst]

We're running into the same problem. It seems that vite doesn't respect peerDependencies from local packages and instead packs those dependencies into the app as well, resulting in duplicate react-three-fiber and react versions being embedded, and that causing ordering and namespace clashes. Using published registry versions or direct local folders (instead of local packages) works without these problems.

I'll see if I can come up with a minimal example that breaks to report a bug...

[MageeLin]

vite --force

[MageeLin]

You can try "vite --force" to force re-optimizatize dependencies, it's solve my problem

[Vibhurathore09]

How can i use this command , it's showing vite --force not recognized