Vue-cli: Hot Reload does not work. WebSocket frame shows up a type:invalid payload

[daniele-orlando]

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:

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"

[LinusBorg]

It's a quiet complex project, with multiple Docker containers, no easy way to reproduce.

Understandable, but without a way to reproduce what you are experiencing it's hard to help.

[daniele-orlando]

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.

[daniele-orlando]

I updated the issue with the steps to reproduce the bug.

[jkzing]

@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.

[daniele-orlando]

@jkzing I had [email protected] but Hot Reloading was not working. I updated it to 4.29.0 as an attempt to fix the problem but it didn't. I just downgraded it to 4.28.4 and it still doesn't work.

[daniele-orlando]

Thanks @LinusBorg. I'll update the issue with my further investigation, because the fix proposed by @jkzing does work with the "Bug.zip" project I attached, but does not work with my real project. So I'm going to update the ticked with a new way to reproduce the bug still using WebPack 4.28.4.

[daniele-orlando]

Ok, thanks to the @jkzing suggestion, I've been able to identify the problem.

I had to downgrade both webpack and webpack-cli to their previous minor versions: 4.28.4 and 3.1.2 respectively.

Guys, do you think is it the case to open an issue on the webpack/webpack-cli project or is it something between vue-cli and the newest version of webpack/webpack-cli that collides?

Thank you very much for the help.

[hsablonniere]

@daniele-orlando Do you mean [email protected]? 4.1.2 does not exist.

FYI, I may have the same pb.

[daniele-orlando]

@hsablonniere Yes that one :sweat_smile:

[hsablonniere]

I'm struggling to make it work...

[daniele-orlando]

Oh my god, it's a never ending nightmare really, it doesn't work again.

If with

[email protected]
[email protected]

Hot Reload does not work at all

With

[email protected]
[email protected]

Hot Reload sometimes forces a refresh of the page even if it is not needed, other times the same change is applied correctly, and after some time, it stops to work at all.

[LinusBorg]

Out of interest: what do you need the webpack-cli for in combination with vue-cli?

[daniele-orlando]

I use webpack-cli for this

webpack --config "$WebpackFile" --profile --json

and webpack inside vue.config.js for the webpack.ContextReplacementPlugin.

[daniele-orlando]

Things seam to have improved after I deleted the node_modules/.cache/{babel-loader,vue-loader} directories.

[jkzing]

@daniele-orlando

and webpack inside vue.config.js for the webpack.ContextReplacementPlugin

You don't need to depend on webpack in your package.json, just use it. Because we have that dependency inside @vue/cli-service.

Things seam to have improved after I deleted the node_modules/.cache/{babel-loader,vue-loader} directories.

Yes, we use cache-loader to cache results of loaders, sometimes it happens to not be invalidated correctly. Kindly clear the cache by rm -rf node_modules/.cache before trying.

[hsablonniere]

I fixed it but I'm not sure why. This is clearly because of a weird mismatch of dependencies.

[hsablonniere]

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

[DMXL]

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.

@jkzing Thank you that does it for me. Care to elaborate on why it's causing the HMR malfunctioning?