Async arrow functions are not supported, making 'show source' unusable inside them

[dzengi]

I'm using the 'show source' directive, however it only works with synchronous functions. With asynchronous ones, I still only see bytecode. Android/iOS the same.

"react": "18.2.0", "react-native": "0.72.7", "react-native-webview": "13.6.3"

export const syncFunc = () => {
  'show source';
  let a = 5;

  for (let index = 0; index <= 10; index++) {
    a += index;
  }

  console.log('syncFunc', a);
};

export const asyncFunc = async () => {
  'show source';
  let a = 5;

  for (let index = 0; index <= 10; index++) {
    a += index;
  }

  console.log('asyncFunc', a);
};

[avp]

Thanks for the report. Hermes doesn't support async functions directly. They're being lowered by Babel to either generator functions or plain functions using regenerator by your build. In either case, the function that's being referenced by code outside the async function isn't likely to have the "show source" directive in it any more.

e.g. if your babel set up lowers to generators, you'd get this output. Notice that "show source" has been moved to an inner function.

This will be fixed when we add support for async functions directly, but until then you might be able to work around it by putting the "show source" directive in an outer non-async function.

EDIT: When I say Hermes doesn't support async functions above, I mean async arrow functions specifically.

[tmikov]

Reclassifying as enhancement, since technically the solution to this is to implement async arrow functions.

[KonstantinZhukovskij]

@tmikov When is a fix expected? That is, using async in regular functions (not arrows) will work?

[tmikov]

@KonstantinZhukovskij async functions have been supported by Hermes for years. Only async arrow functions are not implemented. However I don't know how React Native configures Babel.

[dzengi]

Thanks for your reply @tmikov. Could you please provide an example of how I can use the functions? Because indeed, any functions (both ordinary and arrow) turn into generators and the directive no longer works there.

[tmikov]

Hi @dzengi, our strong recommendation is that converting a running function to source code, especially in the presence of Babel transformations, is almost never a good idea. You are much better off just copying the function into a string manually.

If you really need to do it, you need to look into how React Native configures Babel plugins in Metro. Unfortunately our team does't have much expertise in either Babel or Metro, so take this with a grain of salt and ideally confirm with someone who understands Babel and Metro:

Hermes does not currently support async arrow functions and for await. If you need these features, you need to enable Babel plugins to:

1. Convert arrow functions to ES5 functions (probably @babel/plugin-transform-arrow-functions).
2. Lower async generators (may be @babel/plugin-async-generator-functions).

This has not been tested by us.

The good news is that we will be releasing a beta version of Hermes supporting most ES6+ features in 2024 Q1, so at that time none of these plugins will be necessary.

Hope this helps!

[kleydon]

Has anyone figured out how to configure plug-ins, to support async arrow functions while Hermes does not yet do so? Would really love to know how to do this.