0
270
ViewsReact Fiber ThreeJs components rendering issues ( undefined data Line2.computeLineDistances )
I have reproduced 3 components of my React App in the following codesandbox
As you can see in the demo, i have 3 react threejs components, rotating, moving and zooming with no issues.
The problem is in my local app with exactly the same code App.js
export default function App() {
return (
<FullScreenCanvas>
<OrbitControls enableZoom={true} enablePan={true} enableRotate={true} />
<Suspense fallback={null}>
<Thing />
<CircleLine linewidth={2} />
<Triangle color="#ff2060" scale={0.009} rotation={[0, 0, Math.PI / 3]} />
</Suspense>
</FullScreenCanvas>
)
}
This is the error i see in my console => Uncaught TypeError: Cannot read properties of undefined (reading 'data') at Line2.computeLineDistances
I have found out that the problem was caused by the react three fiber version, in fact if i downgraded in my app from "@react-three/fiber":` "^8.0.20", to the codesandbox demo "@react-three/fiber": "^7.0.24", the error disappeared and it works like in the demo. so my question is why i have this error with react/three/fiber 8.0.20
1 answers
Answer question0
The problem is caused by an incompatibility between the packages
"@react-three/drei": "9.13.2",
"@react-three/fiber": "8.0.20",
and can be fixed by upgrading both packages to their latest version:
"@react-three/drei": "latest",
"@react-three/fiber": "latest",
I assume that the incompatibility is related to changes in React 18, which introduces concurrent rendering features.
My guess is that the two libraries work well together if they either both use these concurrency features (if you use the latest version for both) or both don't. I assume that your error occurred because by upgrading @react-three/fiber to a newer version without upgrading @react-three/drei, the two libraries had different ideas about whether or not to rely on React 18 concurrency.
Please note that, in order to actually benefit from these concurrent features, you should initialize your app in index.js in a slightly different way:
import React from 'react'
import {createRoot} from 'react-dom/client'
import App from './App'
import './styles.css'
const container = document.getElementById('root')
const root = createRoot(container)
root.render(<App />)