Adding a comment to an async function before the first argument can result in a syntax error

[cwohlman]

Bug Report

Current behavior
If you place a comment before the first (and only) argument of an async function (but after the async keyword), and the function has only a single argument, and if you use the await keyword inside that function, the compiled javascript won't run because the function isn't marked as async.

You get the following error when you run the compiled code:

babel-async-bug-repro/actual.js:5
  return foo(await a);
             ^^^^^

SyntaxError: missing ) after argument list
    at Module._compile (internal/modules/cjs/loader.js:720:23)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
    at Module.load (internal/modules/cjs/loader.js:643:32)
    at Function.Module._load (internal/modules/cjs/loader.js:556:12)
    at Function.Module.runMain (internal/modules/cjs/loader.js:839:10)
    at internal/main/run_main_module.js:17:11

Here's a full reproduction

• https://github.com/xolvio/babel-async-comment-bug

Input Code

const x = async (
  // some comment <- this comment is the problem
  a
) => {
  return foo(await a);
};

function foo(a) {
  return a;
}

Expected behavior
The compiled code should run without error. Presumably by making sure the async keyword is always on the same line as the function declaration

Babel Configuration (.babelrc)

The default config will generate the error (as of the day I posted this), also the following config will generate the error (note the borwserlist config is necessary to generate the error, otherwise regeneratorRuntime is used instead of emitting the async/await keywords):

• Filename: .babelrc

{
  "presets": ["@babel/preset-env"]
}

• Filename: package.json

  ...
  "scripts": {
    "build": "babel input.js --out-file actual.js",
    "test": "node actual.js"
  },
  "devDependencies": {
    "@babel/cli": "^7.10.4",
    "@babel/core": "^7.10.4",
    "@babel/preset-env": "^7.10.4"
  },
  "browserslist": [
    "node 12",
    "last 1 Chrome version"
  ]

Environment

  System:
    OS: macOS Mojave 10.14.6
  Binaries:
    Node: 12.6.0 - /usr/local/bin/node
    Yarn: 1.17.3 - /usr/local/bin/yarn
    npm: 6.9.0 - /usr/local/bin/npm
  npmPackages:
    @babel/cli: ^7.10.4 => 7.10.4 
    @babel/core: ^7.10.4 => 7.10.4 
    @babel/preset-env: ^7.10.4 => 7.10.4 

Possible Solution
I assume that always wrapping the arguments of an async function in parenthesis (and keeping the async keyword on the same line as the opening parentheses) would fix the issue.

[babel-bot]

Hey @cwohlman! We really appreciate you taking the time to report an issue. The collaborators on this project attempt to help as many people as possible, but we're a limited number of volunteers, so it's possible this won't be addressed swiftly.

If you need any help, or just have general Babel or JavaScript questions, we have a vibrant Slack community that typically always has someone willing to help. You can sign-up here for an invite."

[cwohlman]

I think something like this might solve the issue: xolvio/babel@main...suggested-fix-11830.

[JLHwung]

@cwohlman The suggested fix looks good to me. Can you send a PR?

[cwohlman]

Sure, I can take a stab at it.

[cwohlman]

Ok, took a first stab: #11836, it's not complete as I wasn't able to fix the tests that depend on the old behavior (which should probably be preserved when it won't cause a bug).