React MFA Port Listening Configuration

[smasala]

Current Behavior

Current implementation is inflexible when it comes to defining multiple configurations as the port is always expected to be defined in a specific location: https://github.com/nrwl/nx/blob/50d01d15677eb9165e24d759d790f60af22b9fff/packages/react/src/executors/module-federation-dev-server/module-federation-dev-server.impl.ts#L49

Following configuration fails:

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

Expected Behavior

That of v15.9.2 where the remote is determined to be running by not evaluating the port. https://github.com/nrwl/nx/blob/15.9.2/packages/react/src/executors/module-federation-dev-server/module-federation-dev-server.impl.ts

GitHub Repo

No response

Steps to Reproduce

1. Set the port of the remote app under a configuration and not as a default value

Nx Report

Node   : 16.14.2
   OS     : linux-x64
   pnpm   : 7.1.5

   nx                 : 16.4.2
   @nx/js             : 16.4.2
   @nx/jest           : 16.4.2
   @nx/linter         : 16.4.2
   @nx/workspace      : 16.4.2
   @nx/cypress        : 16.4.2
   @nx/devkit         : 16.4.2
   @nx/eslint-plugin  : 16.4.2
   @nx/nest           : 16.4.2
   @nx/node           : 16.4.2
   @nx/react          : 16.4.2
   @nx/rollup         : 16.4.2
   @nx/storybook      : 16.4.2
   @nrwl/tao          : 16.4.2
   @nx/web            : 16.4.2
   @nx/webpack        : 16.4.2
   nx-cloud           : 16.0.5
   typescript         : 5.1.3
   ---------------------------------------
   Community plugins:
   @jscutlery/semver            : 2.23.4
   @nx-tools/nx-container       : 4.0.2
   @nx-tools/nx-prisma          : 2.0.0-alpha.4
   @trumbitta/nx-plugin-openapi : 1.12.1

Failure Logs

node_modules/.pnpm/@nx+react@16.4.2_2qqlfvgn7dpb6jkscvrd77igu4/node_modules/@nx/react/src/executors/module-federation-dev-server/module-federation-dev-server.impl.js:98
                throw new Error(`Timed out waiting for remote to start. Check above for any errors.`);
                      ^

Error: Timed out waiting for remote to start. Check above for any errors.
    at node_modules/.pnpm/@nx+react@16.4.2_2qqlfvgn7dpb6jkscvrd77igu4/node_modules/@nx/react/src/executors/module-federation-dev-server/module-federation-dev-server.impl.js:98:23
    at Generator.throw (<anonymous>)
    at rejected (node_modules/.pnpm/tslib@2.5.0/node_modules/tslib/tslib.js:165:69)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)

Error: write EPIPE
    at process.target._send (node:internal/child_process:866:20)
    at process.target.send (node:internal/child_process:739:19)
    at node_modules/.pnpm/fork-ts-checker-webpack-plugin@7.2.13_mxlkf4ifym2ofbsylkx3agz4vu/node_modules/fork-ts-checker-webpack-plugin/lib/rpc/expose-rpc.js:27:31

Operating System

• [ ] macOS
• [X] Linux
• [X] Windows
• [ ] Other (Please specify)

Additional Information

No response

[quicksilverr]

Yeah, facing a similar problem. Any resolution?

[smasala]

Yeah, facing a similar problem. Any resolution?

Yes, only to place the port exactly at that location: targets['serve'].options.port

[quicksilverr]

@FrozenPandaz Any help here

[quicksilverr]

Yeah, facing a similar problem. Any resolution?

Yes, only to place the port exactly at that location: targets['serve'].options.port

Thanks for this suggestion @smasala but then for multiple apps?

[smasala]

Thanks for this suggestion @smasala but then for multiple apps?

Not much you can do at the mo other than specify the port for each app.

[ghost]

The same timeout issue occurs when using a custom host together with a custom port in remote app development servers.

NX expects the host to be equal to "localhost" to avoid dev-server timeout every 20 minutes.

This is basically a bug around this place in the codebase: https://github.com/nrwl/nx/blob/dc3e1404b764445a30ff9a89fbd3aedda480b3d1/packages/react/src/executors/module-federation-dev-server/module-federation-dev-server.impl.ts#L289

Some time ago there was an attempt to fix a similar issue here https://github.com/nrwl/nx/issues/17354 but the actual issue is still there.

Are there plans to support a custom host for remote apps?

[ndcunningham]

Hey! Sorry for the delay.

If I understand the OP correctly, having individual project configurations is inflexible?

[smasala]

@ndcunningham no probs. The problem was that port value was hardcoded at the "serve" target which is inflexible. This might not be the case anymore.