Error when using React three fiber and trying to use TextGeomerty

Question

I am using React with react-three fiber and typescript, trying to make simple 3D text. I'm getting the following error:

THREE.TextGeometry has been moved to /examples/jsm/geometries/TextGeometry.js

This is the code I'm using:

import { extend, Object3DNode } from '@react-three/fiber';
import * as React from 'react';
import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry';
import { FontLoader } from 'three/examples/jsm/loaders/FontLoader';
import monster from '../assets/fonts/Montserrat_Bold.json';

extend({TextGeometry});


declare global {
    namespace JSX {
        interface IntrinsicElements {
            textGeometry: Object3DNode<TextGeometry, typeof TextGeometry>
        }
    }
}

const font = new FontLoader().parse(monster);

export interface ITextMeshProps {
}

export function TextMesh (props: ITextMeshProps) {

    return (
        <mesh>
            <textGeometry args={['Test', {font, size:2, height: 1}]}/>
        </mesh>
    );
}

The 3d text only works once, when I refresh it goes away and only the error stays. I don't get why I am getting the error, when I use the path the error mentions to import TextGeometry. Here I put the mesh into a canvas:

import React from 'react';
import { Canvas } from '@react-three/fiber'
import { TextMesh } from './TextMesh';
function App() {

    return (
        <div className='h-screen flex items-center justify-center flex-col bg-orange-300'>
            <Canvas>
                <TextMesh/>
                <ambientLight intensity={0.1} color="white" />
                <spotLight color="white" position={[20, 0, 0]}/>
            </Canvas>
        </div>
    );
}

export default App;

I made a fontface.js using https://gero3.github.io/facetype.js/

Answer 1

Try to move this part

extend({TextGeometry});

into your TextMesh function