modern build fails with nullish coalescing or optional chaining after upgrading caniuse-lite to latest

[jacekkarczmarczyk]

Version

4.5.12

Reproduction link

https://github.com/jacekkarczmarczyk/vue-cli-caniuse-bug

Environment info

$ vue info

Environment Info:

  System:
    OS: Windows 10 10.0.19041
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
  Binaries:
    Node: 14.15.5 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.10 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 6.14.11 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 89.0.4389.128
    Edge: Spartan (44.19041.906.0), Chromium (90.0.818.49)
  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.0.5
    @vue/babel-plugin-transform-vue-jsx:  1.2.1
    @vue/babel-preset-app:  4.5.12
    @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.12
    @vue/cli-plugin-babel: ~4.5.0 => 4.5.12
    @vue/cli-plugin-eslint: ~4.5.0 => 4.5.12
    @vue/cli-plugin-router:  4.5.12
    @vue/cli-plugin-typescript: ~4.5.0 => 4.5.12
    @vue/cli-plugin-unit-jest: ~4.5.0 => 4.5.12
    @vue/cli-plugin-vuex:  4.5.12
    @vue/cli-service: ~4.5.0 => 4.5.12
    @vue/cli-shared-utils:  4.5.12
    @vue/component-compiler-utils:  3.2.0
    @vue/eslint-config-standard: ^5.1.2 => 5.1.2
    @vue/eslint-config-typescript: ^7.0.0 => 7.0.0
    @vue/preload-webpack-plugin:  1.1.2
    @vue/test-utils: ^1.0.3 => 1.1.4
    @vue/web-component-wrapper:  1.3.0
    eslint-plugin-vue: ^6.2.2 => 6.2.2
    jest-serializer-vue:  2.0.2
    typescript: ~4.1.5 => 4.1.5
    vue: ^2.6.11 => 2.6.12
    vue-eslint-parser:  7.6.0
    vue-hot-reload-api:  2.3.4
    vue-jest:  3.0.7
    vue-loader:  15.9.6 (16.2.0)
    vue-style-loader:  4.1.3
    vue-template-compiler: ^2.6.11 => 2.6.12
    vue-template-es2015-compiler:  1.9.1
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

vue create test, choose [Vue 2] babel, typescript, eslint, unit-jest

add some code with ?? or ?., run yarn build --modern

What is expected?

succesfull compilation

What is actually happening?

$ yarn build --modern
yarn run v1.22.10
$ vue-cli-service build --modern

-  Building legacy bundle for production...
Starting type checking service...
Using 1 worker with 2048MB memory limit
 DONE  Compiled successfully in 1278ms14:52:54

  File                                      Size             Gzipped

  dist\js\chunk-vendors-legacy.e84d0ad9.    24.64 KiB        8.99 KiB
  js
  dist\js\app-legacy.6e0a425d.js            1.71 KiB         0.85 KiB

  Images and other types of assets omitted.


-  Building modern bundle for production...
Starting type checking service...
Using 1 worker with 2048MB memory limit
 ERROR  Failed to compile with 1 error14:52:56

 error  in ./src/main.ts

Module parse failed: Unexpected token (3:18)
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/ts-loader/index.js
You may need an additional loader to handle the result of these loaders.
| "use strict";
|
> console.log(null ?? null);

 @ multi ./src/main.ts

 ERROR  Build failed with errors.
 ERROR  Error: Command failed: node C:\cygwin64\home\PC\jacekkarczmarczyk\test\test\node_modules\@vue\cli-service\bin\vue-cli-service.js build --modern
Error: Command failed: node C:\cygwin64\home\PC\jacekkarczmarczyk\test\test\node_modules\@vue\cli-service\bin\vue-cli-service.js build --modern
    at makeError (C:\cygwin64\home\PC\jacekkarczmarczyk\test\test\node_modules\execa\index.js:174:9)
    at C:\cygwin64\home\PC\jacekkarczmarczyk\test\test\node_modules\execa\index.js:278:16
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
    at async C:\cygwin64\home\PC\jacekkarczmarczyk\test\test\node_modules\@vue\cli-service\lib\commands\build\index.js:66:9
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

---

Error started showing up after upgrading caniuse-lite from 1.0.30001214 to 1.0.30001219. In latest version there is no safari 13.1, ios_saf 13.* and samsung 12 anymore

Workaround

add samsung 12.0 to .browserslistrc (thanks to skirtle on discord)

[skirtles-code]

Here's what I think is happening:

1. When building the modern bundle, samsung 12.0 was the only browser that needed ?. and ?? to be transpiled.
2. Upgrading caniuse-lite is removing samsung 12.0 from the browsers list as it's no longer in the last 2 versions.
3. Babel (or maybe TS, not sure) is no longer transpiling ?. and ??.
4. webpack 4 is using Acorn 6 to parse JavaScript files. This occurs after they've been through the loaders. It doesn't support those operators, so the build fails.

I believe this issue in the webpack repo is discussing effectively the same problem: webpack/webpack#10227

[runarberg]

This just happened to me using my own private package as a dependency which didn’t transpile the optional chaining away.

I fixed it by adding it to the transpileDependencies option in vue.config.js:

  transpileDependencies: ['@my-scope/my-package'],

[david-wickens]

Hi I have been trying to fix this myself, have updated @vue/cli-service to 4.5.13. Still getting build errors for optionalChaining. I thought looking at the bugfix I dont need to add samsung 12.0 to .browserslistrc?

[david-wickens]

I finally got it work. I had to add samsung 12.0 to .browserslistrc. Also I found that updating @vue/cli-plugin-babel to 4.5.13 caused issues so left mine at 4.5.12

[Glandos]

It seems that #6459 does exactly that: add Samsung 12.0.0 to the browser list to force Babel to transpile. That's a bit ugly, but… waiting for vue-cli 5 with Webpack 5 😉

[Glandos]

After regenerating yarn.lock and moving to Babel 7.14.5, I have the same error with ?? operator.

[onhate]

for me changing the target on tsconfig.json to "target": "es2018" solved the issue as it will then transpile nullish coalesce and optional chaining