Module Federation React remote cannot contain a dash in the project name

[rendmath]

Current Behavior

When creating a Module Federation React remote with a dash in the project name, trying to build or serve the remote leads to this Webpack error.

ERROR in [entry] [initial] remoteEntry.js
Library name base (remote-a) must be a valid identifier when using a var declaring library type. Either use a valid identifier (e. g. remote_a) or use a different library type (e. g. 'type: "global"', which assign a property on the global scope instead of declaring a variable). Common configuration options that specific library names are 'output.library[.name]', 'entry.xyz.library[.name]', 'ModuleFederationPlugin.name' and 'ModuleFederationPlugin.library[.name]'.

webpack compiled with 1 error (0a87bdbb1bd4cfe5)

When trying to solve the issue by changing the format of the var identifier in the module-federation.config.ts of the remote and all the related references in the host, another error is thrown by Nx.

TypeError: Cannot read properties of undefined (reading 'data')
    at C:\project\node_modules\@nx\webpack\src\utils\module-federation\get-remotes-for-host.js:66:112
    at Array.map (<anonymous>)
    at getRemotes (C:\project\node_modules\@nx\webpack\src\utils\module-federation\get-remotes-for-host.js:66:71)
    at moduleFederationDevServer (C:\project\node_modules\@nx\react\src\executors\module-federation-dev-server\module-federation-dev-server.impl.js:178:56)
    at moduleFederationDevServer.next (<anonymous>)
    at getLastValueFromAsyncIterableIterator (C:\project\NODE_M~1\nx\src\utils\async-iterator.js:13:27)
    at iteratorToProcessStatusCode (C:\project\NODE_M~1\nx\src\command-line\run\run.js:43:94)
    at C:\project\NODE_M~1\nx\src\command-line\run\run.js:179:16
    at processTicksAndRejections (node:internal/process/task_queues:95:5)
    at handleErrors (C:\project\NODE_M~1\nx\src\utils\params.js:9:16)

We investigated the issue in the Nx source code, and it seems that Nx tries to use the var identifier name (remoteA) to retrieve the corresponding project information, instead of using the actual Nx project name (remote-a).

Expected Behavior

When creating a Module Federation React remote with a dash in the project name, the generator produces a project that can be built and served out-of-the-box.

GitHub Repo

No response

Steps to Reproduce

1. Create a Module Federation React host with a remote containing a dash in its name.

   npx create-nx-workspace@latest ws --preset empty --workspaceType integrated --nxCloud skip
   cd ws
   nx add @nx/react
   nx generate @nx/react:host host \
       --dynamic true \
       --e2eTestRunner none \
       --unitTestRunner none \
       --remotes remote-a
   

2. Try to build or serve the project. The Webpack error occurs.
3. Change the remote identifier from remote-a to remoteA in host/frontend/src/assets/module-federation.manifest.json, remote-a/frontend/module-federation.config.ts and host/frontend/src/app/App.tsx.
4. Try to build or serve the host. The Nx error occurs.

Nx Report

Node   : 18.19.1
OS     : win32-x64
npm    : 9.8.0
 
nx (global)        : 18.3.4
nx                 : 18.3.4
@nx/js             : 18.3.4
@nx/linter         : 18.3.4
@nx/eslint         : 18.3.4
@nx/workspace      : 18.3.4
@nx/devkit         : 18.3.4
@nx/eslint-plugin  : 18.3.4
@nx/react          : 18.3.4
@nrwl/tao          : 18.3.4
@nx/web            : 18.3.4
@nx/webpack        : 18.3.4
typescript         : 5.4.5

Failure Logs

No response

Package Manager Version

No response

Operating System

• macOS
• Linux
• Windows
• Other (Please specify)

Additional Information

No response

[ndcunningham]

For global modules remote-a is not a valid name. The actual error here is from webpack because global libraries need to subscribe to Javascript rules for valid identifiers.
I.E it needs to be a valid variable when using var as the declaring library type .

I do think we need to handle this, so it will be fixed soon in a following PR.