Building for a target that supports an ES feature fails

[martixy]

Version

4.5.6

Environment info

  System:
    OS: Windows 10 10.0.19041
    CPU: (16) x64 Intel(R) Core(TM) i9-9900K CPU @ 3.60GHz
  Binaries:
    Node: 14.8.0 - C:\Web\nodejs\node.EXE
    Yarn: 1.22.4 - C:\Web\Yarn\bin\yarn.CMD
    npm: 6.14.7 - C:\Web\nodejs\npm.CMD
  Browsers:
    Chrome: 85.0.4183.102
    Edge: Spartan (44.19041.423.0)
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0
    @vue/babel-helper-vue-transform-on:  1.0.0-rc.2
    @vue/babel-plugin-jsx:  1.0.0-rc.3
    @vue/babel-plugin-transform-vue-jsx:  1.1.2
    @vue/babel-preset-app:  4.5.6
    @vue/babel-preset-jsx:  1.1.2
    @vue/babel-sugar-functional-vue:  1.1.2
    @vue/babel-sugar-inject-h:  1.1.2
    @vue/babel-sugar-v-model:  1.1.2
    @vue/babel-sugar-v-on:  1.1.2
    @vue/cli-overlay:  4.5.6
    @vue/cli-plugin-babel: ~4.5.0 => 4.5.6
    @vue/cli-plugin-router:  4.5.6
    @vue/cli-plugin-vuex:  4.5.6
    @vue/cli-service: ~4.5.0 => 4.5.6
    @vue/cli-shared-utils:  4.5.6
    @vue/component-compiler-utils:  3.2.0
    @vue/preload-webpack-plugin:  1.1.2
    @vue/web-component-wrapper:  1.2.0
    vue: ^2.6.11 => 2.6.12
    vue-hot-reload-api:  2.3.4
    vue-loader:  15.9.3 (16.0.0-beta.7)
    vue-style-loader:  4.1.2
    vue-template-compiler: ^2.6.11 => 2.6.12
    vue-template-es2015-compiler:  1.9.1
  npmGlobalPackages:
    @vue/cli: Not Found

yarn global list
info "@vue/[email protected]" has binaries:
   - vue

Steps to reproduce

To be honest I am not sure this is an issue with vue cli, but I have no idea WHERE the issue is. I would appreciate some guidance in the matter.

Create a project with the following preset:

{
  "useTaobaoRegistry": true,
  "latestVersion": "4.5.6",
  "lastChecked": 1600165688489,
  "packageManager": "yarn",
  "presets": {
    "target-fail": {
      "useConfigFiles": true,
      "plugins": {
        "@vue/cli-plugin-babel": {}
      },
      "vueVersion": "2"
    }
  }
}

Attempt to use some new ES feature, e.g. console.log(null ?? "foo")

HelloWorld.vue

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  created() {
    console.log(null ?? "waffles")
  }
}
</script>

Set the browser target to something which supports that feature like chrome 80.

Build fails.

What is expected?

Built project, possibly without transpiling supported code, at least for the modern build.

What is actually happening?

C:\Web\Projects\vue-cli-modern> yarn vue-cli-service build --modern --report-json
yarn run v1.22.4
$ C:\Web\Projects\vue-cli-modern\node_modules\.bin\vue-cli-service build --modern --report-json

|  Building legacy bundle for production...@babel/preset-env: `DEBUG` option

Using targets:
{
  "chrome": "80"
}

Using modules transform: false

Using plugins:
  syntax-numeric-separator { "chrome":"80" }
  proposal-logical-assignment-operators { "chrome":"80" }
  syntax-nullish-coalescing-operator { "chrome":"80" }
  syntax-optional-chaining { "chrome":"80" }
  syntax-json-strings { "chrome":"80" }
  syntax-optional-catch-binding { "chrome":"80" }
  syntax-async-generators { "chrome":"80" }
  syntax-object-rest-spread { "chrome":"80" }
  syntax-dynamic-import { "chrome":"80" }
  syntax-export-namespace-from { "chrome":"80" }
  syntax-top-level-await { "chrome":"80" }

Using polyfills with `usage` option:

[C:\Web\Projects\vue-cli-modern\src\main.js] Based on your code and targets, core-js polyfills were not added.
/  Building legacy bundle for production...
[C:\Web\Projects\vue-cli-modern\src\registerServiceWorker.js] Based on your code and targets, core-js polyfills were not added.

[C:\Web\Projects\vue-cli-modern\src\router\index.js] Based on your code and targets, core-js polyfills were not added.
|  Building legacy bundle for production...
[C:\Web\Projects\vue-cli-modern\src\views\Home.vue] Based on your code and targets, core-js polyfills were not added.
/  Building legacy bundle for production...
[C:\Web\Projects\vue-cli-modern\src\components\HelloWorld.vue] Based on your code and targets, core-js polyfills were not added.
-  Building legacy bundle for production...@babel/preset-env: `DEBUG` option

Using targets:
{
  "chrome": "80"
}

Using modules transform: false

Using plugins:
  syntax-numeric-separator { "chrome":"80" }
  proposal-logical-assignment-operators { "chrome":"80" }
  syntax-nullish-coalescing-operator { "chrome":"80" }
  syntax-optional-chaining { "chrome":"80" }
  syntax-json-strings { "chrome":"80" }
  syntax-optional-catch-binding { "chrome":"80" }
  syntax-async-generators { "chrome":"80" }
  syntax-object-rest-spread { "chrome":"80" }
  syntax-dynamic-import { "chrome":"80" }
  syntax-export-namespace-from { "chrome":"80" }
  syntax-top-level-await { "chrome":"80" }

Using polyfills with `usage` option:

[C:\Web\Projects\vue-cli-modern\src\store\index.js] Based on your code and targets, core-js polyfills were not added.
/  Building legacy bundle for production...

 ERROR  Failed to compile with 1 errors                                                                                                                                                                                                                                                          18:51:22
 error  in ./src/components/HelloWorld.vue?vue&type=script&lang=js&
Module parse failed: Unexpected token (41:22)
File was processed with these loaders:
 * ./node_modules/cache-loader/dist/cjs.js
 * ./node_modules/thread-loader/dist/cjs.js
 * ./node_modules/babel-loader/lib/index.js
 * ./node_modules/cache-loader/dist/cjs.js
 * ./node_modules/vue-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|
|   created() {
>     console.log(null ?? "waffles");
|   }
|

 @ ./src/components/HelloWorld.vue?vue&type=script&lang=js& 1:0-324 1:340-343 1:345-666 1:345-666
 @ ./src/components/HelloWorld.vue
 @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Home.vue?vue&type=script&lang=js&
 @ ./src/views/Home.vue?vue&type=script&lang=js&
 @ ./src/views/Home.vue
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi ./src/main.js

 ERROR  Build failed with errors.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[haoqunjiang]

The error's from webpack, which uses an old version of acorn so that it can't parse such syntax.
Will be supported in webpack 5.