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?