Upgrading to @vue/cli-plugin-babel@4.5.18 causes compilation failure

[pasteusernamehere]

Version

4.5.18

Reproduction link

github.com

Environment info

System:
    OS: Windows 10 10.0.19044
    CPU: (6) x64 Intel(R) Core(TM) i7-8700B CPU @ 3.20GHz
  Binaries:
    Node: 14.15.5 - C:\Program Files\nodejs\node.EXE
    Yarn: Not Found
    npm: 8.12.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: Not Found
    Edge: Spartan (44.19041.1266.0), Chromium (102.0.1245.44), ChromiumDev (104.0.1293.1)  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.2.1
    @vue/babel-helper-vue-transform-on:  1.0.2
    @vue/babel-plugin-jsx:  1.1.1
    @vue/babel-plugin-transform-vue-jsx:  1.2.1
    @vue/babel-preset-app:  4.5.18
    @vue/babel-preset-jsx:  1.2.4
    @vue/babel-sugar-composition-api-inject-h:  1.2.1
    @vue/babel-sugar-composition-api-render-instance:  1.2.4
    @vue/babel-sugar-functional-vue:  1.2.2
    @vue/babel-sugar-inject-h:  1.2.2
    @vue/babel-sugar-v-model:  1.2.3
    @vue/babel-sugar-v-on:  1.2.3
    @vue/cli-overlay:  4.5.18
    @vue/cli-plugin-babel: ^4.5.18 => 4.5.18
    @vue/cli-plugin-eslint: ^4.5.18 => 4.5.18
    @vue/cli-plugin-router: ^4.5.18 => 4.5.18
    @vue/cli-plugin-typescript: ^4.5.18 => 4.5.18
    @vue/cli-plugin-unit-jest: ^4.5.18 => 4.5.18
    @vue/cli-plugin-vuex:  4.5.18
    @vue/cli-service: ^4.5.18 => 4.5.18
    @vue/cli-shared-utils:  4.5.18
    @vue/component-compiler-utils:  3.2.0
    @vue/eslint-config-prettier: ^6.0.0 => 6.0.0
    @vue/eslint-config-typescript: ^5.0.2 => 5.1.0
    @vue/preload-webpack-plugin:  1.1.2
    @vue/test-utils: ^1.3.0 => 1.3.0
    @vue/web-component-wrapper:  1.3.0
    eslint-plugin-vue: ^6.2.2 => 6.2.2
    jest-serializer-vue:  2.0.2
    typescript: ~3.8.3 => 3.8.3
    vue: ^2.6.14 => 2.6.14
    vue-class-component: ^7.2.6 => 7.2.6
    vue-cli-plugin-vuetify: ^2.5.1 => 2.5.1
    vue-eslint-parser:  7.5.0
    vue-hot-reload-api:  2.3.4
    vue-jest:  3.0.7
    vue-loader:  15.9.6 (16.1.2)
    vue-property-decorator: ^9.1.2 => 9.1.2
    vue-router: ^3.5.4 => 3.5.4
    vue-style-loader:  4.1.2
    vue-template-compiler: ^2.6.14 => 2.6.14
    vue-template-es2015-compiler:  1.9.1
    vuetify: ^2.6.6 => 2.6.6
    vuetify-loader: ^1.8.0 => 1.8.0
    vuex: ^3.6.2 => 3.6.2
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

You can build the existing project via: npm run build:dev

When targeting @vue/cli-plugin-babel@4.5.17 the project builds without errors. Targeting @vue/cli-plugin-babel@4.5.18 produces compilation errors.

What is expected?

The expectation would be to compile without error.

What is actually happening?

Failed to compile with 1 error 11:59:22 a.m.

error in ./src/main.ts

Module parse failed: Unexpected token (18:41)
File was processed with these loaders:

• ./node_modules/cache-loader/dist/cjs.js
• ./node_modules/babel-loader/lib/index.js
• ./node_modules/ts-loader/index.js
• ./node_modules/eslint-loader/index.js
  You may need an additional loader to handle the result of these loaders.
  | args[key] = value;
  | });

const route = searchParams.get("route") ?? undefined;
| const component = route && Object.values(Route).includes(route) ? The${route}Container : "TheShell";
|

@ multi ./src/main.ts

---

I have stripped out pretty much everything in order to exhibit the behavior.

Background: We utilize main.ts to either launch our full app (TheShell) or to launch containerized components (inline or in new windows). I have removed all of the containerized components.

[chinaxcy]

不知道咋了，用了es7语法就不行，你的这个??是ES7语法， 我的用了?.和你发生的问题一样。。。。

[rookiePrgrmer]

yo, man, i encountered same problem, but i already solved i. The following methods:

add following config into the babel.config.js:
plugins: [ [ '@babel/plugin-proposal-optional-chaining' ], [ '@babel/plugin-proposal-nullish-coalescing-operator' ] ]

and just in case, maybe u need:
npm i @babel/plugin-proposal-nullish-coalescing-operator @babel/plugin-proposal-optional-chaining --save-dev

[chinaxcy]

手动加 presets: [ ['@babel/preset-env'] ]，也可以解决， 主要是更新了什么，以前不用配置啊

[nicolas-luescher]

