React Fiber ThreeJs components rendering issues ( undefined data Line2.computeLineDistances )

Question

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

If you're using the latest version of react-three-fiber you'll need to have react and react-dom to ^18.1.0. Make sure you're running the latest versions, that might be it. — TriThomas
– TriThomas, Commented Jun 9, 2022 at 9:58

Steffen Frank · Accepted Answer · 2022-06-18 11:04:41Z

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 />)

Collectives™ on Stack Overflow

React Fiber ThreeJs components rendering issues ( undefined data Line2.computeLineDistances )

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related