theatre 0.5.0-rc.3

[tombombadilom]

I have created a Theatrejs 0.5.0-rc-3 playground with react 18 and jsx:

https://github.com/tombombadilom/scene-editor-jsx

I have only one error that looks like typescript from @theatre/r3f and without any tsconfig in that directory i cannot ugrade r3f to meet my threejs three-and three-fiber versions :

Uncaught TypeError: import_three.Group is not a constructor
    at config (store.ts:61:1)
    at create2 (vanilla.js:72:1)
    at ./node_modules/@theatre/r3f/dist/index.js (store.ts:109:1)
    at options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at ./src/App.jsx (bundle.js:18:70)
    at options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)

I admit that for testing purposes I have mounted all the dependencies at their ultimate versions:
I must have broken something and I apologize in advance.

below my package.json

{
  "name": "scene-editor",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^13.0.0",
    "@testing-library/user-event": "^13.2.1",
    "@theatre/core": "^0.5",
    "@theatre/r3f": "^0.5",
    "@theatre/studio": "^0.5",
    "@theatre/react": "^0.5",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/core": "^7.19.0",
    "@babel/plugin-syntax-flow": "^7.18.6",
    "@babel/plugin-transform-react-jsx": "^7.19.0",
    "@babel/preset-env": "^7.19.0",
    "@react-three/fiber": "^8.7.2",
    "@testing-library/dom": "^8.17.1",
    "@types/three": "^0.144.0",
    "three": "^0.144.0"
  }
}

and my app.jsx where everything is called:

import React, { useEffect } from 'react';
import { Canvas } from '@react-three/fiber';
import { SheetProvider, editable as e } from '@theatre/r3f';
import { getProject } from '@theatre/core';
import demoProjectState from './state.json';
import studio from '@theatre/studio';
import extension from '@theatre/r3f/dist/extension';
studio.initialize();
studio.extend(extension);

const demoSheet = getProject('Demo Project', { state: demoProjectState }).sheet('Demo Sheet')


const App = () =>  {
  useEffect(() => {
      demoSheet.sequence.play({ iterationCount: Infinity, range: [0, 1] })
    }, [])
  return (
    <Canvas camera={{ position: [5, 5, -5] }}>
    <SheetProvider sheet={demoSheet}>
      <ambientLight />
      <e.pointLight uniqueName="Light" position={[10, 10, 10]} />
      <e.mesh uniqueName="Cube">
        <boxGeometry args={[1, 1, 1]} />
        <meshStandardMaterial color="orange" />
      </e.mesh>
    </SheetProvider> 
  </Canvas>
  );
}

export default App;

[vezwork]

Thanks for the detailed issue @tombombadilom!! I'm working on fixing this issue as we speak!

[tombombadilom]

react 18 has another DOM too, If I'm not mistaken
in my index.js ....

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

[vezwork]

Hi @tombombadilom this issue should be fixed in release 0.5.0-insiders.735bd98! We will also release 0.5 very soon if you prefer to wait for that.

[tombombadilom]

I'm happy , it has been fixed , and yes of course i can wait the next rc or insiders . Thank you very much @vezwork you've help me a lot .

[tombombadilom]

it's working like a charm in my test project , thank you again

[vezwork]

wonderful! Thanks so much for the issue description and for testing the fix @tombombadilom