Modern mode is breaking about @vue/cli-service and @vue/cli-plugin-typescript 3.4.0

[yoyo930021]

Version

3.4.0

Reproduction link

https://github.com/yoyo930021/modern-mode-example

Environment info

Environment Info:

  System:
    OS: macOS 10.14.3
    CPU: (4) x64 Intel(R) Core(TM) i5-5257U CPU @ 2.70GHz
  Binaries:
    Node: 10.14.1 - ~/.nvm/versions/node/v10.14.1/bin/node
    Yarn: 1.12.3 - ~/.nvm/versions/node/v10.14.1/bin/yarn
    npm: 6.4.1 - ~/.nvm/versions/node/v10.14.1/bin/npm
  Browsers:
    Chrome: 71.0.3578.98
    Firefox: 64.0.2
    Safari: 12.0.3
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0-beta.2
    @vue/babel-plugin-transform-vue-jsx:  1.0.0-beta.2
    @vue/babel-preset-app:  3.4.0
    @vue/babel-preset-jsx:  1.0.0-beta.2
    @vue/babel-sugar-functional-vue:  1.0.0-beta.2
    @vue/babel-sugar-inject-h:  1.0.0-beta.2
    @vue/babel-sugar-v-model:  1.0.0-beta.2
    @vue/babel-sugar-v-on:  1.0.0-beta.2
    @vue/cli-overlay:  3.4.0
    @vue/cli-plugin-babel: ^3.4.0 => 3.4.0
    @vue/cli-plugin-eslint: ^3.4.0 => 3.4.0
    @vue/cli-plugin-typescript: ^3.4.0 => 3.3.0
    @vue/cli-service: ^3.4.0 => 3.3.0
    @vue/cli-shared-utils:  3.4.0
    @vue/component-compiler-utils:  2.5.2
    @vue/eslint-config-prettier: ^4.0.1 => 4.0.1
    @vue/eslint-config-typescript: ^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.1.0
    vue: ^2.5.22 => 2.6.3
    vue-class-component: ^6.0.0 => 6.3.2
    vue-eslint-parser:  4.0.3
    vue-hot-reload-api:  2.3.1
    vue-loader:  15.6.2
    vue-property-decorator: ^7.0.0 => 7.3.0
    vue-style-loader:  4.1.2
    vue-template-compiler: ^2.5.21 => 2.6.3
    vue-template-es2015-compiler:  1.8.2
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

1. yarn build --modern
2. open dist/js/app.[hash].js
3. search async or await not found and file is like dist/js/app-legacy.[hash].js

What is expected?

dist/js/app.[hash].js have async await word.

What is actually happening?

modern mode is breaking

---

If you try to run yarn add --dev @vue/cli-plugin-typescript@3.3.0 && yarn add --dev @vue/cli-service@3.3.0

modern mode is succeed.

[yyx990803]

Did some digging and the issue is actually caused by the ESLint plugin. It somehow calls index.js from @vue/babel-preset-app early and causes it to be cached before the modern build is executed.

[yyx990803]

I was actually able to reproduce on a default setup without TypeScript plugin involved. The required combination is ESLint plugin + a *.vue file with a <script> block - i.e. when ESLint is applied to the script block of a Vue file, the babel preset somehow gets loaded again and cached.

This may have something to do with eslint-plugin-vue... This can be reproduced with even an empty eslint config.

@sodatea we need to look into this with high priority since modern mode is pretty much broken.

[yyx990803]

Ok I think I found out a more serious flaw in the design. Modern mode currently relies on running the build twice with different env variables, and the babel preset dynamically returns different config based on the env variables. Technically, this should not work since the babel preset is cached by babel... but it happened to work when babel-loader is being run in multiple threads (and thus the preset is reloaded in each thread). When somehow the babel preset is loaded in a reused thread before the modern build (somehow introduced by a mix of TS + ESLint), it causes the thing to fail. If the user runs the build on a single-core machine or explicitly disables thread-loader, it would also fail.

Currently, a workaround is using a self-invalidating babel.config.js:

module.exports = api => {
  // 1. avoid this whole config from being cached
  api.cache(() => process.env.VUE_CLI_MODERN_BUILD)
  return {
    presets: [
      // 2. avoid the preset return value from being cached
      // babel also caches presets based on their options
      ['@vue/app', { modern: process.env.VUE_CLI_MODERN_BUILD }]
    ]
  }
}

I think to properly fix this we need to fundamentally re-design modern mode to not rely on env variables.

[haoqunjiang]

but it happened to work when babel-loader is being run in multiple threads (and thus the preset is reloaded in each thread)

No wonder I can't get a reliable reproduction of this issue…

[bigsee]

Modern mode still hangs for me @vue/cli 3.5.3. Please could someone confirm which version this fix should be present in, or what the version dependencies are?