Loss of context when using yarn workspaces

[LIMPIX31]

Details

The react-three-offscreen works perfectly. It displays the scene correctly, except the context is not defined when I use r3-offscreen with yarn workspaces.

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

At some point it may work, but only until you delete the vite cache.

Reproducible repo

https://github.com/LIMPIX31/r3f-offscreen-workspaces

[LIMPIX31]

This is because vite builds dependencies separately for worker so project have two instances of @react-three/fiber

Solution

Just declare @react-three/fiber as a dependency at the closest point of use, such as an application entry point, and then just refer to it as a peer dependency.

// entrypoint workspace
{
  ...
  "dependencies": {
    "@react-three/fiber": "8"
  }
}

// worker workspace
{
  ...
  "peerDependencies": {
    "@react-three/fiber": "8"
  }
}