Same problem, existing projects using optional chaining operators running until 4.5.17 cannot be compiled in 4.5.18 anymore.

[haoqunjiang]

Oh, I got it. It's because IE 11 has reached end-of-life.
So the "not dead" query in .browserslistrc excludes it.
You need to add an IE 11 line to the end of .browserslistrc. Remove node_modules/.cache. And then run the build again.

[bwangs]

手动加 presets: [ ['@babel/preset-env'] ]，也可以解决， 主要是更新了什么，以前不用配置啊

手动加了presets: [ ['@babel/preset-env'] ]，问题依旧。

下面这个方法有效，但没想明白原因，按babel官方讲的这两个插件都是包含在@babel/preset-env。

yo, man, i encountered same problem, but i already solved i. The following methods:

add following config into the babel.config.js: plugins: [ [ '@babel/plugin-proposal-optional-chaining' ], [ '@babel/plugin-proposal-nullish-coalescing-operator' ] ]

and just in case, maybe u need: npm i @babel/plugin-proposal-nullish-coalescing-operator @babel/plugin-proposal-optional-chaining --save-dev

[haoqunjiang]

@bwangs
这是因为 browserslist 前两天发布的新版本 4.21 里把 IE 11 列入了 dead 名单 https://github.com/browserslist/browserslist/blob/4.21.0/CHANGELOG.md#421
所以默认的 "not dead" 条件会把它排除在外。

而不包含 IE 11 的、满足 "> 1%, not dead, last 2 versions" 的所有浏览器，都支持最新的语法标准，所以 @babel/preset-env 不再需要转译 ??。

至于这个 issue 里出现的报错，则是因为项目的依赖版本比较老，除了 Babel 以外，其他的工具比如 webpack 4 是不支持新语法的，所以如果 Babel 不再把代码转换好再输出给它们，它们就会报无法解析的错误。

[haoqunjiang]

I've posted a Twitter thread to explain the underlying issue here: https://twitter.com/haoqunjiang/status/1539857134317600769

[chinaxcy]

@bwangs 不应该啊！你加的那两个也都是preset-env包含的，一个是?. 一个??语法转换插件么？

[bwangs]

@sodatea 嗯，试了下加上IE11确实有效，想了下应该IE11退役导致babel不在转译了这个原因

[bwangs]

@chinaxcy 这两个插件是这个两个转译功能。
这个解释应该就是原因。

@bwangs 这是因为 browserslist 前两天发布的新版本 4.21 里把 IE 11 列入了 dead 名单 https://github.com/browserslist/browserslist/blob/4.21.0/CHANGELOG.md#421 所以默认的 "not dead" 条件会把它排除在外。

而不包含 IE 11 的、满足 "> 1%, not dead, last 2 versions" 的所有浏览器，都支持最新的语法标准，所以 @babel/preset-env 不再需要转译 ??。

至于这个 issue 里出现的报错，则是因为项目的依赖版本比较老，除了 Babel 以外，其他的工具比如 webpack 4 是不支持新语法的，所以如果 Babel 不再把代码转换好再输出给它们，它们就会报无法解析的错误。

[chinaxcy]

不锁死版本太可怕，很有可能时隔几年的项目跑都跑步起来了

[chinaxcy]

@sodatea 致敬大佬 ！

[bwangs]

@ShuangDa1018 与版本无关，这个方法有效

Oh, I got it. It's because IE 11 has reached end-of-life. So the "not dead" query in .browserslistrc excludes it. You need to add an IE 11 line to the end of .browserslistrc. Remove node_modules/.cache. And then run the build again.

[chinaxcy]

@ShuangDa1018 回退可以，我试过但是保证browserlist也回退到相应的版本

[chinaxcy]

@bwangs 怎么和版本无关呢？这一天天的，迷糊的呢？

[bwangs]

@chinaxcy 我的意思是和这个@vue/cli-plugin-babel包的版本无关~_~

@bwangs 怎么和版本无关呢？这一天天的，迷糊的呢？

[pasteusernamehere]

Oh, I got it. It's because IE 11 has reached end-of-life. So the "not dead" query in .browserslistrc excludes it. You need to add an IE 11 line to the end of .browserslistrc. Remove node_modules/.cache. And then run the build again.

This appears to be it @sodatea, good eye!

[suteeadam09]

手动加 presets: [ ['@babel/preset-env'] ]，也可以解决， 主要是更新了什么，以前不用配置啊
it work for me, Thx bro

[Benoit-Vasseur]

Hello @sodatea

Is a fix for vue-cli@4 is planned ? Because a new project generated with this version breaks. I know that V5 is the current version but it can be great to fix v4.

In our company we have lots of v4 projects, it is just to know if we have to do a "permanant" fix or if the CLI will be patched.

Thans for the response.

[sulimi]

@sodatea 牛啊牛啊

[haoqunjiang]

In our company we have lots of v4 projects, it is just to know if we have to do a "permanant" fix or if the CLI will be patched.

@Benoit-Vasseur I've just released 4.5.19 to add an upper limit of browser targets, to fix the ?? / ?. syntax support.

But for IE 11 support, we can't make the decision for the users, so if you still have to support IE in your projects, it must be manually specified in the browserslist configuration.