Using HMR with 'weback' bundle vs 'rspack' bundler

[Oripi]

Hi,
We have an internal project that we're trying to migrate to modern.js.
as part of the effort we want to use modern as a way to load various modules into our main system (which we will migrate to modern in a different phase).
We managed to migrate a module and load it in our main system via modern start, but when trying to render it we received $RefreshSig$ is not defined.
After some digging we realized it's related to hmr and to some scripts not being loaded.
We're using webpack as bundler (for backwards compatibility) and it looks like for some reason modern doesn't load relevant scripts when using webpack.

I tried to create a simple modernjs app from scratch and notice this difference between the 2 bundlers:
with rspack:

with webpack:

the question

how can i load the relevant scripts with webpack?

config

our modern.config.js for loaded module:

import { appTools, defineConfig } from '@modern-js/app-tools';
import { devPortalManifest } from '../plugins/devPortalManifest';
import { printInstructions } from '../plugins/printInstructions';
import { devFlowFrontendExternalModules } from '../../../actions/v2/startFrontend';
import { Context } from '../../../context/context';
import { ModuleEntries } from '../../v2/entries';
import { Entries } from '@modern-js/app-tools/dist/types/types/config/source';

export const appConfig = (
  context: Context,
  entries: Entries,
  exposes: ModuleEntries['entries'],
  manifest: PluginManifest,
) =>
  defineConfig({
    dev: {
      hmr: true,
      liveReload: true,
      client: {
        path: '/webpack-hmr',
        host: 'localhost',
        protocol: 'ws',
      },
    },
    runtime: {
      router: true,
      masterApp: true,
    },
    source: {
      // automatically generated asynchronous boundary via Dynamic Import, allowing the page code to consume remote modules generated by the module federation.
      enableAsyncEntry: true,
      disableDefaultEntries: true,
      entries,
    },
    tools: {
      webpack: (config, { webpack, appendPlugins, prependPlugins, CHAIN_ID }) => {
        // @ts-expect-error
        delete config.optimization.splitChunks;
        // @ts-expect-error
        config.output.publicPath = 'auto';
        const fullProjectName = context.longArtifactId;
        config.externals = devFlowFrontendExternalModules;

        // prependPlugins([new webpack.HotModuleReplacementPlugin()]);
        appendPlugins([
          new webpack.container.ModuleFederationPlugin({
            name: fullProjectName,
            library: { type: 'window', name: fullProjectName },
            runtime: false,
            filename: 'static/js/remoteEntry.js',
            exposes,
            shared: {},
          }),
          new webpack.ProvidePlugin({
            process: 'process/browser',
          }),
        ]);
      },
      devServer: {
        headers: {
          'Access-Control-Allow-Origin': '*',
          'Access-Control-Allow-Methods': '*',
          'Access-Control-Allow-Headers': '*',
        },
        hot: true,
        liveReload: true,
      },
    },
    builderPlugins: [
      // just generates a json file in dist
      devPortalManifest(manifest)
    ],
    plugins: [appTools({ bundler: 'webpack' }), printInstructions(context)],
    output: {
      enableCssModuleTSDeclaration: true,
      disableCssModuleExtension: false,
      svgDefaultExport: 'component',
    },
  });