cli-service doesn't support webpack 5 devServer.server option which replaces devServer.https

[aethr]

Version

5.0.4

Reproduction link

github.com

Environment info

Environment Info:

  System:
    OS: Linux 5.4 Ubuntu 20.04.4 LTS (Focal Fossa)
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
  Binaries:
    Node: 14.17.6 - ~/.nvm/versions/node/v14.17.6/bin/node
    Yarn: 1.22.4 - /usr/bin/yarn
    npm: 6.14.15 - ~/.nvm/versions/node/v14.17.6/bin/npm
  Browsers:
    Chrome: 100.0.4896.127
    Firefox: 99.0
  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:  5.0.4 
    @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:  5.0.4 
    @vue/cli-plugin-babel: ^5.0.4 => 5.0.4 
    @vue/cli-plugin-eslint: ^5.0.4 => 5.0.4 
    @vue/cli-plugin-router:  5.0.4 
    @vue/cli-plugin-vuex:  5.0.4 
    @vue/cli-service: ^5.0.4 => 5.0.4 
    @vue/cli-shared-utils:  5.0.4 
    @vue/compiler-core:  3.2.33 
    @vue/compiler-dom:  3.2.33 
    @vue/compiler-sfc: ^3.0.0 => 3.2.33 
    @vue/compiler-ssr:  3.2.33 
    @vue/component-compiler-utils:  3.3.0 
    @vue/reactivity:  3.2.33 
    @vue/reactivity-transform:  3.2.33 
    @vue/runtime-core:  3.2.33 
    @vue/runtime-dom:  3.2.33 
    @vue/server-renderer:  3.2.33 
    @vue/shared:  3.2.33 
    @vue/web-component-wrapper:  1.3.0 
    eslint-plugin-vue: ^8.7.1 => 8.7.1 
    vue: ^3.0.0 => 3.2.33 
    vue-eslint-parser:  8.3.0 
    vue-hot-reload-api:  2.3.4 
    vue-loader:  17.0.0 (15.9.8)
    vue-style-loader:  4.1.3 
    vue-template-es2015-compiler:  1.9.1 
  npmGlobalPackages:
    @vue/cli: 4.5.15

Steps to reproduce

After creating a project with vue create and then updating dependencies to use webpack v5 (see reproduction repo), and configuring webpack to use HTTPS, we start to get a warning running npm run serve that the devServer.https option is deprecated.

(node:1420683) [DEP_WEBPACK_DEV_SERVER_HTTPS] DeprecationWarning: 'https' option is deprecated. Please use the 'server' option.

The new config format is to use devServer.server like:

module.exports = {
    devServer: {
        server: {
            type: 'https',
            options: {
                key: path.resolve(process.env.HTTPS_KEY),
                cert: path.resolve(process.env.HTTPS_CERT),
            },
        },
    },
};

However, once making this change and then starting npm run serve while specifying a valid key/cert via ENV, such as:

HOST=localhost HTTPS_KEY=../.localhost/localhost+2-key.pem HTTPS_CERT=../.localhost/localhost+2.pem npm run serve

There are a few problems, the most serious being that HMR no longer works.

What is expected?

1. The "App running at" links should specify links with the "https" protocol
2. The webpack-dev-server websocket connection should attempt to connect over "wss://"

What is actually happening?

The init code in serve.js only checks for project options at devServer.https and not devServer.server.type === 'https', so while the webpack server technically works, some parts are overriden by incorrect config generated by vue/cli-service. This results in:

1. "App running at" links specify "http://..." instead of "https://..." and then these links don't work due to webpack not listening on "http"
2. The webpack-dev-server client socket is configured to connect to the incorrect protocol "ws://" instead of "wss://" which is not allowed by the browser

---

Probably just need to update the check for useHttps in https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-service/lib/commands/serve.js#L104 to fix.

[aethr]

Apologies, it appears there's already a PR to fix: #7024

[Shujee]

@aethr: Trying to understand. Has this commit been deployed? Can I do npm update or something to get this change work on my side?