async/await in examples with live editor doesn't work

[maksnester]

🐛 Bug Report

This code put in the live editor

function Clock(props) {
  async function test() {
    alert(1);
  }
  test();

  return <div>Doesn't matter</div>;
}

throws a runtime error in the live editor, but that doesn't happen on react-live demo page

Have you read the Contributing Guidelines on issues?

yep

To Reproduce

1. Open https://v2.docusaurus.io/docs/markdown-features/#interactive-code-editor
2. Put the code from above inside editable code block
3. See runtime error

Expected behavior

It works as that code works on react-live demo page.

Actual Behavior

throws a runtime error in the live editor

CompileError: Transforming async functions is not implemented. Use `transforms: { asyncAwait: false }` to skip transformation and disable this error. (2:2)
1 : return (function Clock(props) {
2 :   async function test() {
      ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

Your Environment

    "@docusaurus/core": "2.0.0-alpha.58",
    "@docusaurus/module-type-aliases": "^2.0.0-alpha.51",
    "@docusaurus/preset-classic": "2.0.0-alpha.58",
    "@docusaurus/theme-live-codeblock": "^2.0.0-alpha.39",

or the same you have on your documentation site.

Reproducible Demo

https://github.com/facebook/docusaurus/tree/master/website

[slorber]

This asyncAwait thing seems to be an option of Bublé, the live transformer. Not sure where it is activated on the react-live demo.

We also use a fork of Bublé ("@philpl/buble": "^0.19.7",), don't know why exactly, will have to understand why

[slorber]

@kitten hi, do you think we should still use your buble fork (seems it is not updated, but optimize for bundle size) or maybe use latest from main repo?

Also, I'm not sure to understand how you react-live demo supports async await, I don't see the asyncAwait: false in the Bublé transforms

[9oelM]

I'm working on this issue.