Skip to content

for await syntax not transpiled inside an async function task #585

@monovertex

Description

@monovertex

A trimmed down version of the component where I encountered this:

import { service } from '@ember/service';
import Component from '@glimmer/component';
import { task } from 'ember-concurrency';

export default class Conversation extends Component {
  @service request;

  waitForResponseTask = task(async (createdAt) => {
    const stream = await this.request.getStream();

    for await (const chunk of stream) {
      console.log('chunk', chunk);
    }
  });
}

Throws the following error during build:
Uncaught SyntaxError: Unexpected reserved word (at conversation.gjs?t=1745583550434&import:15:11)

And the following after a cold build:
Image

I assume extracting this code to a separate method would work, but it still threw me off until I figured out what happened.

For context, the MDN docs on this syntax: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for-await...of

Thanks to NullVoxPopuli on Discord for pointing out to me that it happens because of the transpilation into a generator function.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions