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.

[bcebel]

same

[rex2go]

When downgrading my project to Expo SDK 51 this error disappears. Unfortunately downgrading is not an option for me.

[JonathanLink]

same problem, in the end I had to use expo-three and expo-gl instead

[vitorrbacelar]

developing a small project i ran through the same error, fixed by going on the file node_modules/three/build/three.cjs and on the function "onFirstUse", inside the first if, theres this line of code: const programLog = gl.getProgramInfoLog( program ).trim();

on the "if ( renderer.debug.checkShaderErrors )" i added the "program" property. Now it is "if ( renderer.debug.checkShaderErrors && program )".

solved for me

[leo0grau]

I did this, the error is gone, but now nothing is rendering.

[anurbecirovic]

@leo0grau try adding <Canvas events={null} >

[leo0grau]

@anurbecirovic It didn't work.

[patrick91]

@vitorrbacelar can you send a PR? :D

[nowayX]

Nice ty

[trevor-ofarrell]

Is there any updates on this? I've been trying all day to get three.js or react three fiber working in Expo and nothing is working. Seems like its been broken for a while.

[patrick91]

@trevor-ofarrell for me @vitorrbacelar's workaround fixed it, did that work for you?

[harristsil]

@vitorrbacelar how do you manage to move, rotate etc if you set the events to null? the problem is fixed, however now I cannot move the model

[anastely]

@patrick91 there's nothing rendered on the screen when applying @vitorrbacelar workaround, just the error gone!

[leauyn]

still the problem till now.

[rohitS3]

Still a problem, facing this issue on Android devices as well.

[vitorrbacelar]

Seens like my answer solved the problem for some people, but created other problems at the same time. For me everything worked pretty well after patching the lib. I'm at work now, but as soon as I get home i will post the lib solution code, and my project code that worked for me.

[anastely]

Waiting 👀

[Osmanity]

Waiting 👀

[AmrKhamis1]

Hi everyone,

Expo Go doesn’t support three.js or @react-three/fiber/native because it lacks native WebGL support (expo-gl and expo-gl-cpp). That’s why 3D rendering fails or throws GL errors. To fix this, you need to use a custom Expo dev client built with expo-dev-client and EAS. This includes the required native modules to run Three.js properly or continue using web as a emulator.

but ether way the deployment will work
hope this helps

Best regards Amr Khamis.

[vitorrbacelar]

heres the code that worked for me.

that's the code I patched on the lib:

if ( renderer.debug.checkShaderErrors && program && glVertexShader && glFragmentShader) {

this is the three.js object:

import { MeshProps, useFrame } from '@react-three/fiber';
import React, { useRef } from 'react';
import {
  BufferGeometry,
  Material,
  Mesh,
  NormalBufferAttributes,
  Object3DEventMap,
} from 'three';

type Props = {
  color: string;
} & MeshProps;

function Cone({ color, rotation, ...rest }: Props) {
  const coneMesh =
    useRef<
      Mesh<
        BufferGeometry<NormalBufferAttributes>,
        Material | Material[],
        Object3DEventMap
      >
    >(null);

  useFrame((_, delta) => {
    if (coneMesh.current) {
      const xRotation = rotation[0] * (Math.PI / 180);
      const yRotation = rotation[1] * (Math.PI / 180);
      const zRotation = rotation[2] * (Math.PI / 180);

      coneMesh.current.rotation.x += xRotation * delta;
      coneMesh.current.rotation.y += yRotation * delta;
      coneMesh.current.rotation.z += zRotation * delta;
    }
  });

  return (
    <mesh {...rest} scale={1} ref={coneMesh}>
      <coneGeometry args={[0.6, 1, 30]} />
      <meshStandardMaterial color={color} />
    </mesh>
  );
}

export default Cone;

this is where im rendering the object, the Object3DFactory just return the object above.

const { height, width } = useWindowDimensions();

const canvasHeight = (75 / 100) * height;

<Canvas style={{ height: canvasHeight, width }}>
        <ambientLight />
        <directionalLight position={[5, 5, 5]} />

        {objectConfigs.map((objectConfig, index) => (
          <React.Fragment key={objectConfig.shape + index}>
            {Object3DFactory.create(objectConfig, index)}
          </React.Fragment>
        ))}
</Canvas>

this solved it perfectly for me, if this doesn't work for you, try to run the app on an emulator or build it and run on a real device instead of Expo Go.