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

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

yarn build --modern
open dist/js/app.[hash].js
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.

About this issue

Original URL
State: closed
Created 5 years ago
Comments: 16 (8 by maintainers)

Commits related to this issue

fix: run modern build in separate process fix #3438, #3474 — committed to vuejs/vue-cli by yyx990803 5 years ago
fix: run modern build in separate process (#3477) fix #3438, #3474 — committed to vuejs/vue-cli by yyx990803 5 years ago

Most upvoted comments

@babel/polyfill does not get provided when you use vue ui and install babel as a plugin. After installing it manually it adds about 90kb to both my builds and does not build modern. @vue/cli-service, @vue/cli-plugin-babel and @vue/cli-plugin-eslint are updated to their latest version, imported the polyfill in the entry JS file and added the babel config file: module.exports = { presets: [ ['@vue/app', { useBuiltIns: 'entry', }] ] };

what am I missing here?

hendrikras on Jul 11, 2019

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?

bigsee on Mar 31, 2019

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.

yyx990803 on Feb 20, 2019

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 on Feb 19, 2019