Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
jacekkarczmarczyk opened this issue Apr 28, 2021 · 7 comments

Comments

@jacekkarczmarczyk
Copy link

jacekkarczmarczyk commented Apr 28, 2021

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

image

Workaround

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

@jacekkarczmarczyk jacekkarczmarczyk changed the title modern build fails with nullish coalescing or optional chaining after upgrading caniuse-list to latest modern build fails with nullish coalescing or optional chaining after upgrading caniuse-lite to latest Apr 28, 2021
@skirtles-code
Copy link

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
Copy link

runarberg commented May 5, 2021

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
Copy link

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
Copy link

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
Copy link

Glandos commented Jun 23, 2021

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
Copy link

Glandos commented Jun 23, 2021

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

@onhate
Copy link

onhate commented Oct 8, 2021

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

7 participants