Vue CLI HMR not working after upgrading to v5

Question

I'm developing a Django+Vue app using VSCode devcontainers (Docker).

I have recently migrated from Vue CLI v4 to Vue CLI v5 following the migration guide.

After the migration, the HMR of the dev-server stopped working.

This was my vue.config.js before the migration:

const BundleTracker = require("webpack-bundle-tracker");

module.exports = {
  publicPath: process.env.NODE_ENV === "development" ? "http://localhost:8080/" : "/static/",
  devServer: {
    host: "0.0.0.0",
    port: 8080,
    public: "0.0.0.0:8080",
    https: false,
    headers: { "Access-Control-Allow-Origin": ["*"] },
    hotOnly: true,
    watchOptions: {
      ignored: "./node_modules/",
      aggregateTimeout: 300,
      poll: 1000,
    },
  },
  transpileDependencies: ["vuetify"],
  css: {
    sourceMap: true,
  },
  chainWebpack: (config) => {
    config.plugin("BundleTracker").use(BundleTracker, [
      {
        filename: `./config/webpack-stats-${process.env.NODE_ENV}.json`,
      },
    ]);
    config.resolve.alias.set("__STATIC__", "static");
  },
};

And after:

const { defineConfig } = require("@vue/cli-service");
const BundleTracker = require("webpack-bundle-tracker");

module.exports = defineConfig({
  publicPath: process.env.NODE_ENV === "development" ? "http://localhost:8080/" : "/static/",
  devServer: {
    host: "0.0.0.0",
    port: 8080,
    client: {
      webSocketURL: "auto://0.0.0.0:8080/ws",
    },
    https: false,
    headers: { "Access-Control-Allow-Origin": ["*"] },
    hot: "only",
    static: {
      watch: {
        ignored: "./node_modules/",
        aggregateTimeout: 300,
        poll: 1000,
      },
    },
  },
  transpileDependencies: ["vuetify"],
  css: {
    sourceMap: true,
  },
  chainWebpack: (config) => {
    config.plugin("BundleTracker").use(BundleTracker, [
      {
        filename: `./config/webpack-stats-${process.env.NODE_ENV}.json`,
      },
    ]);
    config.resolve.alias.set("__STATIC__", "static");
  },
});

After the migration, a new warning shows everytime I run npm run serve (but devServer.public has been removed in v5!):

  App running at:
  - Local:   http://localhost:8080/ 

  It seems you are running Vue CLI inside a container.

  Since you are using a non-root publicPath, the hot-reload socket
  will not be able to infer the correct URL to connect. You should
  explicitly specify the URL via devServer.public.

  Access the dev server via http://localhost:<your container's external mapped port>http://localhost:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

Any ideas? Thanks in advance!

Answer 1

My team had similar issues as you are describing. We could fix it by adding the optimization object to our Webpack config (vue.config.js`).

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

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

The optimization part fixed the HMR for us. However, if you're using Firefox, your console might still be spammed by error messages like these:

The connection to wss://SANDBOX_HOSTNAME:8080/ws was interrupted while the page was loading.

This has been a blocker of vue 3 for us, so I hope it helps. ??