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.

Async function breaks assigning to new objects in for loops

See original GitHub issue

Verify canary release

  • I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 10 Home
Binaries:
  Node: 16.16.0
  npm: N/A
  Yarn: N/A
  pnpm: N/A
Relevant packages:
  next: 12.3.1-canary.1
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0

What browser are you using? (if relevant)

Not relevant

How are you deploying your application? (if relevant)

Not relevant

Describe the Bug

Assigning to an object in a for loop inside an async function seems to not work properly. It seems to always assign the final value to be iterated over.

image

The works array only has string literals pushed to it, so it works as expect and ends up with ["one", "two", "three"].

The broken array has objects assigned to it, so it is broken and gets [{ input: "three }, { input: "three }, { input: "three }] even though it’s assigned to with the exact same variable in the exact same for loop.

Everything works as expected when it’s not an async function.

This cannot be reproed on next@12.2.6-canary.8
But can be reproed on next@12.2.6-canary.9 and it remains present in next@canary as of 14/09/22.

See the README in the attached repro for more details.

Expected Behavior

Both the works and broken arrays should get "one", "two", and "three".

Link to reproduction

https://github.com/tobysmith568/nextjs-repro

To Reproduce

Push objects to an array using a for loop in an async function.

image

Issue Analytics

  • State:closed
  • Created a year ago
  • Reactions:1
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

github_iconTop Results From Across the Web

Asynchronous Process inside a javascript for loop [duplicate]
The for loop runs immediately to completion while all your asynchronous operations are started. When they complete some time in the future ...
Read more >
for await...of - JavaScript - MDN Web Docs
The for await...of statement creates a loop iterating over async iterable objects as well as sync iterables. This statement can only be used ......
Read more >
JavaScript async and await in loops | Zell Liew
When you use await , you expect JavaScript to pause execution until the awaited promise gets resolved.
Read more >
for await...of - JavaScript - UDN Web Docs: MDN Backup
The for await...of statement creates a loop iterating over async iterable objects as well as on sync iterables, including: built-in String , Array...
Read more >
JavaScript Async - W3Schools
The two arguments (resolve and reject) are pre-defined by JavaScript. We will not create them, but call one of them when the executor...
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