module federation HMR on host

Current Behavior

host app HMR is not working and I need to reload the page by myself. but remote app HMR is working as expected (inside the host app).

Expected Behavior

when changing the code in the host app, it should reload the app.

Steps to Reproduce

just look at my configurations:

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
    }
  }
}

Failure Logs

I see this warning in the console. I’m not sure if its related

(missing: http://localhost:4200/polyfills.2c951a6de4399979.hot-update.mjs)
    at http://localhost:4200/polyfills.js:21576:25
    at new Promise (<anonymous>)
    at loadUpdateChunk (http://localhost:4200/polyfills.js:21571:19)
    at http://localhost:4200/polyfills.js:22031:28
    at Array.forEach (<anonymous>)
    at __webpack_require__.hmrC.jsonp (http://localhost:4200/polyfills.js:22026:21)
    at http://localhost:4200/polyfills.js:21054:46
    at Array.reduce (<anonymous>)
    at http://localhost:4200/polyfills.js:21050:54

Environment

   Node : 17.3.0
   OS   : darwin x64
   npm  : 8.3.0
   
   nx : 14.4.2
   @nrwl/angular : Not Found
   @nrwl/cypress : 14.4.2
   @nrwl/detox : Not Found
   @nrwl/devkit : 14.4.2
   @nrwl/eslint-plugin-nx : 14.4.2
   @nrwl/express : Not Found
   @nrwl/jest : 14.4.2
   @nrwl/js : 14.4.2
   @nrwl/linter : 14.4.2
   @nrwl/nest : Not Found
   @nrwl/next : Not Found
   @nrwl/node : Not Found
   @nrwl/nx-cloud : Not Found
   @nrwl/nx-plugin : Not Found
   @nrwl/react : 14.4.2
   @nrwl/react-native : Not Found
   @nrwl/schematics : Not Found
   @nrwl/storybook : 14.4.2
   @nrwl/web : 14.4.2
   @nrwl/workspace : 14.4.2
   typescript : 4.7.4
   ---------------------------------------
   Community plugins:

[ryansevilla]

What ended up fixing it for me was also removing the “styles” attribute from the project.json as well. I made two separate build processes, one for local and one for prod, the local one removes polyfills and styles, the prod one keeps them.

[jamieatmirza]

I managed to fix it by removing the "polyfills" from the build target for development

Could you paste an example? Also, could this introduce any side effects?

@usyyy I moved the polyfills in the host apps project.json into the production configuration. e.g.

    "build": {
      "executor": "@nrwl/webpack:webpack",
      "outputs": ["{options.outputPath}"],
      "defaultConfiguration": "production",
      "options": {
        "compiler": "babel",
        "outputPath": "dist/apps/host",
        "index": "apps/host/src/index.html",
        "baseHref": "/",
        "main": "apps/host/src/main.ts",
        "tsConfig": "apps/host/tsconfig.app.json",
        "assets": [
          "apps/host/src/favicon.ico"
        ],
        "styles": [],
        "scripts": [],
        "webpackConfig": "apps/host/webpack.config.js",
        "postcssConfig": "apps/host/postcss.config.js"
      },
      "configurations": {
        "development": {
          "extractLicenses": false,
          "optimization": false,
          "sourceMap": true,
          "vendorChunk": true
        },
        "production": {
          "polyfills": "apps/host/src/polyfills.ts",
          "fileReplacements": [
            {
              "replace": "apps/host/src/environments/environment.ts",
              "with": "apps/host/src/environments/environment.prod.ts"
            }
          ],
          "optimization": true,
          "outputHashing": "all",
          "sourceMap": false,
          "namedChunks": false,
          "extractLicenses": true,
          "vendorChunk": false,
          "webpackConfig": "apps/host/webpack.config.prod.js"
        }
      }
    },