[Bug]: HMR not working in vue3, Module Federation

[hammadahamed]

System Info

System: Mac os Sonoma
Packages:

  "devDependencies": {
    "@rsbuild/plugin-sass": "^1.0.1",
    "@rsbuild/plugin-vue": "^1.0.1",
    "@rspack/cli": "1.0.8",
    "@rspack/core": "1.0.8",
    "@rspack/plugin-react-refresh": "1.0.0",
    "@vue/compiler-sfc": "^3.5.10",
    "autoprefixer": "^10.4.20",
    "css-loader": "^7.1.2",
    "postcss": "^8.4.47",
    "postcss-loader": "^8.1.1",
    "react-refresh": "^0.14.2",
    "sass": "^1.79.4",
    "sass-embedded": "^1.79.4",
    "sass-loader": "^16.0.2",
    "serve": "^14.2.3",
    "svgo": "^3.3.2",
    "tailwindcss": "^3.4.13",
    "typescript": "^5.6.2",
    "vue-loader": "^17.4.2",
    "vue-style-loader": "^4.1.3",
    "vue-svg-loader-2": "^0.17.1"
  },
  "dependencies": {
    "@tiptap/core": "^2.8.0",
    "@tiptap/extension-mention": "^2.8.0",
    "@tiptap/extension-placeholder": "^2.8.0",
    "@tiptap/pm": "^2.8.0",
    "@tiptap/starter-kit": "^2.8.0",
    "@tiptap/suggestion": "^2.8.0",
    "@tiptap/vue-3": "^2.8.0",
    "@vue/runtime-dom": "^3.5.12",
    "grootform-constants": "link:../packages/constants",
    "pinia": "^2.2.4",
    "tippy.js": "^6.3.7",
    "uuid": "^10.0.0",
    "vue": "^3.5.10",
    "vue-router": "^4.4.5"
  }

Details

rspack.config.js

const rspack = require("@rspack/core");
const refreshPlugin = require("@rspack/plugin-react-refresh");
const isDev = process.env.NODE_ENV === "development";
console.log("🚀 ~ isDev:", isDev);
const path = require("path");
const { VueLoaderPlugin } = require("vue-loader");

const printCompilationMessage = require("./compilation.config.js");

/**
 * @type {import('@rspack/cli').Configuration}
 */
module.exports = {
  context: __dirname,
  entry: {
    main: "./src/index.ts",
  },
  devServer: {
    port: 6786,
    hot: true,
    liveReload: false,
    historyApiFallback: true,
    watchFiles: [path.resolve(__dirname, "src")],
    onListening: function (devServer) {
      const port = devServer.server.address().port;
      printCompilationMessage("compiling", port);
      devServer.compiler.hooks.done.tap("OutputMessagePlugin", (stats) => {
        setImmediate(() => {
          if (stats.hasErrors()) {
            printCompilationMessage("failure", port);
          } else {
            printCompilationMessage("success", port);
          }
        });
      });
    },
  },
  resolve: {
    extensions: [".js", ".ts", ".vue", ".json"],
    alias: {
      "@": path.resolve(__dirname, "src"),
      "@assets": path.resolve(__dirname, "./src/assets"),
      "@svg": path.resolve(__dirname, "./src/assets/svg"),
      "@modules": path.resolve(__dirname, "src/modules"),
    },
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: "vue-loader",
        options: {
          experimentalInlineMatchResource: true,
          compilerOptions: {
            scopeId: "data-v-[hash:8]",
          },
        },
      },
      {
        test: /\.svg$/,
        use: ["vue-loader", "vue-svg-loader-2"],
      },
      {
        test: /\.css$/,
        use: ["vue-style-loader", "css-loader"],
      },
      {
        test: /\.scss$/,
        use: [
          "vue-style-loader",
          "css-loader",
          {
            loader: "sass-loader",
            options: {
              implementation: require("sass"),
            },
          },
        ],
      },
      {
        test: /\.ts$/,
        use: [
          {
            loader: "builtin:swc-loader",
            options: {
              sourceMap: true,
              jsc: {
                parser: {
                  syntax: "typescript",
                  tsx: false,
                },
                // transform: {
                //   react: {
                //     runtime: "automatic",
                //     development: isDev,
                //     refresh: isDev,
                //   },
                // },
              },
              env: {
                targets: [
                  "chrome >= 87",
                  "edge >= 88",
                  "firefox >= 78",
                  "safari >= 14",
                ],
              },
            },
          },
        ],
      },
    ],
  },
  plugins: [
    new VueLoaderPlugin(),
    new rspack.container.ModuleFederationPlugin({
      name: "gfFormApp",
      filename: "remoteEntry.js",
      exposes: {
        "./FormApp": "./src/modules/formApp/FormApp",
      },
      shared: {
        vue: {
          singleton: true,
          requiredVersion: "^3.0.0",
          eager: true,
        },
        pinia: { singleton: true },
      },
    }),
    new rspack.DefinePlugin({
      "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV),
    }),
    new rspack.ProgressPlugin({}),
    new rspack.HtmlRspackPlugin({
      template: "./src/index.html",
    }),
    // isDev ? new refreshPlugin() : null,
  ].filter(Boolean),
};

Reproduce link

No response

Reproduce Steps

1. spin the remote app separately
2. make change and save the .vue file