Cryptic issues with RN versions ≥ 0.72.x when using React UI libraries(MUI) inside Webview App

[JJSLIoT]

Describe the bug The react-native-react-bridge library used to work just fine on RN versions < 0.72.0. For older RN versions, I have to use 0.11.2 version of the rnrb library. After upgrading from RN 71 to RN 72, I started facing very cryptic errors, but the errors seem to originate from @mui/material library that is used inside the React app running in Webview. The issue might not be limited to @mui/material library but may occur on other vast React libraries. Here is the exact error that I get when I use any MUI component in the provided DemoApp:

 ERROR  ReferenceError: Property 'zh' doesn't exist, js engine: hermes 
    at ContextNavigator (http://192.168.1.3:8081/node_modules/expo-router/entry.bundle//&platform=ios&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.bytecode=true&transform.routerRoot=app:143683:24)
    at ExpoRoot (http://192.168.1.3:8081/node_modules/expo-router/entry.bundle//&platform=ios&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.bytecode=true&transform.routerRoot=app:143639:28)
    at App
    at ErrorToastContainer (http://192.168.1.3:8081/node_modules/expo-router/entry.bundle//&platform=ios&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.bytecode=true&transform.routerRoot=app:187845:24)
    at ErrorOverlay
    at withDevTools(ErrorOverlay) (http://192.168.1.3:8081/node_modules/expo-router/entry.bundle//&platform=ios&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.bytecode=true&transform.routerRoot=app:187348:27)
    at RCTView
    at View (http://192.168.1.3:8081/node_modules/expo-router/entry.bundle//&platform=ios&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.bytecode=true&transform.routerRoot=app:40757:43)
    at RCTView
    at View (http://192.168.1.3:8081/node_modules/expo-router/entry.bundle//&platform=ios&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.bytecode=true&transform.routerRoot=app:40757:43)
    at AppContainer (http://192.168.1.3:8081/node_modules/expo-router/entry.bundle//&platform=ios&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.bytecode=true&transform.routerRoot=app:40600:25)
    at main(RootComponent) (http://192.168.1.3:8081/node_modules/expo-router/entry.bundle//&platform=ios&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.bytecode=true&transform.routerRoot=app:118930:28)

Screenshot

-

To Reproduce To reproduce this issue I was able to create a minimum reproducible app. Here are the links to the public repos:

• Old RN version (working): https://github.com/JJSLIoT/rnrb-old-rn-demo
• New RN version (not working): https://github.com/JJSLIoT/rnrb-new-rn-demo

Both these repos have the same code just the versions of RN, expo and react-native-react-bridge are different.

Expected behavior The library should work fine like it used to work before - using older RN versions and react-native-react-bridge version < 0.12.0.

Platform:

• Version of [react-native, expo]: react-native ≥ 0.72.0, expo ≥ 49
• Version of this package: 0.12.0
• OS: iOS and Android both
• Running on: Device and Simulator both
• JavaScript engine: Hermes

Additional context The new version app works fine if we comment out MUI components from the code. For this, I have added a comment in WebApp/index.jsx file:

{/* FIXME: None of the components from @mui/material work when used inside
the Webview React app. When this Box is removed, the app works just fine.
This issue started popping after React Native 0.72.x. Earlier to this version
the react-native-react-bridge had no issues rendering any component from 
@mui/material */}

[clicktodev]

I also get this with three.js and expo-gl

[clicktodev]

Did you create a custom build for the Old RN version project? Because eas build fails to create a custom build and expo go sdk48 apk isn't working for me.

[aik117]

Any fix for this? I am also getting the same issue with different property with react-native version 0.74.3 and react-native-react-bridge version 0.12.0

[JJSLIoT]

Hi @inokawa, this is an awesome module, and we're really grateful for your work on it.

This issue is a blocker for our team and is preventing us from upgrading our React Native version beyond 71. Could we please get an update on this? Any pointers on potential reasons behind the issue would be greatly appreciated. We're eager to contribute, but at first glance, the source code seems beyond our expertise at the moment.

Thanks again for your hard work and for considering this request!

[ieow]

is it possible it is due to

Note that Hermes currently does not fully implement the ES6 spec. esbuild, on the other hand, does not fully support lowering to ES5. This essentially means that you may have to add additional plugins if you're seeing esbuild outputting "target environment is not supported yet" errors during bundle. For an example, see the error and its solution in #1743.

https://www.npmjs.com/package/@rnx-kit/metro-serializer-esbuild

https://github.com/microsoft/rnx-kit/issues/1743