'show source' does not work on first run when debugging

[nouvist]

Bug Description

• I have run gradle clean and confirmed this bug does not occur with JSC
• I have follow documentation about how to enable Hermes engine on React Native

Hermes version: 0.9.0
React Native version (if any): 0.66.1
OS version (if any): Android 11
Platform (most likely one of arm64-v8a, armeabi-v7a, x86, x86_64): arm32_64binder

Steps To Reproduce

1. Create toString-able function
2. Run react-native android

code example:

function test() {
  'show source';
  alert(1337);
}
console.log(test.toString());

The Expected Behavior

The Function.prototype.toString() should return string of its function script.

The Actual Behavior

It return function() { [bytecode] } instead. But, after I change some line, it does work. So, it is works after HMR on the file that using 'show source', not on first run / after manual reloading / HMR on other file.

But when I build as release variant, it works as expected.

[neildhar]

Hi @nouvist, thanks for reporting this bug, I've confirmed that I can reproduce it as described. In a debug build it initially just prints function() { [bytecode] }, but changing code and reloading or using a release build causes the function source to show up correctly.

[chiubaka]

Also noticing this as I attempt to upgrade to RN 0.65.2 to enable Hermes as a prerequisite to react-native-vision-camera and react-native-reanimated v2. Works fine when I create a release build, but doesn't work when I run in debug / development.

I'm not able to get the expected behavior after changing a line and allowing the application to reload. Guessing I may need to upgrade to Hermes 0.9.0 for that.

I also tried to use hermes-release.aar rather than hermes-debug.aar in debug builds, but that didn't seem to solve the issue.

Any news on a potential fix for this?

[PierreVanobbergen]

Same problem on my side.
The first run in debug will always return function() { [bytecode] }, and also after a new JS bundle download.
To fix in debug, you just need to hot reload the file containing the .toString method, and it will work fine

Works in release tho.

[chrfalch]

Upvoting this issue - its a bit of a bummer now that the functionality for toString is implemented and available.

[AlenToma]

working when I created a new expo app, but when I implemented it in my existing old expo app it did not work.

Have not try in release yet.

[nouvist]

I am nothing near as familiar to low level programming. sorry that I couldn't contribute any code to this repo.
but I made a Babel plugin for "show source" directive. me myself is using this for now as temporary solution to this issue.

but currently, this plugin will throw an error when using it on function declaration. so, if you wanna use it, use arrow function or function expression instead. and also, Hermes behavior will override the .toString() of any function that have "show source" directive on it, which is also has an impact to this plugin. so, if you wanna use this plugin, you should change the directive to other than "show source" to prevent conflicting with Hermes native implementation.

[jaredh159]

I can confirm the behavior is the same on ios. Initially renders with [bytecode], but hmr triggers correct behavior. Also works in release mode.

[paradite]

Well this has just became a problem again after upgrading Expo SDK to 48 and React Native to 0.71.8, where HMR doesn't seem to work as expected and the whole app got reloaded when I tried to trigger a HMR.

Update: Using the plugin that @nouvist developed addressed the issue for me:

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      [
        'babel-plugin-show-source',
        {
          directive: 'show source please',
          removeFunction: true,
          // change the directive when in use with hermes
        },
      ],
    ],
  };
};

[Fuzzyma]

@nouvist also solved another problem with its solution: the transpilation to es5 which broke my code since it introduced helper functions that are not available in the function itself. Thanks so much! Only had to remove the typescript types (wrote another hacky babel plugin for that)