theatre
theatre copied to clipboard
Unhandled Runtime Error TypeError: der.onStale is not a function
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?
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"
}
}
Folks, can you share a reproduction on codesandbox/stackblitz?
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!
Had the same issue, very disappointing.
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",