Preact-cli: Can't use async functions and generators

[alexeyraspopov]

I've found that regeneratorRuntime is disabled.

I'm trying to run react-coroutine in the setup of preact and preact-cli but I'm not able to use async functions. Am I missing some point of the configuration or it is not yet implemented? Thank you in advance.

[developit]

I had planned to add an alternative babel setup for async functions and generators, since Regenerator Runtime is around double the size of the demo applications. I'd be open to enabling it if it was only bundled in conditionally, though. Maybe via Babel's runtime transform?

[alexeyraspopov]

I believe Runtime Transform should do the trick.

[developit]

That would avoid adding it for everyone, yeah. Personally though I am not able to use async/await even if the transform is added, since the overhead is far too high. Maybe babel-plugin-transform-async-to-promises?

[alexeyraspopov]

I recall a conversation in Twitter that this plugin might be a) outdated b) not supported. Sorry, can't find a link.

[developit]

Yup - there's some danger there. There's also work going into newer plugins, I was hoping to find whichever is the best bet for now and have that as the default. To that end though, if we add support for .babelrc you'd be able to add generator support back just by specifying (only) that rule in that file.

[rkostrzewski]

This will be fixed by #56 where users will be able to extend babel configuration and remove transform-regenerator from excluded plugins.

[alexeyraspopov]

@rkostrzewski, I've seen your PR is merged now. Thank you! Should we expect these changes to be included in the next release, or we can close this issue right now?

[rkostrzewski]

@alexeyraspopov yeah, this will come along with 1.2.0

Creating following .babelrc should make async/await work:

{
  "plugins": [
    "transform-regenerator",
    ["transform-runtime", {
      "helpers": false,
      "polyfill": false,
      "regenerator": true
    }]
  ]
}

[rkostrzewski]

As 1.2.0 has some bugs and how .babelrc is applied has changed above won't work in next release.

New way of doing this would be:

export default (config, env, helpers) => {
  let { rule } = helpers.getLoadersByName(config, 'babel-loader');
  rule.options.plugins.push('transform-regenerator');
  rule.options.plugins.push(["transform-runtime", {
    "helpers": false,
    "polyfill": false,
    "regenerator": true
  }]);
};

Beware I haven't tested this 😛

[ethanroday]

@alexeyraspopov @rkostrzewski
Change L2 above to let { rule } = helpers.getLoadersByName(config, 'babel-loader')[0]; (since getLoadersByName() returns an array) and that works for me!

[rkostrzewski]

👍

[ForsakenHarmony]

there's fast-async as well, don't know how big that is tho

[thangngoc89]

@ForsakenHarmony it isn't full spec comply so I'm against it for a dev tool like preact-cli

[developit]

I'd actually be okay baking a some form of really basic async/await support into the CLI - we do the same with Unfetch. If the spec compliance thing is an issue we could have a flag or steer people toward a config that replaces it with the full regenerator-backed version. Might be interesting to have a --spec option that swaps both unfetch and fast-async out for spec-compliant versions?

I'd be curious what options are out there. Personally I love the async/await syntax, but the spec-compliant transpiled output is a total non-starter for me (I believe it's 30-60kb overhead).

Maybe we could take stock of what is out there for async/await solutions and figure out if there's something that fits preact-cli's goals?

[thangngoc89]

@developit for CLI : just wait until node 8 becomes LTS and we're free to use it everywhere.

[developit]

For the CLI we already use it with Babel/regenerator - I meant for the browser transpiled output.

[Snazzyham]

As of version 2.1.0 what's the exact fix for this? I'm having the same issue as described in #77 and using this code in my .babelrc doesn't work.

export default (config, env, helpers) => {
  let { rule } = helpers.getLoadersByName(config, 'babel-loader')[0];
  rule.options.plugins.push('transform-regenerator');
  rule.options.plugins.push(["transform-runtime", {
    "helpers": false,
    "polyfill": false,
    "regenerator": true
  }]);
};

[timwis]

I'm struggling too :/ I tried using babel-preset-env to target only chrome 64, but it's failing on other things. Not sure what the default .babelrc looks like, but maybe that will help. Personally, I'd prefer not to transpile async/await to generators -- for now I don't mind only supporting modern browsers. Though of course I'd like the option to support older browsers.

[Orecic]

@developit how to fix 'preact build' can not use async/await ,thanks

[marvinhagemeister]

@Orecic please don't post duplicated issues. You already opened one for the exact same question :)

[bmitchinson]

I'm still hitting this after upgrading to rc5. Any options aside from disabling uglify all together?