Three.js & @react-three/fiber - TextGeometry() cannot read properties of undefined (reading 'yMax')

Question

I'm getting the error "Uncaught TypeError: Cannot read property 'yMax' of undefined" when adding text to a three.js scene using React-three/fiber. I've successfully rendered other geometries using the same function (apart from textgeometry and font).

My first issue was using TextGeometry without an extend (as TextGeometry is no longer affiliated with the Three.js namespace). This removed the error of unrecognized textGeometry.

Now my error is reading 'yMax' in the textGeometry component.

I've created a CodeSandBox for this issue here. The intended function is that when the scene (blue) is clicked, a new 3D text object should be rendered.

I noticed this question was asked 4 years ago, yet I am asking again because the documentation has changed a lot and that question used vanilla Three.js whereas I'm using @react-three/fiber.

The complete error messages from the Chrome Developer Console are below:

The above error occurred in the <textGeometry> component:

    at textGeometry
    at mesh
    at Text (http://localhost:3000/3d-search/static/js/bundle.js:113:15)
    at Objects (http://localhost:3000/3d-search/static/js/bundle.js:361:5)
    at Provider (http://localhost:3000/3d-search/static/js/bundle.js:783:5)
    at Scene (http://localhost:3000/3d-search/static/js/bundle.js:402:80)
    at Suspense
    at ErrorBoundary (http://localhost:3000/3d-search/static/js/bundle.js:1596:5)
    at Provider (http://localhost:3000/3d-search/static/js/bundle.js:3539:5)

React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.
overrideMethod @ react_devtools_backend.js:4026
logCapturedError @ react-reconciler.development.js:9747
callback @ react-reconciler.development.js:9815
callCallback @ react-reconciler.development.js:4279
commitUpdateQueue @ react-reconciler.development.js:4300
commitLayoutEffectOnFiber @ react-reconciler.development.js:14877
commitLayoutMountEffects_complete @ react-reconciler.development.js:16290
commitLayoutEffects_begin @ react-reconciler.development.js:16276
commitLayoutEffects @ react-reconciler.development.js:16214
commitRootImpl @ react-reconciler.development.js:18945
commitRoot @ react-reconciler.development.js:18811
finishConcurrentRender @ react-reconciler.development.js:17990
performConcurrentWorkOnRoot @ react-reconciler.development.js:17907
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
2FontLoader.js:89 Uncaught TypeError: Cannot read properties of undefined (reading 'yMax')
    at createPaths (FontLoader.js:89:1)
    at Font.generateShapes (FontLoader.js:71:1)
    at new TextGeometry (TextGeometry.js:34:1)
    at createInstance (index-212b30d8.esm.js:871:1)
    at completeWork (react-reconciler.development.js:10851:1)
    at completeUnitOfWork (react-reconciler.development.js:18725:1)
    at performUnitOfWork (react-reconciler.development.js:18697:1)
    at workLoopSync (react-reconciler.development.js:18597:1)
    at renderRootSync (react-reconciler.development.js:18565:1)
    at recoverFromConcurrentError (react-reconciler.development.js:17948:1)
createPaths @ FontLoader.js:89
generateShapes @ FontLoader.js:71
TextGeometry @ TextGeometry.js:34
createInstance @ index-212b30d8.esm.js:871
completeWork @ react-reconciler.development.js:10851
completeUnitOfWork @ react-reconciler.development.js:18725
performUnitOfWork @ react-reconciler.development.js:18697
workLoopSync @ react-reconciler.development.js:18597
renderRootSync @ react-reconciler.development.js:18565
recoverFromConcurrentError @ react-reconciler.development.js:17948
performConcurrentWorkOnRoot @ react-reconciler.development.js:17848
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
react_devtools_backend.js:4026 The above error occurred in the <ForwardRef(Canvas)> component:

    at Canvas (http://localhost:3000/3d-search/static/js/bundle.js:3867:5)
    at App

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

Three.js & @react-three/fiber - TextGeometry() cannot read properties of undefined (reading 'yMax')

0 Answers0