question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Bug when mixing async/await and spreading on function's arguments

See original GitHub issue

Bug Report

  • I would like to work on a fix!

Why not if I can have some hints on where to look for 🤔

Current Behavior A clear and concise description of the behavior.

It seems that the code produced when transpiling (await p).print(...args) using @babel/preset-env with its default configuration is not doing the same as the original code. The print function is called with an undefined context while I expected it to be called with the context of the result of await p.

By the way a quick fix (in my case) was to extract await p into a variable first and call print on this variable right after - see the linked repo. The bug only occur when I have both await and ...args on the same statement.

Input Code

async function code(p, ...args) {
  // Original code: Succeeds
  // Transpiled code: Fails with "TypeError: Cannot read property 'x' of undefined"
  console.log((await p).print(...args));
}

// Example
const instance = {
  x: 0,
  y: 1,
  print() {
    return `${this.x} ${this.y}`;
  }
};
const promiseInstance = Promise.resolve(instance);
code(promiseInstance);

Expected behavior/code A clear and concise description of what you expected to happen (or code).

I expect the transpile version of the code to behave the same way as the original source code.

Babel Configuration (babel.config.js, .babelrc, package.json#babel, cli command, .eslintrc)

  • Filename: .babelrc
{
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "regenerator": true
      }
    ]
  ],
  "presets": ["@babel/preset-env"]
}

Environment

  System:
    OS: Windows 10 10.0.19041
  Binaries:
    Node: 12.11.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.19.1 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 6.11.3 - C:\Program Files\nodejs\npm.CMD

Possible Solution

Additional context/Screenshots Add any other context about the problem here. If applicable, add screenshots to help explain.

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:3
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
nicolo-ribaudocommented, Mar 6, 2020

Thanks for the repository! It makes it way easier to debug this bug.

I managed to make a simpler reproduction:

function* code() {
  var _ref;
  console.log((_ref = yield).print.call(_ref));
}

const instance = {
  x: 0,
  y: 1,

  print() {
    return this === instance;
  }

};
const it = code();

it.next();
it.next(instance);
{
  "sourceType": "script",
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "regenerator": true
      }
    ],
    "@babel/transform-regenerator"
  ]
}

PS. I noticed that you are using .babelrc. It works, but probably what you want is babel.config.js/babel.config.json!

0reactions
nicolo-ribaudocommented, Mar 22, 2020
Read more comments on GitHub >

github_iconTop Results From Across the Web

Async/Await - Best Practices in Asynchronous Programming
Mixed async and blocking code can cause deadlocks, more-complex error handling and unexpected blocking of context threads. The exception to this guideline is ......
Read more >
Async/Await Error Handling - Beginner JavaScript - Wes Bos
We will talk about error handling strategies for async await in this lesson. ... Go and delete everything except for these two functions:...
Read more >
Can await and then be mixed in one implementation?
Yes, you can use mix await and then syntax - they both work on promises - but you shouldn't do so in the...
Read more >
Understanding the Event Loop, Callbacks, Promises, and ...
The key takeaway here is that callback functions are not asynchronous— setTimeout is the asynchronous Web API responsible for handling ...
Read more >
async function - JavaScript - MDN Web Docs - Mozilla
The async function declaration declares an async function where the await keyword is permitted within the function body. The async and await ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found