vue-cli: Hot Reload does not work. WebSocket frame shows up a type:invalid payload
Version
3.3.0
Environment info
Environment Info:
System:
OS: Linux 4.9 Debian GNU/Linux 9 (stretch) 9 (stretch)
CPU: (2) x64 Intel(R) Core(TM) i7-5650U CPU @ 2.20GHz
Binaries:
Node: 10.15.0 - /usr/local/bin/node
Yarn: 1.12.3 - /usr/local/bin/yarn
npm: 6.4.1 - /usr/local/bin/npm
Browsers:
Chrome: Not Found
Firefox: Not Found
npmGlobalPackages:
@vue/cli: Not Found
Steps to reproduce
- Download the attached archive Bug.zip and extract it
npm install
./node_modules/.bin/vue-cli-service serve
- Edit the file
src/ui/boot-view.vue
and see HMR failing
What is expected?
Changing a Vue component source code, modifications should be reflected on the client without the need of reloading the page.
What is actually happening?
Changes are processed by the vue-cli resulting in a valid build output, but they are not correctly notified to the client.
Hot Reloading was working fine with version 3.1 of vue-cli.
Looking inside the Chrome Network Panel these are the WebSocket frames:
o
a["{\"type\":\"hot\"}"]
a["{\"type\":\"overlay\",\"data\":{\"warnings\":false,\"errors\":true}}"]
a["{\"type\":\"log-level\",\"data\":\"none\"}"]
a["{\"type\":\"hash\",\"data\":\"4817374291a2ba483ed7\"}"]
a["{\"type\":\"ok\"}"]
At this point I change the source code and when the vue-cli ends compilation this is what is notified to the client:
a["{\"type\":\"invalid\"}"]
a["{\"type\":\"invalid\"}"]
a["{\"type\":\"hash\",\"data\":\"5b48de2c0f5894247e83\"}"]
a["{\"type\":\"ok\"}"]
It doesn’t matter what I change (style/js/template) in which component, I end up always with the same result. The only way to fix it is manually reloading the page.
package.json
"@babel/core": "7.2.2",
"@babel/plugin-proposal-export-default-from": "7.2.0",
"@babel/plugin-proposal-nullish-coalescing-operator": "7.2.0",
"@babel/plugin-proposal-object-rest-spread": "7.2.0",
"@babel/plugin-proposal-optional-chaining": "7.2.0",
"@babel/plugin-proposal-pipeline-operator": "7.2.0",
"@babel/plugin-syntax-jsx": "7.2.0",
"@babel/preset-env": "7.2.3",
"@vue/babel-helper-vue-jsx-merge-props": "1.0.0-beta.2",
"@vue/babel-preset-jsx": "1.0.0-beta.2",
"@vue/cli": "3.3.0",
"@vue/cli-plugin-babel": "3.3.0",
"@vue/cli-service": "3.3.1",
"babel-loader": "8.0.5",
"babel-plugin-transform-imports": "1.5.1",
"vue": "2.5.22",
"vue-cli-plugin-quasar": "0.17.1",
"vue-router": "3.0.2",
"vue-template-compiler": "2.5.22",
"webpack": "4.29.0",
"webpack-cli": "3.2.1"
About this issue
- Original URL
- State: closed
- Created 5 years ago
- Comments: 23 (4 by maintainers)
Does anyone know the answer to this? I was thinking of using something like
devServer.proxy
ordevServer.after
to … check the response message content from the websocket server I suppose?cc @daniele-orlando
@jkzing During my investigations, I deleted my
node_modules
so maybe I just had to clear the cache. Thanks for the info.@daniele-orlando
You don’t need to depend on
webpack
in yourpackage.json
, just use it. Because we have that dependency inside@vue/cli-service
.Yes, we use
cache-loader
to cache results of loaders, sometimes it happens to not be invalidated correctly. Kindly clear the cache byrm -rf node_modules/.cache
before trying.@daniele-orlando You have
"webpack": "4.29.0"
in you package.json, which doesn’t match the one we are using ("4.28.4"
). Remove it or just change it to “4.28.4” solves your problem.