Rendering a text resulting into TypeError: Object(...) is not a function

[5ervant]

Upon using this code:

import Text from './Text';

// ...
    return <Jumbo key={key}>TEST</Jumbo>
// ...

function Jumbo({ children }) {
  const ref = useRef();
  useFrame(
    ({ clock }) =>
      (ref.current.rotation.x = ref.current.rotation.y = ref.current.rotation.z =
        Math.sin(clock.getElapsedTime()) * 0.3)
  );
  return (
    <group ref={ref}>
      <Text hAlign="left" position={[0, 4.2, 0]} children={children} />
    </group>
  );
}

I'm getting this error:

TypeError: Object(...) is not a function
Jumbo
./plugins/graphical-items/GraphicalItems/index.js:1
> 1 | import React, { useEffect, useRef, useFrame, Suspense } from 'react';
  2 | import { View } from 'react-native';
  3 | import { Canvas, useLoader } from 'react-three-fiber';
  4 | import Text from './Text';

The code structure can be seen here: https://codesandbox.io/embed/r3f-gltf-fonts-c671i
'/bold.blob' is included on the "public" folder of my Next.js app with @expo/next-adapter Expo for web.

[drcmda]

textgeom is not part of r3f, it's threejs. and THREE.FontLoader for sure doesn't work in RN, like none of the other loaders do. expo has its own loaders.

[drcmda]

btw found this facebook/react#14484 so could also be related to an outdated react, or react and react-dom being on different versions

[drcmda]

as for glyphs, you need to create your own. the demo only uses numbers. https://threejs.org/docs/index.html#api/en/geometries/TextGeometry https://gero3.github.io/facetype.js/

[5ervant]

@drcmda I ALREADY MANAGED TO RENDER A TEXT when I commented out the following code. I just can't animate it because the following code is raising the TypeError: Object(...) is not a function:

  // useFrame(
  //   ({ clock }) =>
  //     (ref.current.rotation.x = ref.current.rotation.y = ref.current.rotation.z =
  //       Math.sin(clock.getElapsedTime()) * 0.3)
  // );

My dependencies:

"react": "~16.9.0",
"react-dom": "~16.9.0",

https://codesandbox.io/embed/r3f-gltf-fonts-c671i that I'm trying to clone's dependencies:

"react": "16.13.1",
"react-dom": "16.13.1",

---

https://codesandbox.io/embed/r3f-gltf-fonts-c671i even managed to work upon configuring its "package.json" to have:

"react": "~16.9.0",
"react-dom": "~16.9.0",

[drcmda]

i dont know, you linked me to a sandbox that's working. there is nothing in that useframe that can cause your issue. put your stuff into a codesandbox otherwise there is nothing i can do for you. or maybe make an issue request on the next repo.

[5ervant]

This is how I import OrbitControls in my complicated setup using Next.js with Expo for web: expo/expo-cli#2059 (comment)

[5ervant]

This is a big wrapped, I was importing { useFrame } from react #369 (comment), whereas { useFrame } is from react-three-fiber.

import { useFrame } from 'react';
import { useFrame } from 'react-three-fiber';