fix(module-federation): Throw an error if remote is invalid (#23100)

If you are generating a remote using `--dynamic` either by using the
`host` generator or the `remote` generator we now check to ensure that
the remote name is a valid JavaScript variable.

If this is not done the app with be invalid and unable to be ran or
bundled.


closes: #23024

packages/angular/src/generators/host/host.spec.ts

@@ -6,11 +6,12 @@ import {
   getProjects,
   readProjectConfiguration,
 } from 'nx/src/generators/utils/project-configuration';
-import { E2eTestRunner } from '../../utils/test-runners';
+import { E2eTestRunner, UnitTestRunner } from '../../utils/test-runners';
 import {
   generateTestHostApplication,
   generateTestRemoteApplication,
 } from '../utils/testing';
+import { Linter } from '@nx/eslint';
 
 describe('Host App Generator', () => {
   it('should generate a host app with no remotes', async () => {
@@ -632,4 +633,23 @@ describe('Host App Generator', () => {
     const packageJson = readJson(tree, 'package.json');
     expect(packageJson).toEqual(initialPackageJson);
   });
+
+  it('should throw an error if invalid remotes names are provided and --dynamic is set to true', async () => {
+    const tree = createTreeWithEmptyWorkspace();
+    const remote = 'invalid-remote-name';
+
+    await expect(
+      generateTestHostApplication(tree, {
+        name: 'myhostapp',
+        remotes: [remote],
+        dynamic: true,
+        projectNameAndRootFormat: 'as-provided',
+        e2eTestRunner: E2eTestRunner.None,
+        linter: Linter.None,
+        style: 'css',
+        unitTestRunner: UnitTestRunner.None,
+        typescriptConfiguration: false,
+      })
+    ).rejects.toThrowError(`Invalid remote name provided: ${remote}.`);
+  });
 });

packages/angular/src/generators/host/host.ts

@@ -13,6 +13,7 @@ import { setupMf } from '../setup-mf/setup-mf';
 import { updateSsrSetup } from './lib';
 import type { Schema } from './schema';
 import { addMfEnvToTargetDefaultInputs } from '../utils/add-mf-env-to-inputs';
+import { isValidVariable } from '@nx/js';
 
 export async function host(tree: Tree, options: Schema) {
   return await hostInternal(tree, {
@@ -30,6 +31,19 @@ export async function hostInternal(tree: Tree, schema: Schema) {
   const remotesToGenerate: string[] = [];
   const remotesToIntegrate: string[] = [];
 
+  // Check to see if remotes are provided and also check if --dynamic is provided
+  // if both are check that the remotes are valid names else throw an error.
+  if (options.dynamic && options.remotes?.length > 0) {
+    options.remotes.forEach((remote) => {
+      const isValidRemote = isValidVariable(remote);
+      if (!isValidRemote.isValid) {
+        throw new Error(
+          `Invalid remote name provided: ${remote}. ${isValidRemote.message}`
+        );
+      }
+    });
+  }
+
   if (options.remotes && options.remotes.length > 0) {
     options.remotes.forEach((remote) => {
       if (!projects.has(remote)) {

packages/js/src/index.ts

@@ -13,6 +13,7 @@ export * from './utils/package-json/update-package-json';
 export * from './utils/package-json/create-entry-points';
 export { libraryGenerator } from './generators/library/library';
 export { initGenerator } from './generators/init/init';
+export { isValidVariable } from './utils/is-valid-variable';
 
 // eslint-disable-next-line @typescript-eslint/no-restricted-imports
 export {

packages/js/src/utils/is-valid-variable.ts

@@ -0,0 +1,37 @@
+/**
+ * Determines if a given string is a valid JavaScript variable name.
+ * @param name name of the variable to be checked
+ * @returns result object with a boolean indicating if the name is valid and a message explaining why it is not valid
+ */
+export function isValidVariable(name: string): {
+  isValid: boolean;
+  message: string;
+} {
+  const validRegex = /^[a-zA-Z_$][0-9a-zA-Z_$]*$/;
+
+  if (validRegex.test(name)) {
+    return { isValid: true, message: 'The name is a valid identifier.' };
+  } else {
+    if (name === '') {
+      return { isValid: false, message: 'The name cannot be empty.' };
+    } else if (/^[0-9]/.test(name)) {
+      return { isValid: false, message: 'The name cannot start with a digit.' };
+    } else if (/[^a-zA-Z0-9_$]/.test(name)) {
+      return {
+        isValid: false,
+        message:
+          'The name can only contain letters, digits, underscores, and dollar signs.',
+      };
+    } else if (/^[^a-zA-Z_$]/.test(name)) {
+      return {
+        isValid: false,
+        message:
+          'The name must start with a letter, underscore, or dollar sign.',
+      };
+    }
+    return {
+      isValid: false,
+      message: 'The name is not a valid JavaScript identifier.',
+    };
+  }
+}

packages/react/src/generators/host/host.spec.ts

@@ -340,4 +340,23 @@ describe('hostGenerator', () => {
       tree.read('foo/host-app/module-federation.config.ts', 'utf-8')
     ).toContain(`'remote1', 'remote2', 'remote3'`);
   });
+
+  it('should throw an error if invalid remotes names are provided and --dynamic is set to true', async () => {
+    const tree = createTreeWithEmptyWorkspace();
+    const remote = 'invalid-remote-name';
+
+    await expect(
+      hostGenerator(tree, {
+        name: 'myhostapp',
+        remotes: [remote],
+        dynamic: true,
+        projectNameAndRootFormat: 'as-provided',
+        e2eTestRunner: 'none',
+        linter: Linter.None,
+        style: 'css',
+        unitTestRunner: 'none',
+        typescriptConfiguration: false,
+      })
+    ).rejects.toThrowError(`Invalid remote name provided: ${remote}.`);
+  });
 });

packages/react/src/generators/host/host.ts

@@ -21,6 +21,7 @@ import { setupSsrForHost } from './lib/setup-ssr-for-host';
 import { updateModuleFederationE2eProject } from './lib/update-module-federation-e2e-project';
 import { NormalizedSchema, Schema } from './schema';
 import { addMfEnvToTargetDefaultInputs } from '../../utils/add-mf-env-to-inputs';
+import { isValidVariable } from '@nx/js';
 
 export async function hostGenerator(
   host: Tree,
@@ -48,6 +49,19 @@ export async function hostGeneratorInternal(
     addPlugin: false,
   };
 
+  // Check to see if remotes are provided and also check if --dynamic is provided
+  // if both are check that the remotes are valid names else throw an error.
+  if (options.dynamic && options.remotes?.length > 0) {
+    options.remotes.forEach((remote) => {
+      const isValidRemote = isValidVariable(remote);
+      if (!isValidRemote.isValid) {
+        throw new Error(
+          `Invalid remote name provided: ${remote}. ${isValidRemote.message}`
+        );
+      }
+    });
+  }
+
   const initTask = await applicationGenerator(host, {
     ...options,
     // The target use-case is loading remotes as child routes, thus always enable routing.

packages/react/src/generators/remote/remote.spec.ts

@@ -292,4 +292,24 @@ describe('remote generator', () => {
       tree.read('test/module-federation.server.config.ts', 'utf-8')
     ).toMatchSnapshot();
   });
+
+  it('should throw an error if invalid remotes names are provided and --dynamic is set to true', async () => {
+    const tree = createTreeWithEmptyWorkspace();
+    const name = 'invalid-dynamic-remote-name';
+    await expect(
+      remote(tree, {
+        name,
+        devServerPort: 4209,
+        dynamic: true,
+        e2eTestRunner: 'cypress',
+        linter: Linter.EsLint,
+        skipFormat: false,
+        style: 'css',
+        unitTestRunner: 'jest',
+        ssr: true,
+        projectNameAndRootFormat: 'as-provided',
+        typescriptConfiguration: true,
+      })
+    ).rejects.toThrowError(`Invalid remote name provided: ${name}.`);
+  });
 });

packages/react/src/generators/remote/remote.ts

@@ -23,6 +23,7 @@ import { setupTspathForRemote } from './lib/setup-tspath-for-remote';
 import { addRemoteToDynamicHost } from './lib/add-remote-to-dynamic-host';
 import { addMfEnvToTargetDefaultInputs } from '../../utils/add-mf-env-to-inputs';
 import { maybeJs } from '../../utils/maybe-js';
+import { isValidVariable } from '@nx/js';
 
 export function addModuleFederationFiles(
   host: Tree,
@@ -90,6 +91,18 @@ export async function remoteGeneratorInternal(host: Tree, schema: Schema) {
     // TODO(colum): remove when MF works with Crystal
     addPlugin: false,
   };
+
+  if (options.dynamic) {
+    // Dynamic remotes generate with library { type: 'var' } by default.
+    // We need to ensure that the remote name is a valid variable name.
+    const isValidRemote = isValidVariable(options.name);
+    if (!isValidRemote.isValid) {
+      throw new Error(
+        `Invalid remote name provided: ${options.name}. ${isValidRemote.message}`
+      );
+    }
+  }
+
   const initAppTask = await applicationGenerator(host, {
     ...options,
     // Only webpack works with module federation for now.