Create-react-app: Enable async iterators in Babel configuration

[msikma]

Recently, I tried to write an async generator for a project I'm working on. Unfortunately it doesn't work because Create React App isn't configured to transpile them by default. As far as I know, the only way to get this working is by ejecting and adding the plugin—is this correct?

Async iteration is a stage 3 proposal now, so it's unlikely it will change. Actually, I have no idea what kind of standard or process exists for changing the default Babel configuration in Create React App, so I apologize if this isn't an appropriate request or if the issue is a lot more complicated than I think. But I just figured I'd raise the issue...

Just for completeness, here's a simple version of what I was trying to do. In this repo, I've ejected, installed babel-plugin-transform-async-generator-functions, and added the transform-async-generator-functions plugin to the package.json.

[gaearon]

I don't object against supporting it. However this is a bit worrying:

Note that the semantics implemented there are slightly out of date compared to the current spec text in various edge cases.

I'd like to bring it in when Babel supports the latest semantics.

[jburton-scottlogic]

Is there any update on this or information on the edge cases that need to be rectified?

[msikma]

I believe Babel was actually fixed as of this PR: https://github.com/babel/babel/pull/6452 - but I'm not 100% sure and I haven't tested it. I'm also not sure if this has been released yet.

[gaearon]

This is probably only going to be released in Babel 7.

[jburton-scottlogic]

Excellent, thanks for the response! So when Babel 7 is released async generators will be supported by default in create-react-app?

[gaearon]

When it's released and initial bugs are fixed. I would expect quite a few in a major release. So maybe in a month or so after it's out.

[leetercola]

Does this mean async await doesn't work in CRA right now?

[Timer]

No. Async await works fine @leetercola.

[alexandrzavalii]

@Timer It failed when I was running tests

[xaun]

I am new to using async/await, but I am having problems in CRA right now

async function foobar() {
      return 'foo';
}
var result = await foobar();

[viankakrisna]

@xaun await can only be used in async function so it is expected in your case that it's gonna be a syntax error. However, it's only a sugar for promises. so you can do

foobar()
   .then(result => {
       // do what you want with the result
    })

or if you still want to use await in top level

(async function(){
   var result = await foobar();
   // the rest of the code that depends on the result
}())

I suggest that you file another issue / go to stack overflow if you still have problems as this issue is more a discussion for enabling the support for https://jakearchibald.com/2017/async-iterators-and-generators/

async function getResponseSize(url) {
  const response = await fetch(url);
  let total = 0;

   // notice the `for await` here
  for await (const chunk of response.body) {
    total += chunk.length;
  }
  return total;
}

[xaun]

Oh right, thanks @viankakrisna, very helpful, cheers

[infiniteluke]

is anyone working on this now that we're on babel 7? I'm happy to submit a PR.

[stale[bot]]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[infiniteluke]

👋🏻 This currently works in CRA.

Here's an example:
https://github.com/infiniteluke/cra-async-generators-example/blob/master/src/App.js#L6

Here's that example deployed:
https://async-generator-test-etwkpykkpf.now.sh/

I think this issue can be safely closed 🎉

Cheers

[ianschmitz]

Thanks for investigating @infiniteluke !