Cannot read property "trim" of undefined

[ashkalor]

This is the error that appears on fresh installation of React three Fiber v18.17.5

It shows up atleast twice and sometimes thrice.

Device : Samsung Galaxy Tab A9
Android Version : Android 14
Repo Link to reproduce: Link

[yyuunn922]

There seems to be something wrong with version 8.17.*,

"@react-three/fiber": "8.16.8", Try it,

[CodyJasonBennett]

If 8.16.8 works, does 8.17.5 with <Canvas events={null} /> still crash?

[yyuunn922]

If 8.16.8 works, does 8.17.5 with <Canvas events={null} /> still crash?

Yes, adding events=null does not solve the trim error.

[ashkalor]

There seems to be something wrong with version 8.17.*,

"@react-three/fiber": "8.16.8", Try it,

Yes I am aware, raised this issue specifically for version 18.17.5. It started recurring after #3252 got merged I think.

[NikitaDudin]

Faced with same issue. I patched library.
Temporary solution: revert rest {...bind} props, remove this from GLView and add to Root View again.

patch: @react-three+fiber+8.17.5.patch

[AlissonBlaas]

still a issue

[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 am having this problem, any solution ?

[CodyJasonBennett]

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

That sounds severely broken and undefined behavior.

Does 8.16.8 work for you by chance? I can't recreate this, and I anticipate it being device specific (Android).

[leo0grau]

Is not device specific, i am having this issue in IOS

[CodyJasonBennett]

Which device or iOS version? This is either device (GPU) specific or a grossly broken build/implementation of WebGL (via expo-gl). It is not valid for programs to continue if a resource returns null (means context/GPU device unavailable). Please work with me here, the reason we have issues like this persist is because I don't have the bare minimum to reproduce or take to vendors.

[leo0grau]

I followed the tutorial for React Native without Expo and installed all the required dependencies. I tested the app on both an iOS 18.2 emulator and a real device (iPhone 6s running iOS 15.8.2).

Here are the versions of the libraries I'm using:

expo: ^52.0.0
expo-gl: ~15.0.3
expo-three: ^8.0.0
@react-three/drei: ^9.121.1
@react-three/fiber: ^8.16.8
react-native: 0.76.5
three: ^0.172.0

Let me know if there are any specific tests or configurations I should try to address this issue.

[CodyJasonBennett]

Try specifying "@react-three/fiber": "8.16.8". The ^ symbol allows any version under 8.x.

I don't have an iPhone 6 on hand, so I can't quickly verify. I am wary of iOS 15, which was riddled with OS bugs from 15.3-15.4.

I'll take a closer look as to how this is reachable.

[leo0grau]

Specifying "@react-three/fiber": "8.16.8" worked successfully. However, whenever I try to use anything from @react-three/drei/native, I get the same error. Which version of @react-three/drei should I use to make it work?

[glthomas]

@CodyJasonBennett I am able to reproduce this error. I've included the following expo snack:

https://snack.expo.dev/@glthomas/react-three-fiber-example?platform=ios

1. Choose iOS
2. Launch Snack
3. Open in "Expo Go"

[harristsil]

I am having the same issue but only in my iPad (both Air M1 (iPadOS 18.2.1) and emulator) . Android seems to work fine

"@react-three/drei": "^9.92.5",
"@react-three/fiber": "^8.15.12",
"expo": "~52.0.0",
"expo-gl": "~15.0.4",
"r3f-native-orbitcontrols": "^1.0.9",
"react": "18.3.1",
"react-native": "0.76.6",
"typescript": "^5.3.0",

[CodyJasonBennett]

This error is coming from a code path that should be unreachable and is not valid for an OpenGL implementation to do #3333 (comment). My worry here is that we're running into unsupported OpenGL drivers (which Apple is notorious for and is what expo-gl builds on top of). The best solution is to move to a WebGL implementation using Apple Metal like https://github.com/google/angle (all browsers use this), but this doesn't exist in React Native. I would have to suggest using a webview in the interim, as I cannot in good conscience recommend React Native for production use in this state.

[harristsil]

The only way I can avoid the error is by using the events={null} in my . However, I am losing the orbit controls..

<Canvas events={null} camera={{ position: [0, 0.5, 3], fov: 25, zoom: 1 }} gl={{ preserveDrawingBuffer: true }} onCreated={({ gl }) => { const _gl = gl.getContext(); const pixelStorei = _gl.pixelStorei.bind(_gl); _gl.pixelStorei = function (...args) { const [parameter] = args; switch (parameter) { case _gl.UNPACK_FLIP_Y_WEBGL: return pixelStorei(...args); } }; }} >

[samuelroberts-mit]

Using a suspense inside the canvas seems to solve the issue for me on release builds, this breaks completely breaks dev builds whereas before the error could be dismissed. This is on a physical android device.

[izelacerda]

still a issue

[tlvince]

One workaround:

<Canvas
  gl={{ debug: { checkShaderErrors: false, onShaderError: null } }}
>

The error gets thrown here:

https://github.com/mrdoob/three.js/blob/860644be957d3bda2d5162ae749925a5435e2382/src/renderers/webgl/WebGLProgram.js#L918-L923

checkShaderErrors is set by default in the constructor:

https://github.com/mrdoob/three.js/blob/860644be957d3bda2d5162ae749925a5435e2382/src/renderers/WebGLRenderer.js#L112-L125

Disabling checkShaderErrors gets us past the runtime error, but this is a symptom of an underlying React Native issue.

[CodyJasonBennett]

I wouldn't be opposed to including that as a workaround here, but this is quite a scary issue since any WebGL resource returning null indicates an unrecoverable state (e.g., lost GPU device). For it to continue is completely undefined behavior, which I'm not so happy to rely on. If this or events={null} is an exhaustive workaround, then perhaps we can leverage it until this is fixed upstream.

[wandolch]

Still an issue, just after I installed the lib and created a first Canvas.
Iphone 16 simulator with latest ios
react-three/fiber: 8.18.0 - the last one requiring react 18, because expo doesn't support 19 yet