Hermes "show source" not working in debug mode.

[AlenToma]

Bug Description

I recently Upgraded react-native to 0.68.2 and decided to use hermes.

as I have some library that uses function toString, then I decided to implement show source to those files it needed.

Now this is not the problem.
The problem is that it is impossible to debug my app eg running react-native run-android as the show source do not work.

it works fine when running react-native run-android --variant=release and everything works as expected.

Is there is reason or settings I am missing ?

• [*] I have run gradle clean and confirmed this bug does not occur with JSC

Hermes version: 0.11.0
React Native version (if any): 0.68.2
OS version (if any): android 30
Platform (most likely one of arm64-v8a, armeabi-v7a, x86, x86_64): armeabi-v7a (not sure) it is an emulator using genymotion

Steps To Reproduce

        const fn = function <T>(f: (x: T) => any) { return f; };
        "show source" 
        alert(fn<NovelReaderSettings>(x => x.backGroundColor).toString());

The Expected Behavior

Should show the source code instead I am getting [bytecode]

I will also post my package.json as I think that it has something to do with it.

  "dependencies": {
    "@alentoma/react-native-selectable-text": "^1.5.8",
    "@alentoma/usestate": "^1.2.4",
    "@expo/vector-icons": "^13.0.0",
    "@miblanchard/react-native-slider": "^1.5.0",
    "@react-native-community/clipboard": "^1.5.1",
    "@react-native-community/masked-view": "^0.1.10",
    "@react-native-community/netinfo": "8.2.0",
    "@react-native-firebase/app": "^14.7.0",
    "@react-native-firebase/auth": "^14.7.0",
    "@react-native-firebase/database": "^14.7.0",
    "@react-native-firebase/firestore": "^14.7.0",
    "@react-navigation/bottom-tabs": "^6.3.1",
    "@react-navigation/material-top-tabs": "^6.2.1",
    "@react-navigation/native": "^6.0.10",
    "@react-navigation/stack": "^6.2.1",
    "advanced-html-parser": "^1.0.8",
    "crypto-js": "3.1.9-1",
    "eslint-plugin-react-hooks": "^4.4.0",
    "expo": "^45.0.0",
    "expo-ads-admob": "~13.0.0",
    "expo-asset": "~8.5.0",
    "expo-background-fetch": "~10.2.0",
    "expo-document-picker": "~10.2.1",
    "expo-file-system": "~14.0.0",
    "expo-font": "~10.1.0",
    "expo-google-sign-in": "~10.2.0",
    "expo-in-app-purchases": "~13.0.0",
    "expo-intent-launcher": "~10.2.0",
    "expo-keep-awake": "~10.1.1",
    "expo-media-library": "~14.1.0",
    "expo-modules-core": "~0.9.2",
    "expo-notifications": "~0.15.2",
    "expo-screen-orientation": "~4.2.0",
    "expo-speech": "~10.2.0",
    "expo-splash-screen": "~0.15.1",
    "expo-sqlite": "~10.2.0",
    "expo-sqlite-wrapper": "^1.1.9",
    "expo-status-bar": "~1.3.0",
    "expo-updates": "~0.13.2",
    "hermes-engine": "^0.11.0",
    "hermes-parser": "^0.8.0",
    "js-base64": "^3.6.1",
    "jsc-android": "^250230.2.1",
    "metro-config": "0.64.0",
    "node-fetch": "^2.6.1",
    "node-html-parser": "^4.1.4",
    "node-html-scraper": "^1.0.9",
    "obfuscator-io-metro-plugin": "^2.1.1",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-native": "0.68.2",
    "react-native-background-actions": "^2.6.7",
    "react-native-eject": "^0.1.2",
    "react-native-epub-creator": "^1.2.1",
    "react-native-exit-app": "^1.1.0",
    "react-native-floating-action": "^1.22.0",
    "react-native-gesture-handler": "~2.2.1",
    "react-native-image-zoom-viewer": "^3.0.1",
    "react-native-modal": "^13.0.1",
    "react-native-pager-view": "5.4.15",
    "react-native-pin-parallax-view": "^0.0.6",
    "react-native-progress": "^4.1.2",
    "react-native-reanimated": "~2.8.0",
    "react-native-render-html": "^5.0.1",
    "react-native-safe-area-context": "4.2.4",
    "react-native-screens": "~3.11.1",
    "react-native-smtp-mailer": "github:AlenToma/react-native-smtp-mailer",
    "react-native-universal-actionsheet": "github:AlenToma/react-native-universal-actionsheet",
    "react-native-vector-icons": "^8.0.0",
    "react-native-zip-archive": "^6.0.3",
    "recyclerlistview": "^3.0.5",
    "utils-decorators": "^1.10.2",
    "uuid": "^3.4.0"
  },
  "devDependencies": {
    "@babel/code-frame": "^7.12.11",
    "@babel/core": "^7.12.9",
    "@babel/runtime": "^7.17.8",
    "@react-native-community/eslint-config": "^2.0.0",
    "@types/crypto-js": "^4.0.2",
    "@types/fbemitter": "^2.0.32",
    "@types/jest": "^26.0.20",
    "@types/node-fetch": "^3.0.3",
    "@types/react-native": "~0.67.6",
    "@types/react-native-vector-icons": "^6.4.6",
    "@types/react-test-renderer": "^17.0.0",
    "@types/uuid": "^8.3.1",
    "babel-jest": "^26.6.3",
    "eslint": "^7.32.0",
    "javascript-obfuscator": "^4.0.0",
    "jest": "^26.6.3",
    "metro-react-native-babel-preset": "^0.64.0",
    "typescript": "~4.3.5"
  },

