5.0.1
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
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
HMR should work as it was before changing to the v5 plugins
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!
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.