nx 反应模块联合热重载

Question

I'm using module federation with nx and want to enable HMR. I applied the hmr: true option in both project.json files. (for the host and the remote). The problem that its working only for the remote, and when changing the code in the host project its not working and not updating it in the browser.

this is the configuration for the host project.json (I'm using nx server ):

"serve": {
  "executor": "@nrwl/react:module-federation-dev-server",
  "defaultConfiguration": "development",
  "options": {
    "buildTarget": "client:build",
    "hmr": true,
    "port": 4200
  },
  "configurations": {
    "development": {
      "buildTarget": "client:build:development",
      "open": true,
      "watch": true,
      "liveReload": true
    },
    "production": {
      "buildTarget": "client:build:production",
      "hmr": false
    }
  }
}

and this is in the remote project.json

"serve": {
  "executor": "@nrwl/react:module-federation-dev-server",
  "defaultConfiguration": "development",
  "options": {
    "buildTarget": "assets:build",
    "hmr": true,
    "port": 4201
  },
  "configurations": {
    "development": {
      "buildTarget": "assets:build:development"
    },
    "production": {
      "buildTarget": "assets:build:production",
      "hmr": false
    }
  }
}

Answer 1

It's not working with HMR. Well never got to make it work. But using live reload witht following config its working fine. I can even debug TS with source maps.

module.exports = merge(custom, common, {
  mode: 'development',
  output: {
    filename: '[name].[contenthash].js',
    path: path.join(__dirname, 'dev'),
    publicPath: 'auto',
  },
  devServer: {
    static: path.join(__dirname, 'dev'),
    hot: false,
    liveReload: true,
    port: infinisoft.moduleFederation.devport
  },
  plugins: [
    new MFLiveReloadPlugin({
      port: infinisoft.moduleFederation.devport,
      container: name,
      standalone: true
    }),
    new ReactRefreshWebpackPlugin(),
    new MinChunkSizePlugin({
      minChunkSize: 10000, // Minimum number of characters
    }),
    moduleFederation,
    new MiniCssExtractPlugin(),
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, 'src', 'config', 'index.html'),
    }),
  ],
  devtool: 'source-map',
});