[tmikov]

Possible duplicate of #612

[AlenToma]

Possible duplicate of #612

It is not the same as it is not working no matter how many time i do changes to a file or reload.

[AlenToma]

If you have a problem duplicating the problem, I could upload my project and remove all code from it.

This problem happened when you update an old project to a new one.

When I created a new expo bare project the debugging work somehow.

[denissb]

For those of you wondering, I just tried reproducing this problem on React Native 0.71.3 and it is no longer valid on Android, but I am experiencing the issue on iOS.

My basic reproduction scenario:

const testFunction = () => {
  'show source';
  Alert.alert('Hello world!!');
}

function App(): JSX.Element {
  const isDarkMode = useColorScheme() === 'dark';

  const showAlert = useCallback(() => {
    console.log(testFunction.toString());
    testFunction();
  }, []);
  ....

This implementation logs the following to the console regardless of weather I am in debug or release modes using Hermes engine:

function testFunction() {
    'show source';

    _reactNative.Alert.alert('Hello world!!');
  }

[arlovip]

The same issue. For me, it works normally in release. However, it won't work after downloading a new js bundle using code push, which causes my echarts tooptip using formatter function does not show as expected. Any fix for that?

[congshengwu]

@lchenfox
I also use the formatter function in Echarts, I have been watching this issue for a long time and also subscribed to this issue thread for a long time.

Finally, I have found two solutions:

• Use this library wuba/react-native-echarts to render Echarts. It's not a WebView-based solution, so there will be no issue caused by bytecode conversion as there is no WebView needed.

• Use this library react-native-echarts-pro(1.9.0-beta.0) or td-design/react-native-echarts. They both support using the formatter function in string format and converting the string format function back to a real function in the WebView environment. Then there will be no bytecode conversion issue, and working for both debug and release mode.

[arlovip]

@lchenfox I also use the formatter function in Echarts, I have been watching this issue for a long time and also subscribed to this issue thread for a long time.

Finally, I have found two solutions:

• Use this library wuba/react-native-echarts to render Echarts. It's not a WebView-based solution, so there will be no issue caused by bytecode conversion as there is no WebView needed.
• Use this library react-native-echarts-pro(1.9.0-beta.0) or td-design/react-native-echarts. They both support using the formatter function in string format and converting the string format function back to a real function in the WebView environment. Then there will be no bytecode conversion issue, and working for both debug and release mode.

Thank u so much. I'll have a try on that. Hope it works after downloading and installing a new patch package using react-native-code-push.

[arlovip]

@congshengwu Unfortunately, I tried react-native-echarts-pro as you said above. It does not work with react-native-code-push. See the issue link I made Function toString does not behave the same with hermes turned on #114

[petre-symmatix]

I also have almost the exact same problem (using highcharts instead of echarts)
I found a bad work around (emphasis on the work) for this in the mean time. while running the expo metro build, if you modify and save the file(s) with the formatter function it will for some reason re-bundle correctly (I.E without the "[bytecode]" result)

[tmikov]

I already commented about this om #114 . Copying it here for visibility:

In order to identify whether this is a problem in Hermes, we need to be able to examine the input given to Hermes. Unfortunately we can't help debug parts of the build pipeline that happen before Hermes. It is quite possible that the "show source" annotation is stripped before it gets to the Hermes compiler, for example by a minifier.

[tmikov]

Closing since no activity

[tmikov]

I am applying the label fixed-in-sh, meaning that this has been fixed in Static Hermes but is "Wontfix" in Hermes. We need this label because technically SH has not been released yet, but at the same time we don't want to keep issues like this open.