HMR doesn't work since the vue cli plugins update (v5)

Question

Version

5.0.1

Reproduction link

github.com

Environment info

Environment Info:

  System:
    OS: Linux 5.13 Ubuntu 20.04.4 LTS (Focal Fossa)
    CPU: (12) x64 Intel(R) Core(TM) i7-8700K CPU @ 3.70GHz
  Binaries:
    Node: 14.17.1 - ~/.nvm/versions/node/v14.17.1/bin/node
    Yarn: 1.22.17 - /usr/bin/yarn
    npm: 6.14.13 - ~/.nvm/versions/node/v14.17.1/bin/npm
  Browsers:
    Chrome: 98.0.4758.102
    Firefox: 97.0
  npmPackages:
    @gtm-support/vue-gtm: ^1.3.0 => 1.3.0 
    @intlify/eslint-plugin-vue-i18n: ^1.2.0 => 1.2.0 
    @intlify/vue-devtools:  9.2.0-beta.22 
    @vue/apollo-option: ^4.0.0-alpha.15 => 4.0.0-alpha.15 
    @vue/babel-helper-vue-jsx-merge-props:  1.2.1 
    @vue/babel-helper-vue-transform-on:  1.0.2 
    @vue/babel-plugin-jsx:  1.1.1 
    @vue/babel-plugin-transform-vue-jsx:  1.2.1 
    @vue/babel-preset-app:  5.0.1 
    @vue/babel-preset-jsx:  1.2.4 
    @vue/babel-sugar-composition-api-inject-h:  1.2.1 
    @vue/babel-sugar-composition-api-render-instance:  1.2.4 
    @vue/babel-sugar-functional-vue:  1.2.2 
    @vue/babel-sugar-inject-h:  1.2.2 
    @vue/babel-sugar-v-model:  1.2.3 
    @vue/babel-sugar-v-on:  1.2.3 
    @vue/cli-overlay:  5.0.1 
    @vue/cli-plugin-babel: ^5.0.1 => 5.0.1 
    @vue/cli-plugin-eslint: ^5.0.1 => 5.0.1 
    @vue/cli-plugin-router:  5.0.1 
    @vue/cli-plugin-typescript: ^5.0.1 => 5.0.1 
    @vue/cli-plugin-unit-jest: ^5.0.1 => 5.0.1 
    @vue/cli-plugin-vuex:  5.0.1 
    @vue/cli-service: ^5.0.1 => 5.0.1 
    @vue/cli-shared-utils:  5.0.1 
    @vue/compiler-core:  3.2.30 
    @vue/compiler-dom:  3.2.30 
    @vue/compiler-sfc:  3.2.30 
    @vue/compiler-ssr:  3.2.30 
    @vue/component-compiler-utils:  3.3.0 
    @vue/devtools-api:  6.0.0-beta.20.1 
    @vue/eslint-config-airbnb: ^5.3.0 => 5.3.0 
    @vue/eslint-config-typescript: ^7.0.0 => 7.0.0 
    @vue/reactivity:  3.2.30 (3.2.31)
    @vue/reactivity-transform:  3.2.30 
    @vue/runtime-core:  3.2.30 (3.2.31)
    @vue/runtime-dom:  3.2.30 (3.2.31)
    @vue/server-renderer:  3.2.30 
    @vue/shared:  3.2.30 (3.2.31)
    @vue/test-utils: ^2.0.0-rc.18 => 2.0.0-rc.18 
    @vue/vue3-jest: ^27.0.0-alpha.4 => 27.0.0-alpha.4 
    @vue/web-component-wrapper:  1.3.0 
    eslint-plugin-vue: ^7.17.0 => 7.17.0 
    eslint-plugin-vue-scoped-css: ^1.3.0 => 1.3.0 
    floating-vue: ^2.0.0-beta.1 => 2.0.0-beta.1 
    jest-serializer-vue:  2.0.2 
    jest-serializer-vue-tjw: ^3.19.0 => 3.19.0 
    stylelint-config-recommended-vue: ^1.2.0 => 1.2.0 
    typescript: ^4.4.2 => 4.4.2 
    vue: ^3.2.30 => 3.2.30 
    vue-apollo: ^3.0.7 => 3.0.7 
    vue-chart-3: ^3.1.1 => 3.1.1 
    vue-cli-plugin-webpack-bundle-analyzer: ~4.0.0 => 4.0.0 
    vue-composition-test-utils: ^1.0.3 => 1.0.3 
    vue-ctk-date-time-picker3: ^2.5.2 => 2.5.2 
    vue-demi:  0.4.5 (0.12.1)
    vue-eslint-parser:  7.10.0 (8.0.1)
    vue-hot-reload-api:  2.3.4 
    vue-i18n: ^9.2.0-beta.22 => 9.2.0-beta.22 
    vue-loader:  17.0.0 (15.9.8)
    vue-resize:  2.0.0-alpha.1 
    vue-router: ^4.0.12 => 4.0.12 
    vue-style-loader:  4.1.3 
    vue-template-es2015-compiler:  1.9.1 
  npmGlobalPackages:
    @vue/cli: 5.0.1

Steps to reproduce

HMR/Hot-reload doesn't work and in the console errors such as "The connection to wss://custom-url:8080/ws was interrupted while the page was loading.." will be thrown constantly. So something must be wrong with the devServer setup but I've tried many different setups and couldn't find a working one.

When I change anything in the templates I usually get similar errors such as: Uncaught TypeError: can't access property "./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/views/Suppliers/Suppliers.vue?vue&type=script&lang=js", currentUpdate is undefined

What is expected?

HMR should work as it was before changing to the v5 plugins

What is actually happening?

HMR doesn't work, my changes are only visible if I reload the page

---

This is about an old vue 2.6.x project being migrated to vue 3 completely. Unfortunately it is about a monolith app so a complete reproduction wasn't possible, but I hope that posting all config files may be enough to find out the problem. If you need any other config files or anything else to help debug please let me know.

I see an error in the terminal as well: Proxy error: Could not proxy request /app.e9978b73a5a9070c.hot-update.json from CUSTOM-URL:8080 to https://CUSTOM-URL/. See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNRESET).

Thanks for you help in advance!

Answer 1

My team could fix it by adding the optimization object to our webpack config (in vue.config.js):

const { defineConfig } = require('@vue/cli-service');

module.exports = defineConfig({
    /* your config */
    configureWebpack: {
        optimization: {
            runtimeChunk: 'single',
        },
    },
    devServer: {
        proxy: `https://${process.env.SANDBOX_HOSTNAME}/`, // we need this for apollo to work properly
        host: '0.0.0.0',
        allowedHosts: 'all',
    },
});

It fixed the HMR for us, however if you're using firefox your console might be still spammed by error messages like these: The connection to wss://SANDBOX_HOSTNAME:8080/ws was interrupted while the page was loading.