webpack-dev-server/client is loaded twice #4947
Description
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:
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
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