super-app-showcase icon indicating copy to clipboard operation
super-app-showcase copied to clipboard

Error while running bundled application on newest versions

Open adamTrz opened this issue 9 months ago • 5 comments

Environment

Normal RN dev setup on macos

Description

While running bundled miniapps I've encountered a strange error:

Application is crashing with Warning: TypeError: Cannot read property 'validated' of undefined error.

After some investigation and in-depth debugging we've found that error is originating from ScrollView and going even deeper by this bit in bundle:

    function cloneAndReplaceKey(oldElement, newKey) {
        newKey = ReactElement(oldElement.type, newKey, void 0, void 0, oldElement._owner, oldElement.props);
        newKey._store.validated = oldElement._store.validated;
        return newKey;
    }

Reproducible Demo

  • Clone my PR with updated deps: #140
  • bundle shopping app: cd packages/shopping && pnpm bundle:ios
  • host bundle locally only on different port, eg: python3 -m http.server -d build/generated/ios 9008
  • edit Host app's rspack config so Shopping will be taken from previously selected port:
-          shopping: `shopping@http://localhost:9001/mf-manifest.json`,
+          shopping: `shopping@http://localhost:9008/mf-manifest.json`,
  • launch and install the app (pnpm start and pnpm:host ios in separate terminal window
  • inside the application navigate to Services tab and then tap on Shopping card
  • app crash 💥

Ugly temp fix: To confirm remove react navigation from mini app and replace ScrollView usage with basic View component in main navigator like so:

const MainNavigator = () => {
-  return (
-   <Main.Navigator
-      screenOptions={{
-        headerShown: false,
-      }}>
-      <Main.Screen name="Tabs" component={TabsNavigator} />
-    </Main.Navigator>
-  );
+  return <HomeScreen />;
};

additionally inside HomeScreen replace ScrollView with normal View

const HomeScreen = () => {
  return (
-    <ScrollView
+    <View
      style={styles.container}
      contentInsetAdjustmentBehavior="automatic">
....

Bundle the Shopping mini app and host it locally again, rester Host's app server and app should work as expected.

  1. App crash -> https://github.com/user-attachments/assets/91c16c6d-a6fe-4e41-ba98-da6e9e1f4010
  2. Ugly temp fix -> https://github.com/user-attachments/assets/dc8d9470-4bfd-4207-8e6d-c20dedd7f832

What's interesting is that when bundle is created with --dev true flag all works normally as well

adamTrz avatar Apr 02 '25 14:04 adamTrz

Looks like a bug in React 19, caused by mixing dev & prod runtimes: https://github.com/facebook/react/issues/32030

There is a PR open with fix for this here, we might try testing that with a local patch: https://github.com/facebook/react/pull/32341

jbroma avatar Apr 03 '25 10:04 jbroma

Hi Guys, same problem here. So the solution is to downgrade to react 18?

britez avatar Jun 23 '25 01:06 britez

My solution was to rewrite the bundle command to --dev true full bundle command: react-native bundle --platform ios --entry-file index.js --dev true It got rid of this error, but I don't recommend using this method in production environments

nhattnopm97 avatar Jun 24 '25 06:06 nhattnopm97

Was that solved? @jbroma

sstatsuya avatar Jul 29 '25 02:07 sstatsuya

I just downgrade react to 18 and works

britez avatar Jul 29 '25 03:07 britez