@nx/rspack - Cannot set custom port option to 'serve' executor

[x77t]

The Problem

The nx/rspack withNx method does not pick the custom port option that comes from the project.json or the CLI args and instead just uses a hardcoded value of 4200 when the serve command is being executed.

Problem Reference

nx-labs/packages/rspack/src/utils/with-nx.ts

Line 128 in 1d20a14

devServer: {

Problem Example

nx deps:

"devDependencies": {
    "@nx/react": "18.0.5",
    "@nx/rspack": "^18.0.2",
}

project configs:

// project.json

{
  "name": "crm-root",
  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
  "sourceRoot": "apps/crm/root/src",
  "projectType": "application",
  "targets": {
    "build": {
      "executor": "@nx/rspack:rspack",
      "outputs": [
        "{options.outputPath}"
      ],
      "defaultConfiguration": "production",
      "options": {
        "target": "web",
        "outputPath": "dist/apps/crm/root",
        "main": "apps/crm/root/src/main.ts",
        "tsConfig": "apps/crm/root/tsconfig.app.json",
        "rspackConfig": "apps/crm/root/rspack.config.js",
        "assets": [
          "apps/crm/root/src/favicon.ico",
          "apps/crm/root/src/assets"
        ]
      },
      "configurations": {
        "development": {
          "mode": "development"
        },
        "production": {
          "mode": "production",
          "optimization": true,
          "sourceMap": false
        }
      }
    },
    "serve": {
      "executor": "@nx/rspack:dev-server",
      "options": {
        "buildTarget": "crm-root:build:development"
      },
      "configurations": {
        "development": {},
        "production": {
          "buildTarget": "crm-root:build:production"
        }
      }
    },
    "serve-static": {
      "executor": "@nx/web:file-server",
      "defaultConfiguration": "production",
      "options": {
        "buildTarget": "crm-root:build",
        "watch": false,
        "port": 4444
      },
      "configurations": {
        "development": {
          "buildTarget": "crm-root:build:development"
        },
        "production": {
          "buildTarget": "crm-root:build:production"
        }
      }
    }
  },
  "tags": []
}

// rspack.config.js

const { composePlugins, withNx, withReact } = require('@nx/rspack')
const rspack = require("@rspack/core")

module.exports = composePlugins(withNx(), withReact(), (config) => {
  return {
    ...config,
    context: __dirname,
    node: {
      __dirname: true
    },
    module: {
      ...config.module,
      rules: [
        ...(config.module.rules || []),
        {
          test: /\.css$/,
          use: ["postcss-loader"],
          type: "css",
        },
      ]
    },
    plugins: [
      ...config.plugins,
      new rspack.container.ModuleFederationPlugin({
        name: 'crm-root',
        remotes: [],
      }),
    ]
  };
});

outputs:

nx run crm-root:serve

You are depending on apply entry lazily, this behavior has been deprecated, you can setup 'experiments.rspackFuture.disableApplyEntryLazily = true' to disable this behavior, and this will be enabled by default in v0.5
    Set env `RSPACK_DEP_WARNINGS` to 'false' to temporarily disable deprecation warnings.

<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:4200/
<i> [webpack-dev-server] On Your Network (IPv4): http://192.168.114.2:4200/
<i> [webpack-dev-server] On Your Network (IPv6): http://[fe80::1]:4200/
<i> [webpack-dev-server] Content not from webpack is served from '<my_project_path>/public' directory

...

nx run crm-root:serve --port=4444

You are depending on apply entry lazily, this behavior has been deprecated, you can setup 'experiments.rspackFuture.disableApplyEntryLazily = true' to disable this behavior, and this will be enabled by default in v0.5
    Set env `RSPACK_DEP_WARNINGS` to 'false' to temporarily disable deprecation warnings.

<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:4200/
<i> [webpack-dev-server] On Your Network (IPv4): http://192.168.114.2:4200/
<i> [webpack-dev-server] On Your Network (IPv6): http://[fe80::1]:4200/
<i> [webpack-dev-server] Content not from webpack is served from '<my_project_path>/public' directory

How To Reproduce

• Create a simple react app with rspack using nx/react and nx/rspack plugins
• Try passing a custom port value and serving the app from nx CLI