"vue-cli-service serve --copy" throws in WSL due to clipboardy.write()

[jonaskuske]

Version

3.4.0

Environment info

Environment Info:

  System:
    OS: Linux 4.4 Ubuntu 16.04.5 LTS (Xenial Xerus)
    CPU: (8) x64 Intel(R) Core(TM) i7-4790 CPU @ 3.60GHz
  Binaries:
    Node: 10.13.0 - /usr/bin/node
    Yarn: 1.12.3 - /usr/bin/yarn
    npm: 6.8.0 - ~/.npm-global/bin/npm
  Browsers:
    Chrome: Not Found
    Firefox: Not Found
  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-pwa: ^3.4.0 => 3.4.0
    @vue/cli-plugin-unit-jest: ^3.4.0 => 3.4.0
    @vue/cli-service: ^3.4.0 => 3.4.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/preload-webpack-plugin:  1.1.0
    @vue/test-utils: ^1.0.0-beta.20 => 1.0.0-beta.29
    @vue/web-component-wrapper:  1.2.0
    eslint-plugin-vue: ^5.0.0 => 5.1.0
    jest-serializer-vue:  2.0.2
    vue: ^2.5.22 => 2.6.5
    vue-eslint-parser:  2.0.3
    vue-hot-reload-api:  2.3.1
    vue-jest:  3.0.3
    vue-loader:  15.6.2
    vue-loading-spinner: ^1.0.11 => 1.0.11
    vue-router: ^3.0.1 => 3.0.2
    vue-style-loader:  4.1.2
    vue-template-compiler: ^2.5.21 => 2.6.5
    vue-template-es2015-compiler:  1.8.2
    vuex: ^3.1.0 => 3.1.0
    vuex-router-sync: ^5.0.0 => 5.0.0
  npmGlobalPackages:
    @vue/cli: 3.4.0

Steps to reproduce

1. Use Vue CLI 3 in Windows Subsystem for Linux
2. Run vue-cli-service serve --copy (copy option was introduced here)
3. Wait until the build is complete
4. The URL is not copied and a PromiseRejection is thrown

What is expected?

a) The local URL is copied to clipboard
b) The serve script doesn't log errors

What is actually happening?

The script throws an UnhandledPromiseRejection:

Error: Command failed: xsel --clipboard --input
xsel: Can't open display: (null)
: Inappropriate ioctl for device

or if the user has set the env variable DISPLAY:

Error: Command failed: xsel --clipboard --input
xsel: Can't open display: (null)
: Connection refused

---

This clipboard issue is unfortunately fairly common, ZEIT's serve package logs the same error for example. (but catches the Rejection)
There apparently are ways in userland to make clipboard work in WSL, but afaik all we can do is handle the Exception.

So I'd propose to:

a) catch the error (silently, so project config is shareable without constantly bugging some team members with error messages) and only log "(copied to clipboard)" if the URL was actually copied

b) mention in the docs that --copy isn't supported on some platforms

 

If we'd switch to writeSync this would be fixed super easily:

try {
  require('clipboardy').writeSync(urls.localUrlForBrowser)
  copied = chalk.dim('(copied to clipboard)')
} catch(_) { /* handle exception in WSL, see issue #3476 */ }

otherwise we'd have to wait until the clipboard Promise is settled before we could proceed outputting information (or rethink the message order so we can give clipboard feedback "lazily").

Either way, more than happy to submit a PR. 👍🏻

[LinusBorg]

Option 1 makes more sense i think.

Please send a PR 😁

[jonaskuske]

Done. 😁