ERROR TypeError: Cannot read property 'trim' of undefined, js engine: hermes

[DedaDev]

I'm trying to run a basic react-native RTF scene, but I'm getting this error in the console 3 times
ERROR TypeError: Cannot read property 'trim' of undefined, js engine: hermes and also on the screen.

I've followed this guide

I have only one page, and here is its content

import {Canvas} from "@react-three/fiber/native";

export default function Index() {
  return (
      <Canvas>
        <ambientLight intensity={0.1} />
        <directionalLight color="red" position={[0, 0, 5]} />
        <mesh>
          <boxGeometry />
          <meshStandardMaterial />
        </mesh>
      </Canvas>
  );
}

its one of those 3 lines
https://github.com/mrdoob/three.js/blob/4f067f0f4dc9e81f7fb3484962f2e973f71fab60/src/renderers/webgl/WebGLProgram.js#L923C23-L923C25

[yanoyuki]

Same

"@react-three/fiber": "^8.17.5",
"expo-gl": "~14.0.2",
"three": "^0.167.1"

[shk2000v]

same

"@react-three/fiber": "^8.17.5",
"expo-three": "^8.0.0",
"expo-gl": "~13.6.0",
"three": "^0.167.1",

[asishgeorge]

Facing the same issue:

"@react-three/fiber": "^8.17.5",
"expo-gl": "~14.0.2",
"expo-three": "^8.0.0",
"three": "^0.167.1"

[filipmik123]

Same for me:
"three": "^0.167.1", "expo-gl": "~14.0.2", "@react-three/fiber": "^8.17.5",

[GibsDev]

I also experienced this in a brand new project that I created today. (8/19/24)

Is there an older version to fallback to that works?

[Dadadsch]

Any solution?

[harsh4way]

You can wrap canvas content into Suspense like this:

import {Canvas} from "@react-three/fiber/native";
import {Suspense} from "react";

 export default function Index() {
  return (
      <Canvas>
       <Suspense fallback={null}>
        <ambientLight intensity={0.1} />
        <directionalLight color="red" position={[0, 0, 5]} />
        <mesh>
          <boxGeometry />
          <meshStandardMaterial />
        </mesh>
       </Suspense>
      </Canvas>
  );
 }

[jb-san]

experiencing the same thing
"three": "^0.170.0",
"@react-three/drei": "^9.116.3",
"@react-three/fiber": "^8.17.10",
"expo": "~52.0.6",
"expo-gl": "~15.0.2",

the Suspense solution did not work for me

[anurbecirovic]

Same issue

[dawidvdh]

Same issue, has anyone found out why this is happening?

[cubevis]

Same issue :(

[infinite223]

Same issue

[AlissonBlaas]

same issue

"three": "^0.171.0",
"@react-three/drei": "^9.120.4",
"react-three-fiber": "^6.0.13",
"expo": "~52.0.18",
"expo-gl": "~15.0.2",

React Native - Android emulator

[ccctask]

same

"@react-three/drei": "^9.120.4",
"@react-three/fiber": "^8.17.10",
"expo-gl": "~15.0.2",
"three": "^0.171.0"

[devirtua]

same

"@react-three/drei": "^9.120.4",
"@react-three/fiber": "^8.17.10",
"expo-gl": "~15.0.2",
"three": "^0.171.0"

[mustafakendiguzel]

I tried every solution but none of them worked.

"@react-three/drei": "^9.88.0",
"@react-three/fiber": "^8.13.6",
"expo-gl": "~15.0.2",
"three": "^0.166.0",

[rogueturnip]

Looks like this is still persisting. Has anyone found a work around?

[rogueturnip]

It might be worth noting that sometimes the canvas won't even render on an IOS physical device (using expo go). It just shows the view (white). When I run on web it runs fine and on android emulator fine too.