Modern Mode: async/awaits are transpiled into generator functions

[romansp]

Version

3.8.2

Reproduction link

https://github.com/romansp/vue-modern-async-await-generator

Environment info

Environment Info:

  System:
    OS: Windows 10
    CPU: (8) x64 Intel(R) Core(TM) i7-6700 CPU @ 3.40GHz
  Binaries:
    Node: 10.13.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.15.2 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.4.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: 44.17763.1.0
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0
    @vue/babel-plugin-transform-vue-jsx:  1.0.0
    @vue/babel-preset-app:  3.8.0
    @vue/babel-preset-jsx:  1.0.0
    @vue/babel-sugar-functional-vue:  1.0.0
    @vue/babel-sugar-inject-h:  1.0.0
    @vue/babel-sugar-v-model:  1.0.0
    @vue/babel-sugar-v-on:  1.0.0
    @vue/cli-overlay:  3.8.0
    @vue/cli-plugin-babel: ^3.8.0 => 3.8.0
    @vue/cli-plugin-eslint: ^3.8.0 => 3.8.0
    @vue/cli-service: ^3.8.0 => 3.8.0
    @vue/cli-shared-utils:  3.8.0
    @vue/component-compiler-utils:  2.6.0
    @vue/eslint-config-airbnb: ^4.0.0 => 4.0.0
    @vue/preload-webpack-plugin:  1.1.0
    @vue/web-component-wrapper:  1.2.0
    eslint-plugin-vue: ^5.0.0 => 5.2.2 (4.7.1)
    vue: ^2.6.10 => 2.6.10
    vue-eslint-parser:  5.0.0 (2.0.3)
    vue-hot-reload-api:  2.3.3
    vue-loader:  15.7.0
    vue-style-loader:  4.1.2
    vue-template-compiler: ^2.6.10 => 2.6.10
    vue-template-es2015-compiler:  1.9.1
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

1. yarn build --modern
2. open dist/js/app.[hash].js file
3. try searching for async or await

What is expected?

await is preserved and usage is found

What is actually happening?

await is transpiled into function*() generator function

---

This was definitely working some time ago, and awaits were preserved in modern bundle. Can't really tell when this behavior has changed, but maybe after upgrading to babel 7? Can be reproduced using @vue/cli 4.0.0-alpha.1 as well.

[haoqunjiang]

It's due to an update in @babel/preset-env
This line in specific: https://github.com/babel/babel/pull/9566/files#diff-7a9217e2e0407684e1f56035fe94e7aeR224

Modern build is built for all browsers that support <script type=module>, so the target browser range is safari >= 10.1 according to this line https://github.com/babel/babel/blob/a596da28220b69df6265192d1ca788e6b9ca67aa/packages/babel-preset-env/data/built-in-modules.json#L6

And async-to-generator plugin is needed for safari <= 11 after the abovementioned commit, thus the result.

[d9k]

My custom babel.config.js to fix this issue:

const isModern = process.argv.includes(`--modern`);

module.exports = {
  presets: [
    [
      "@vue/app", {
        exclude:
          isModern
            ? [
              'transform-async-to-generator',
              'transform-regenerator',
              'proposal-async-generator-functions'
            ]
            : [],
      }
    ]
  ],
};