HMR doesn't work since the cli plugins update

[kepi0809]

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.

Thanks for you help in advance!

EDIT

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

[Boom-BO]

the same problem

[mariadb-ThienLy]

Same error on the browser console and same issue with HMR since the migration of the vue-cli from v4 to v5.

[kepi0809]

To the people who came to my issue ticket maybe you could try adding the following to your webpack config:

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

module.exports = defineConfig({
    /* your config */
    configureWebpack: {
        optimization: {
            runtimeChunk: 'single',
        },
    },
    devServer: {
        host: '0.0.0.0',
        allowedHosts: 'all',
        /* your settings */
    },
});

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