Array.prototype.flat() Method Breaks Application in Release Build

[wipmate]

Problem Description

When calling Array.prototype.flat() in a react-native-windows project, the release build is broken, while the debug build runs smoothly.

Steps To Reproduce

1. As a minimal reproducible example, a component such as the following may be created:

   
   import React from "react";
   import { StyleSheet, View } from "react-native";

export default function() { return (

);

}

const styles = StyleSheet.create({ content: { flex: 1, }, });

(Alternatively, as a more complete example, the `DropDownPicker` component from the library [react-native-dropdown-picker](https://github.com/hossein-zare/react-native-dropdown-picker) may be used in a project. Internally, the library calls `Array.prototype.flat()` in multiple places.)

2. A debug build from the project shall be created by running:
```powershell
npx react-native run-windows

The expected behavior is that in the debug build, the application runs smoothly.

3. A release build from the project shall be created by running:

   npx react-native run-windows --release

   In the release build, the app will show a blank screen.

Expected Results

The expected behavior is that the application will show a blank screen. This depends on when the element becomes active:

• when the element is active on the initial screen, the app will start and show blank view immediately
• when the element is switched active on user interaction while the app is already running, the app will become a blank view

CLI version

10.2.2

Environment

npx react-native -v: 10.2.2
npm ls react-native-windows: react-native-windows@0.71.11
npm -v: 9.5.0
node -v: v18.15.0
msbuild version: 17.6.33815.320
<UseHermes>false</UseHermes>

Target Platform Version

10.0.19041

Target Device(s)

Desktop

Visual Studio Version

Visual Studio 2022

Build Configuration

Release

[chrisglein]

In the release build, the app will be partially broken or crash completely.

Can you clarify whether it's partially broken or crashing? If it's crashing there should be a callstack you can get from the debugger. Is that happening? Do you get any errors from the Metro session?

A break in Array.prototype.flat() seems odd as that it isn't really handled in the context of React Native for Windows (and isn't particularly new). It could be broken by some sort of Babel configuration and isn't being transpiled correctly? (as in this discussion from a few years ago)

Are you opting into using the Hermes JavaScript engine or the default for an RNW project (currently Chakra)?

[wipmate]

I made some further investigations and couldn't reproduce any crash, the app just switches to a blank view once an element calling Array.prototype.flat() becomes active.

In a WinDbg debug session, I'm getting the following exception a couple of times when the element is switched to active but I'm not sure whether its related. (If there's a better way to debug the release build I would highly appreciate if you could share some instructions on that.)

(273c.4a28): C++ EH exception - code e06d7363 (first chance)

A break in Array.prototype.flat() seems odd as that it isn't really handled in the context of React Native for Windows (and isn't particularly new). It could be broken by some sort of Babel configuration and isn't being transpiled correctly?

That would be a possible explanation, although I must admit that I don't have a clear picture about everything that's happening in the background when doing debug/release builds.

Are you opting into using the Hermes JavaScript engine or the default for an RNW project (currently Chakra)?

My project was previously configured with <UseHermes>false</UseHermes>. When enabling Hermes, the app successfully launches in release mode which solves the issue for me.

Thanks for the swift reply @chrisglein! Feel free to close the issue if you think that no further investigation is needed.

[AhmedMustafa505]

Have you find a solution for this ? I'm facing the same issue my release build is showing a blank screen. but I don't have elements calling Array,prototype.flat().

[wipmate]

@AhmedMustafa505 in my case the issue was caused by the JavaScript code breaking my application. First I had to identify which section of the code was causing the issue. I accomplished this by stripping down my application until it worked in release build and then re-added the components one by one. With the hint from @chrisglein I switched the JavaScript engine from Chakra to Hermes which helped in my case. You can do the same by setting this entry in windows/ExperimentalFeatures.props:

<UseHermes>true</UseHermes>

[Victor0814gui]

@AhmedMustafa505 Can you share the dependencies you have in your project?

[AhmedMustafa505]

@AhmedMustafa505 Can you share the dependencies you have in your project?

"dependencies": { "@reduxjs/toolkit": "^1.9.5", "@xmpp/client": "^0.13.1", "@xmpp/debug": "^0.13.0", "base64-js": "^1.5.1", "buffer": "^6.0.3", "react": "18.2.0", "react-native": "0.71.11", "react-native-vector-icons": "^9.2.0", "react-native-windows": "0.71.26", "react-redux": "^8.1.1" },

[AhmedMustafa505]

@AhmedMustafa505 in my case the issue was caused by the JavaScript code breaking my application. First I had to identify which section of the code was causing the issue. I accomplished this by stripping down my application until it worked in release build and then re-added the components one by one. With the hint from @chrisglein I switched the JavaScript engine from Chakra to Hermes which helped in my case. You can do the same by setting this entry in windows/ExperimentalFeatures.props:

<UseHermes>true</UseHermes>

I did this and the problem still exists. is there a way I can check the logs or create a log file that can be created with the release build so I can check the errors just like debugging ?

[Victor0814gui]

@AhmedMustafa505 I'm not sure if there's another way, but you can compile the project through Visual Studio, where you'll be able to see all the logs.

[chrisglein]

If Hermes helps, that's great. It does appear there are some problems in the error handling here that we should investigate regardless.

Red box errors are removed in release (because that's not something you'd want in a published app). But error handlers can be enabled in release bundle. More investigation there would help isolate if this is a transpile issue or something else.

[AhmedMustafa505]

@AhmedMustafa505 I'm not sure if there's another way, but you can compile the project through Visual Studio, where you'll be able to see all the logs.

• I'm already compiling my app with visual studio, the debug build opens a remote debugger in chrome which allows me to trace the errors, but in release build the remote debugger isn't available so I can't check the logs.

[AhmedMustafa505]

If Hermes helps, that's great. It does appear there are some problems in the error handling here that we should investigate regardless.

Red box errors are removed in release (because that's not something you'd want in a published app). But error handlers can be enabled in release bundle. More investigation there would help isolate if this is a transpile issue or something else.

How can I enable error handlers in release build ?

[wipmate]

@AhmedMustafa505 this issue seems related: https://github.com/microsoft/react-native-windows/issues/11195

I assume that manual steps are involved for now by implementing a custom error handler with the help of components documented here: https://microsoft.github.io/react-native-windows/docs/native-api/IRedBoxHandler