webpack-dev-server/client is loaded twice

[lbogdan]

Version

4.1.1

Environment info

$ vue info

Environment Info:

  System:
    OS: Windows 10 10.0.18362
    CPU: (12) x64 Intel(R) Core(TM) i7-8700K CPU @ 3.70GHz
  Binaries:
    Node: 10.16.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.21.0 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 6.10.3 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: 44.18362.449.0
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0
    @vue/babel-plugin-transform-vue-jsx:  1.1.2
    @vue/babel-preset-app:  4.1.1
    @vue/babel-preset-jsx:  1.1.2
    @vue/babel-sugar-functional-vue:  1.1.2
    @vue/babel-sugar-inject-h:  1.1.2
    @vue/babel-sugar-v-model:  1.1.2
    @vue/babel-sugar-v-on:  1.1.2
    @vue/cli-overlay:  4.1.1
    @vue/cli-plugin-babel: ^4.1.0 => 4.1.1
    @vue/cli-plugin-eslint: ^4.1.0 => 4.1.1
    @vue/cli-plugin-router:  4.1.1
    @vue/cli-plugin-vuex:  4.1.1
    @vue/cli-service: ^4.1.0 => 4.1.1
    @vue/cli-shared-utils:  4.1.1
    @vue/component-compiler-utils:  3.1.0
    @vue/preload-webpack-plugin:  1.1.1
    @vue/web-component-wrapper:  1.2.0
    eslint-plugin-vue: ^5.0.0 => 5.2.3
    vue: ^2.6.10 => 2.6.10
    vue-eslint-parser:  5.0.0
    vue-hot-reload-api:  2.3.4
    vue-loader:  15.7.2
    vue-style-loader:  4.1.2
    vue-template-compiler: ^2.6.10 => 2.6.10
    vue-template-es2015-compiler:  1.9.1
  npmGlobalPackages:
    @vue/cli: (Not Found) 4.1.1

Steps to reproduce

Create a new Vue app using vue create, start it using yarn serve and open it in the browser.

What is expected?

webpack-dev-server/client is loaded once.

What is actually happening?

webpack-dev-server/client is loaded twice.

Details

As you can see in the screenshot below, sockjs-node/info is loaded twice, and there are two opened websocket connections, one from localhost and the other from the machine's IP 192.168.1.4:

Looking at the generated bundle app.js, we can see that webpack-dev-server/client is loaded twice:

// http://localhost:8080/js/app.js
// ...
__webpack_require__(/*! D:\work\cs-vue-cli-4\node_modules\webpack-dev-server\client\index.js?http://localhost */"./node_modules/webpack-dev-server/client/index.js?http://localhost");
__webpack_require__(/*! D:\work\cs-vue-cli-4\node_modules\webpack\hot\dev-server.js */"./node_modules/webpack/hot/dev-server.js");
__webpack_require__(/*! D:\work\cs-vue-cli-4\node_modules\webpack-dev-server\client\index.js?http://192.168.1.4:8080/sockjs-node */"./node_modules/webpack-dev-server/client/index.js?http://192.168.1.4:8080/sockjs-node");
module.exports = __webpack_require__(/*! ./src/main.js */"./src/main.js");
// ...

Investigation

One of the clients - the second, webpack-dev-server/client/index.js?http://192.168.1.4:8080/sockjs-node - is added by vue-cli-service's serve command here:

vue-cli/packages/@vue/cli-service/lib/commands/serve.js

Line 145 in 02f2436

require.resolve(`webpack-dev-server/client`) + sockjsUrl,

so the question is, where is the first one webpack-dev-server/client/index.js?http://localhost coming from? My first guess was that it was automatically added by webpack-dev-server; indeed, going through the docs, I found the injectClient configuration option that specifies whether the dev server should inject the client or not. The weird thing is that the docs say the default value is false?!, but let's see what happens if we explicitly set it to false. So I added this to vue.config.js

// vue.config.js
module.exports = {
  devServer: {
    injectClient: false
  }
}

restarted yarn serve, and, lo and behold, the client is now only loaded once!

// http://localhost:8080/js/app.js
// ...
__webpack_require__(/*! D:\work\cs-vue-cli-4\node_modules\webpack\hot\dev-server.js */"./node_modules/webpack/hot/dev-server.js");
__webpack_require__(/*! D:\work\cs-vue-cli-4\node_modules\webpack-dev-server\client\index.js?http://192.168.1.4:8080/sockjs-node */"./node_modules/webpack-dev-server/client/index.js?http://192.168.1.4:8080/sockjs-node");
module.exports = __webpack_require__(/*! ./src/main.js */"./src/main.js");
// ...

My guess is that if hot is set to true

vue-cli/packages/@vue/cli-service/lib/commands/serve.js

Line 173 in 02f2436

hot: !isProduction,

the dev server also sets injectClient to true by default.

Workaround

Set devServer.injectClient to false in vue.config.js:

// vue.config.js
module.exports = {
  devServer: {
    injectClient: false
  }
}

Fix

(assuming this is considered a bug)

Explicitly set injectClient to false in the WebpackDevServer options

vue-cli/packages/@vue/cli-service/lib/commands/serve.js

Lines 164 to 166 in 02f2436

	const server = new WebpackDevServer(compiler, Object.assign({
	logLevel: 'silent',
	clientLogLevel: 'silent',

[LinusBorg]

I'll make a PR this weekend.

[lbogdan]

If you confirmed this I can also make the PR. 🙂

[LinusBorg]

Sure, go ahead