Hermes "show source" not working in debug mode.

AlenToma commented 2 years ago

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 commented 2 years ago

Possible duplicate of https://github.com/facebook/hermes/issues/612

AlenToma commented 2 years ago

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 commented 2 years ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

@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 commented 1 year ago

@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 commented 1 year ago

@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 commented 1 year ago

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 commented 1 year ago

I already commented about this om https://github.com/facebook/hermes/issues/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.

facebook / hermes