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",