Unhandled Runtime Error TypeError: der.onStale is not a function

[CreativeTransmissions]

Hi there,

I'm trying out Theater.js for the first time. Looks like an amazing tool but I'm having some issues getting it to work.

I'm attempting to use it on a route on my nextjs app with r3f as per the instructions on the theater.js website.

The UI appears but I get the following error
Unhandled Runtime Error
TypeError: der.onStale is not a function

Call Stack
usePrismInstance
node_modules@theatre\r3f\dist\extension\index.esm.js (20133:0)
usePrism
node_modules@theatre\r3f\dist\extension\index.esm.js (20038:0)
useVal
node_modules@theatre\r3f\dist\extension\index.esm.js (20041:0)
SnapshotEditor
node_modules@theatre\r3f\dist\extension\index.esm.js (22262:0)
Ch
node_modules@theatre\r3f\dist\extension\index.esm.js (11941:0)
ck
node_modules@theatre\r3f\dist\extension\index.esm.js (14497:0)
bk
node_modules@theatre\r3f\dist\extension\index.esm.js (14027:0)
ak
node_modules@theatre\r3f\dist\extension\index.esm.js (14020:0)
Tj
node_modules@theatre\r3f\dist\extension\index.esm.js (14003:0)
Lj
node_modules@theatre\r3f\dist\extension\index.esm.js (13771:0)
Jg
node_modules@theatre\r3f\dist\extension\index.esm.js (13619:0)
lk
node_modules@theatre\r3f\dist\extension\index.esm.js (14861:0)
eval
node_modules@theatre\r3f\dist\extension\index.esm.js (14949:0)
Xj
node_modules@theatre\r3f\dist\extension\index.esm.js (13806:0)
tk
node_modules@theatre\r3f\dist\extension\index.esm.js (14948:0)
exports2.render
node_modules@theatre\r3f\dist\extension\index.esm.js (15086:0)
mount
node_modules@theatre\r3f\dist\extension\index.esm.js (22426:0)
eval
node_modules@theatre\studio\dist\index.js (45801:0)
commitHookEffectListMount
node_modules@theatre\studio\dist\index.js (22140:0)
commitLifeCycles
node_modules@theatre\studio\dist\index.js (22183:0)
commitLayoutEffects
node_modules@theatre\studio\dist\index.js (23952:0)
HTMLUnknownElement.callCallback2
node_modules@theatre\studio\dist\index.js (10916:0)
Object.invokeGuardedCallbackDev
node_modules@theatre\studio\dist\index.js (10941:0)
invokeGuardedCallback
node_modules@theatre\studio\dist\index.js (10975:0)
commitRootImpl
node_modules@theatre\studio\dist\index.js (23774:0)
unstable_runWithPriority
node_modules@theatre\studio\dist\index.js (7591:0)
runWithPriority$1
node_modules@theatre\studio\dist\index.js (15713:0)
commitRoot
node_modules@theatre\studio\dist\index.js (23677:0)
performSyncWorkOnRoot
node_modules@theatre\studio\dist\index.js (23242:0)
eval
node_modules@theatre\studio\dist\index.js (15753:0)
unstable_runWithPriority
node_modules@theatre\studio\dist\index.js (7591:0)
runWithPriority$1
node_modules@theatre\studio\dist\index.js (15713:0)
flushSyncCallbackQueueImpl
node_modules@theatre\studio\dist\index.js (15749:0)
flushSyncCallbackQueue
node_modules@theatre\studio\dist\index.js (15739:0)
unbatchedUpdates
node_modules@theatre\studio\dist\index.js (23320:0)
legacyRenderSubtreeIntoContainer
node_modules@theatre\studio\dist\index.js (25815:0)
Object.render
node_modules@theatre\studio\dist\index.js (25878:0)
renderCallback
node_modules@theatre\studio\dist\index.js (49306:0)

Here are my dependencies.

"@ducanh2912/next-pwa": "^9.4.0",
"@radix-ui/react-navigation-menu": "^1.1.3",
"@react-three/drei": "^9.80.2",
"@react-three/fiber": "^8.13.6",
"@theatre/core": "0.5",
"@theatre/r3f": "^0.6.2",
"@theatre/studio": "0.5",
"class-variance-authority": "^0.7.0",
"clsx": "^2.0.0",
"glsl-random": "^0.0.5",
"lucide-react": "^0.274.0",
"next": "^13.4.13",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"tailwind-merge": "^1.14.0",
"tailwindcss-animate": "^1.0.7",
"three": "0.153.0",
"three-stdlib": "^2.24.2",
"tunnel-rat": "^0.1.2"

Any idea of the cause?

[kevincantstop]

same issue. It might be something wrong with r3f extension I think...

App.jsx

import * as THREE from 'three'
import React, { useRef, useState } from 'react'
import { Canvas, useFrame } from '@react-three/fiber'
import { getProject } from '@theatre/core'
import extension from '@theatre/r3f/dist/extension';
import { SheetProvider } from '@theatre/r3f'

import studio from '@theatre/studio'

studio.initialize()
studio.extend(extension)

import "./app.css"

// our Theatre.js project sheet, we'll use this later
const demoSheet = getProject('Demo Project').sheet('Demo Sheet')

const App = () => {
    return (
        <Canvas camera={{position: [5, 5, -5], fov: 75}}>
            <SheetProvider sheet={demoSheet}>
                <ambientLight/>
                <pointLight position={[10, 10, 10]}/>
                <mesh>
                    <boxGeometry args={[1, 1, 1]}/>
                    <meshStandardMaterial color="orange"/>
                </mesh>
            </SheetProvider>
        </Canvas>
    )
}

export default App

package.json

{
  "name": "theatre-app",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "@react-three/fiber": "^8.14.5",
    "@theatre/core": "^0.5.1",
    "@theatre/r3f": "^0.6.2",
    "@theatre/studio": "^0.5.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "three": "^0.157.0"
  },
  "devDependencies": {
    "@types/react": "^18.2.15",
    "@types/react-dom": "^18.2.7",
    "@types/three": "^0.156.0",
    "@vitejs/plugin-react": "^4.0.3",
    "eslint": "^8.45.0",
    "eslint-plugin-react": "^7.32.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.3",
    "vite": "^4.4.5"
  }
}

[AriaMinaei]

Folks, can you share a reproduction on codesandbox/stackblitz?

[Zarzarius]

Same problem here, after loading the theater editor all seemed to be working fine... But when I tried to create a snapshot with the camera icon, the same weird error. I hope it can be solved in further releases. Thanks for the good work!

[Stranger1586]

Had the same issue, very disappointing.

[milesaylward]

Ran into the same issue was able to solve by updating package.json:

"@theatre/core": "^0.6.0",
"@theatre/r3f": "^0.6.0",
"@theatre/studio": "^0.6.0",