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

1. Download the attached archive Bug.zip and extract it
2. npm install
3. ./node_modules/.bin/vue-cli-service serve
4. 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"

[mecampbellsoup]

Given the a["{\"type\":\"invalid\"}"] payload inside the WebSocket frame, is there anything I can do to output the cause of the error. I mean enabling some vue-cli/webpack debug options. At least for trying to understand who is emitting that invalid message and why.

Does anyone know the answer to this? I was thinking of using something like devServer.proxy or devServer.after to … check the response message content from the websocket server I suppose?

cc @daniele-orlando

[hsablonniere]

@jkzing During my investigations, I deleted my node_modules so maybe I just had to clear the cache. Thanks for the info.