@nx/react 17.0.3 → 17.0.5

package/src/generators/component/files/__fileName__.tsx__tmpl__

@@ -32,13 +32,30 @@ const Styled<%= className %> = styled.div`
   color: pink;
 `;
 <% }%>
-<% if (classComponent) { %>
-export class <%= className %> extends Component<<%= className %>Props> {
-  override render() {
+<% if(!isNextPage) { %>
+  <% if (classComponent) { %>
+  export class <%= className %> extends Component<<%= className %>Props> {
+    override render() {
+      return (
+        <<%= wrapper %><%- extras %>>
+          <%= styledModule === 'styled-jsx' ? `<style jsx>{\`div { color: pink; }\`}</style>` : `` %>
+          <p>Welcome to <%= className %>!</p>
+          <% if (routing) { %>
+            <ul>
+              <li><Link to="/"><%= name %> root</Link></li>
+            </ul>
+            <Route path="/" element={<div>This is the <%= name %> root route.</div>} />
+          <% } %>
+        </<%= wrapper %>>
+      );
+    }
+  }
+  <% } else { %>
+  export function <%= className %>(props: <%= className %>Props) {
     return (
       <<%= wrapper %><%- extras %>>
-        <%= styledModule === 'styled-jsx' ? `<style jsx>{\`div { color: pink; }\`}</style>` : `` %>
-        <p>Welcome to <%= className %>!</p>
+        <% if (styledModule === 'styled-jsx') { %><style jsx>{`div { color: pink; }`}</style><% } %>
+        <h1>Welcome to <%= className %>!</h1>
         <% if (routing) { %>
           <ul>
             <li><Link to="/"><%= name %> root</Link></li>
@@ -48,24 +65,24 @@ export class <%= className %> extends Component<<%= className %>Props> {
       </<%= wrapper %>>
     );
   }
-}
+  <% } %>
+
+  export default <%= className %>;
 <% } else { %>
-export function <%= className %>(props: <%= className %>Props) {
-  return (
-    <<%= wrapper %><%- extras %>>
-      <% if (styledModule === 'styled-jsx') { %><style jsx>{`div { color: pink; }`}</style><% } %>
-      <h1>Welcome to <%= className %>!</h1>
-      <% if (routing) { %>
-        <ul>
-          <li><Link to="/"><%= name %> root</Link></li>
-        </ul>
-        <Route path="/" element={<div>This is the <%= name %> root route.</div>} />
-      <% } %>
-    </<%= wrapper %>>
-  );
-};
+  export default function <%= className %>(props: <%= className %>Props) {
+    return (
+      <<%= wrapper %><%- extras %>>
+        <% if (styledModule === 'styled-jsx') { %><style jsx>{`div { color: pink; }`}</style><% } %>
+        <h1>Welcome to <%= className %>!</h1>
+        <% if (routing) { %>
+          <ul>
+            <li><Link to="/"><%= name %> root</Link></li>
+          </ul>
+          <Route path="/" element={<div>This is the <%= name %> root route.</div>} />
+        <% } %>
+      </<%= wrapper %>>
+    );
+  };
 <% } %>
 
-export default <%= className %>;
-
 <% if (inSourceTests === true) { %> <%- inSourceVitestTests %> <% } %>

package/src/generators/component/lib/normalize-options.js

@@ -22,7 +22,7 @@ async function normalizeOptions(tree, options) {
     });
     const project = (0, devkit_1.readProjectConfiguration)(tree, projectName);
     const { className } = (0, devkit_1.names)(name);
-    const { sourceRoot: projectSourceRoot, projectType } = project;
+    const { sourceRoot: projectSourceRoot, root: projectRoot, projectType, } = project;
     const styledModule = /^(css|scss|less|none)$/.test(options.style)
         ? null
         : options.style;
@@ -33,6 +33,8 @@ async function normalizeOptions(tree, options) {
     options.routing = options.routing ?? false;
     options.globalCss = options.globalCss ?? false;
     options.inSourceTests = options.inSourceTests ?? false;
+    //TODO (nicholas): Remove when Next page generator is removed
+    options.isNextPage = options.isNextPage ?? false;
     return {
         ...options,
         projectName,
@@ -42,7 +44,7 @@ async function normalizeOptions(tree, options) {
         className,
         fileName,
         filePath,
-        projectSourceRoot,
+        projectSourceRoot: projectSourceRoot ?? projectRoot,
     };
 }
 exports.normalizeOptions = normalizeOptions;

package/src/generators/component/schema.d.ts

@@ -3,7 +3,7 @@ import { SupportedStyles } from '../../../typings/style';
 export interface Schema {
   name: string;
   /**
-   * @deprecated Provide the `directory` option instead and use the `as-provided` format. The project will be determined from the directory provided. It will be removed in Nx v18.
+   * @deprecated Provide the `directory` option instead and use the `as-provided` format. The project will be determined from the directory provided. It will be removed in Nx v19.
    */
   project?: string;
   style: SupportedStyles;
@@ -11,18 +11,18 @@ export interface Schema {
   directory?: string;
   export?: boolean;
   /**
-   * @deprecated Provide the `name` in pascal-case and use the `as-provided` format. This option will be removed in Nx v18.
+   * @deprecated Provide the `name` in pascal-case and use the `as-provided` format. This option will be removed in Nx v19.
    */
   pascalCaseFiles?: boolean;
   /**
-   * @deprecated Provide the `directory` in pascal-case and use the `as-provided` format. This option will be removed in Nx v18.
+   * @deprecated Provide the `directory` in pascal-case and use the `as-provided` format. This option will be removed in Nx v19.
    */
   pascalCaseDirectory?: boolean;
   classComponent?: boolean;
   routing?: boolean;
   js?: boolean;
   /**
-   * @deprecated Provide the `directory` option instead and use the `as-provided` format. This option will be removed in Nx v18.
+   * @deprecated Provide the `directory` option instead and use the `as-provided` format. This option will be removed in Nx v19.
    */
   flat?: boolean;
   globalCss?: boolean;
@@ -33,6 +33,8 @@ export interface Schema {
   // Used by other wrapping generators to preserve previous behavior
   // e.g. @nx/next:component
   derivedDirectory?: string;
+  // Used by Next.js to determine how React should generate the page
+  isNextPage?: boolean;
 }
 
 export interface NormalizedSchema extends Schema {

package/src/generators/component/schema.json

@@ -1,5 +1,5 @@
 {
-  "$schema": "http://json-schema.org/schema",
+  "$schema": "https://json-schema.org/schema",
   "cli": "nx",
   "$id": "NxReactComponent",
   "title": "Create a React Component",
@@ -13,7 +13,7 @@
       "$default": {
         "$source": "projectName"
       },
-      "x-deprecated": "Provide the `directory` option instead and use the `as-provided` format. The project will be determined from the directory provided. It will be removed in Nx v18."
+      "x-deprecated": "Provide the `directory` option instead and use the `as-provided` format. The project will be determined from the directory provided. It will be removed in Nx v19."
     },
     "name": {
       "type": "string",
@@ -40,11 +40,11 @@
           },
           {
             "value": "scss",
-            "label": "SASS(.scss)       [ http://sass-lang.com          ]"
+            "label": "SASS(.scss)       [ https://sass-lang.com          ]"
           },
           {
             "value": "less",
-            "label": "LESS              [ http://lesscss.org            ]"
+            "label": "LESS              [ https://lesscss.org            ]"
           },
           {
             "value": "styled-components",
@@ -91,7 +91,7 @@
       "type": "boolean",
       "description": "Create component at the source root rather than its own directory.",
       "default": false,
-      "x-deprecated": "Provide the `directory` option instead and use the `as-provided` format. This option will be removed in Nx v18."
+      "x-deprecated": "Provide the `directory` option instead and use the `as-provided` format. This option will be removed in Nx v19."
     },
     "export": {
       "type": "boolean",
@@ -105,14 +105,14 @@
       "description": "Use pascal case component file name (e.g. `App.tsx`).",
       "alias": "P",
       "default": false,
-      "x-deprecated": "Provide the `name` in pascal-case and use the `as-provided` format. This option will be removed in Nx v18."
+      "x-deprecated": "Provide the `name` in pascal-case and use the `as-provided` format. This option will be removed in Nx v19."
     },
     "pascalCaseDirectory": {
       "type": "boolean",
       "description": "Use pascal case directory name (e.g. `App/App.tsx`).",
       "alias": "R",
       "default": false,
-      "x-deprecated": "Provide the `directory` in pascal-case and use the `as-provided` format. This option will be removed in Nx v18."
+      "x-deprecated": "Provide the `directory` in pascal-case and use the `as-provided` format. This option will be removed in Nx v19."
     },
     "classComponent": {
       "type": "boolean",

package/src/generators/component-cypress-spec/schema.json

@@ -1,5 +1,5 @@
 {
-  "$schema": "http://json-schema.org/schema",
+  "$schema": "https://json-schema.org/schema",
   "cli": "nx",
   "$id": "NxReactComponentCypressSpec",
   "title": "Create component Cypress spec",

package/src/generators/component-story/schema.json

@@ -1,5 +1,5 @@
 {
-  "$schema": "http://json-schema.org/schema",
+  "$schema": "https://json-schema.org/schema",
   "cli": "nx",
   "$id": "NxReactComponentStory",
   "title": "Create component story",

package/src/generators/component-test/schema.json

@@ -1,5 +1,5 @@
 {
-  "$schema": "http://json-schema.org/schema",
+  "$schema": "https://json-schema.org/schema",
   "cli": "nx",
   "$id": "NxReactCypressComponentTest",
   "title": "Add Cypress component test",

package/src/generators/cypress-component-configuration/cypress-component-configuration.d.ts

@@ -1,9 +1,10 @@
 import { Tree } from '@nx/devkit';
 import { CypressComponentConfigurationSchema } from './schema.d';
+export declare function cypressComponentConfigGenerator(tree: Tree, options: CypressComponentConfigurationSchema): Promise<import("@nx/devkit").GeneratorCallback>;
 /**
  * This is for using cypresses own Component testing, if you want to use test
  * storybook components then use componentCypressGenerator instead.
  *
  */
-export declare function cypressComponentConfigGenerator(tree: Tree, options: CypressComponentConfigurationSchema): Promise<() => void>;
+export declare function cypressComponentConfigGeneratorInternal(tree: Tree, options: CypressComponentConfigurationSchema): Promise<import("@nx/devkit").GeneratorCallback>;
 export default cypressComponentConfigGenerator;

package/src/generators/cypress-component-configuration/cypress-component-configuration.js

@@ -1,26 +1,39 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.cypressComponentConfigGenerator = void 0;
+exports.cypressComponentConfigGeneratorInternal = exports.cypressComponentConfigGenerator = void 0;
 const devkit_1 = require("@nx/devkit");
 const versions_1 = require("../../utils/versions");
 const add_files_1 = require("./lib/add-files");
 const ct_utils_1 = require("../../utils/ct-utils");
+function cypressComponentConfigGenerator(tree, options) {
+    return cypressComponentConfigGeneratorInternal(tree, {
+        addPlugin: false,
+        ...options,
+    });
+}
+exports.cypressComponentConfigGenerator = cypressComponentConfigGenerator;
 /**
  * This is for using cypresses own Component testing, if you want to use test
  * storybook components then use componentCypressGenerator instead.
  *
  */
-async function cypressComponentConfigGenerator(tree, options) {
+async function cypressComponentConfigGeneratorInternal(tree, options) {
     const { componentConfigurationGenerator: baseCyCtConfig } = (0, devkit_1.ensurePackage)('@nx/cypress', versions_1.nxVersion);
+    const nxJson = (0, devkit_1.readNxJson)(tree);
+    const addPlugin = process.env.NX_ADD_PLUGINS !== 'false' &&
+        nxJson.useInferencePlugins !== false;
+    options.addPlugin ??= addPlugin;
     const projectConfig = (0, devkit_1.readProjectConfiguration)(tree, options.project);
     const installTask = await baseCyCtConfig(tree, {
         project: options.project,
         skipFormat: true,
         jsx: true,
+        addPlugin: options.addPlugin,
     });
-    const found = await (0, ct_utils_1.addCTTargetWithBuildTarget)(tree, {
+    const found = await (0, ct_utils_1.configureCypressCT)(tree, {
         project: options.project,
         buildTarget: options.buildTarget,
+        bundler: options.bundler,
         validExecutorNames: new Set([
             '@nx/webpack:webpack',
             '@nx/vite:build',
@@ -32,9 +45,7 @@ async function cypressComponentConfigGenerator(tree, options) {
     if (!options.skipFormat) {
         await (0, devkit_1.formatFiles)(tree);
     }
-    return () => {
-        installTask();
-    };
+    return installTask;
 }
-exports.cypressComponentConfigGenerator = cypressComponentConfigGenerator;
+exports.cypressComponentConfigGeneratorInternal = cypressComponentConfigGeneratorInternal;
 exports.default = cypressComponentConfigGenerator;

package/src/generators/cypress-component-configuration/lib/add-files.js

@@ -10,9 +10,7 @@ async function addFiles(tree, projectConfig, options, found) {
     // when importing react
     const { addMountDefinition, addDefaultCTConfig } = await Promise.resolve().then(() => require('@nx/cypress/src/utils/config'));
     // Specifically undefined to allow Remix workaround of passing an empty string
-    const actualBundler = options.buildTarget !== undefined && options.bundler
-        ? options.bundler
-        : await (0, ct_utils_1.getBundlerFromTarget)(found, tree);
+    const actualBundler = await (0, ct_utils_1.getActualBundler)(tree, options, found);
     if (options.bundler && options.bundler !== actualBundler) {
         devkit_1.logger.warn(`You have specified ${options.bundler} as the bundler but this project is configured to use ${actualBundler}.
       This may cause errors. If you are seeing errors, try removing the --bundler option.`);
@@ -21,9 +19,6 @@ async function addFiles(tree, projectConfig, options, found) {
     const commandFile = (0, devkit_1.joinPathFragments)(projectConfig.root, 'cypress', 'support', 'component.ts');
     const updatedCommandFile = await addMountDefinition(tree.read(commandFile, 'utf-8'));
     tree.write(commandFile, `import { mount } from 'cypress/react18';\n${updatedCommandFile}`);
-    const cyFile = (0, devkit_1.joinPathFragments)(projectConfig.root, 'cypress.config.ts');
-    const updatedCyConfig = await addDefaultCTConfig(tree.read(cyFile, 'utf-8'), { bundler: bundlerToUse });
-    tree.write(cyFile, `import { nxComponentTestingPreset } from '@nx/react/plugins/component-testing';\n${updatedCyConfig}`);
     if (options.bundler === 'webpack' ||
         (!options.bundler && actualBundler === 'webpack')) {
         (0, devkit_1.addDependenciesToPackageJson)(tree, {}, { '@nx/webpack': versions_1.nxVersion });

package/src/generators/cypress-component-configuration/schema.d.ts

@@ -4,4 +4,5 @@ export interface CypressComponentConfigurationSchema {
   skipFormat?: boolean;
   buildTarget?: string;
   bundler?: 'webpack' | 'vite';
+  addPlugin?: boolean;
 }

package/src/generators/federate-module/federate-module.js

@@ -59,10 +59,10 @@ async function federateModuleGenerator(tree, schema) {
     Now you can use the module from your host app like this:
 
     Static import:
-    import { MyComponent } from '${schema.name}/${remoteName}';
+    import { MyComponent } from '${remoteName}/${schema.name}';
     
     Dynamic import:
-    import('${schema.name}/${remoteName}').then((m) => m.${remoteName});
+    import('${remoteName}/${schema.name}').then((m) => m.${schema.name});
   `);
     return (0, devkit_1.runTasksInSerial)(...tasks);
 }

package/src/generators/federate-module/schema.d.ts

@@ -4,7 +4,7 @@ export interface Schema {
   remote: string;
   remoteDirectory?: string;
   projectNameAndRootFormat?: ProjectNameAndRootFormat;
-  e2eTestRunner?: 'cypress' | 'none';
+  e2eTestRunner?: 'cypress' | 'playwright' | 'none';
   host?: string;
   linter?: Linter;
   skipFormat?: boolean;

package/src/generators/federate-module/schema.json

@@ -1,5 +1,5 @@
 {
-  "$schema": "http://json-schema.org/schema",
+  "$schema": "https://json-schema.org/schema",
   "cli": "nx",
   "$id": "NxReactFederateModule",
   "title": "Federate Module",
@@ -68,8 +68,9 @@
     },
     "e2eTestRunner": {
       "type": "string",
-      "enum": ["cypress", "none"],
-      "description": "Test runner to use for end to end (e2e) tests.",
+      "enum": ["cypress", "playwright", "none"],
+      "description": "Test runner to use for end to end (E2E) tests.",
+      "x-prompt": "Which E2E test runner would you like to use?",
       "default": "cypress"
     },
     "host": {

package/src/generators/hook/files/__fileName__.ts__tmpl__

@@ -1,15 +1,15 @@
-import { useState, useCallback } from 'react'
-
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-export interface <%= hookTypeName %> {
-  count: number;
-  increment: () => void;
-}
-
-export function <%= hookName %>(): <%= hookTypeName %> {
-  const [count, setCount] = useState(0)
-  const increment = useCallback(() => setCount((x) => x + 1), [])
-  return { count, increment }
-};
-
-export default <%= hookName %>;
+import { useState, useCallback } from 'react'
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface <%= hookTypeName %> {
+  count: number;
+  increment: () => void;
+}
+
+export function <%= hookName %>(): <%= hookTypeName %> {
+  const [count, setCount] = useState(0)
+  const increment = useCallback(() => setCount((x) => x + 1), [])
+  return { count, increment }
+}
+
+export default <%= hookName %>;

package/src/generators/hook/schema.d.ts

@@ -1,22 +1,22 @@
 export interface Schema {
   name: string;
   /**
-   * @deprecated Provide the `directory` option instead and use the `as-provided` format. The project will be determined from the directory provided. It will be removed in Nx v18.
+   * @deprecated Provide the `directory` option instead and use the `as-provided` format. The project will be determined from the directory provided. It will be removed in Nx v19.
    */
   project: string;
   skipTests?: boolean;
   directory?: string;
   export?: boolean;
   /**
-   * @deprecated Provide the `name` option instead and use the `as-provided` format. This option will be removed in Nx v18.
+   * @deprecated Provide the `name` option instead and use the `as-provided` format. This option will be removed in Nx v19.
    */
   pascalCaseFiles?: boolean;
   /**
-   * @deprecated Provide the `directory` option instead and use the `as-provided` format. This option will be removed in Nx v18.
+   * @deprecated Provide the `directory` option instead and use the `as-provided` format. This option will be removed in Nx v19.
    */
   pascalCaseDirectory?: boolean;
   /**
-   * @deprecated Provide the `directory` option instead and use the `as-provided` format. This option will be removed in Nx v18.
+   * @deprecated Provide the `directory` option instead and use the `as-provided` format. This option will be removed in Nx v19.
    */
   flat?: boolean;
   js?: boolean;

package/src/generators/hook/schema.json

@@ -1,5 +1,5 @@
 {
-  "$schema": "http://json-schema.org/schema",
+  "$schema": "https://json-schema.org/schema",
   "cli": "nx",
   "$id": "NxReactHook",
   "title": "Create a React Hook for Nx",
@@ -19,7 +19,7 @@
       "$default": {
         "$source": "projectName"
       },
-      "x-deprecated": "Provide the `directory` option instead and use the `as-provided` format. The project will be determined from the directory provided. It will be removed in Nx v18."
+      "x-deprecated": "Provide the `directory` option instead and use the `as-provided` format. The project will be determined from the directory provided. It will be removed in Nx v19."
     },
     "name": {
       "type": "string",
@@ -56,7 +56,7 @@
       "type": "boolean",
       "description": "Create hook at the source root rather than its own directory.",
       "default": false,
-      "x-deprecated": "Provide the `directory` option instead and use the `as-provided` format. It will be removed in Nx v18."
+      "x-deprecated": "Provide the `directory` option instead and use the `as-provided` format. It will be removed in Nx v19."
     },
     "export": {
       "type": "boolean",
@@ -70,14 +70,14 @@
       "description": "Use pascal case hook file name (e.g. `useHook.ts`).",
       "alias": "P",
       "default": false,
-      "x-deprecated": "Provide the `name` in pascal-case and use the `as-provided` format. This option will be removed in Nx v18."
+      "x-deprecated": "Provide the `name` in pascal-case and use the `as-provided` format. This option will be removed in Nx v19."
     },
     "pascalCaseDirectory": {
       "type": "boolean",
       "description": "Use pascal case directory name (e.g. `useHook/useHook.ts`).",
       "alias": "R",
       "default": false,
-      "x-deprecated": "Provide the `directory` in pascal-case and use the `as-provided` format. This option will be removed in Nx v18."
+      "x-deprecated": "Provide the `directory` in pascal-case and use the `as-provided` format. This option will be removed in Nx v19."
     }
   },
   "required": ["name"]

package/src/generators/host/files/common/src/main.js__tmpl__

@@ -0,0 +1,10 @@
+<% if (dynamic) { %>
+    import { setRemoteDefinitions } from '@nx/react/mf';
+
+    fetch('/assets/module-federation.manifest.json')
+    .then((res) => res.json())
+    .then(definitions => setRemoteDefinitions(definitions))
+    .then(() =>  import('./bootstrap').catch(err => console.error(err)));
+<% } else { %>
+    import('./bootstrap').catch(err => console.error(err));
+<% } %>

package/src/generators/host/files/common/tsconfig.lint.json__tmpl__

@@ -0,0 +1,19 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": [
+        "node",
+        "@nx/react/typings/cssmodule.d.ts",
+        "@nx/react/typings/image.d.ts"
+    ]
+  },
+  "include": [
+    "src/**/*.js",
+    "src/**/*.jsx",
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "webpack.config.ts",
+    "webpack.prod.config.ts"
+  ]
+}

package/src/generators/host/files/common-ts/src/app/__fileName__.tsx__tmpl__

@@ -0,0 +1,41 @@
+import * as React from 'react';
+<% if (!minimal) { %>
+import NxWelcome from "./nx-welcome";
+<% } %>
+import { Link, Route, Routes } from 'react-router-dom';
+<% if (dynamic) { %>
+import { loadRemoteModule } from '@nx/react/mf';
+<% } %>
+
+<% if (remotes.length > 0) { %>
+<% remotes.forEach(function(r) { %>
+<% if (dynamic) { %>
+ const <%= r.className %> = React.lazy(() => loadRemoteModule('<%= r.fileName %>', './Module'))
+<% } else  { %>
+ const <%= r.className %> = React.lazy(() => import('<%= r.fileName %>/Module'));
+<% } %>
+ <% }); %>
+<% } %>
+
+export function App() {
+  return (
+    <React.Suspense fallback={null}>
+     <ul>
+       <li><Link to="/">Home</Link></li>
+       <% remotes.forEach(function(r) { %>
+         <li><Link to="/<%=r.fileName%>"><%=r.className%></Link></li>
+       <% }); %>
+     </ul>
+     <Routes>
+       <% if (!minimal) { %>
+       <Route path="/" element={<NxWelcome title="<%= projectName %>"/>} />
+       <% } %>
+       <% remotes.forEach(function(r) { %>
+         <Route path="/<%=r.fileName%>" element={<<%= r.className %>/>} />
+       <% }); %>
+     </Routes>
+    </React.Suspense>
+  );
+}
+
+export default App;

package/src/generators/host/files/common-ts/src/main.ts__tmpl__

@@ -0,0 +1,10 @@
+<% if (dynamic) { %>
+    import { setRemoteDefinitions } from '@nx/react/mf';
+
+    fetch('/assets/module-federation.manifest.json')
+    .then((res) => res.json())
+    .then(definitions => setRemoteDefinitions(definitions))
+    .then(() =>  import('./bootstrap').catch(err => console.error(err)));
+<% } else { %>
+    import('./bootstrap').catch(err => console.error(err));
+<% } %>

package/src/generators/host/files/module-federation/module-federation.config.js__tmpl__

@@ -1,6 +1,21 @@
 module.exports = {
   name: '<%= projectName %>',
+  /**
+   * To use a remote that does not exist in your current Nx Workspace
+   * You can use the tuple-syntax to define your remote
+   *
+   * remotes: [['my-external-remote', 'https://nx-angular-remote.netlify.app']]
+   *
+   * You _may_ need to add a `remotes.d.ts` file to your `src/` folder declaring the external remote for tsc, with the
+   * following content:
+   *
+   * declare module 'my-external-remote';
+   *
+   */
   remotes: [
-  <% remotes.forEach(function(r) {%> "<%= r.fileName %>", <% }); %>
+    <% if (static) { 
+         remotes.forEach(function(r) { %> "<%= r.fileName %>", <% }); 
+       }
+    %>
   ],
-};
+};

package/src/generators/host/files/module-federation-ssr/module-federation.server.config.js__tmpl__

@@ -6,8 +6,11 @@
 const moduleFederationConfig = {
     name: '<%= projectName %>',
     remotes: [
-    <% remotes.forEach(function(r) {%> "<%= r.fileName %>", <% }); %>
-    ],
+       <% if (static) { 
+         remotes.forEach(function(r) { %> "<%= r.fileName %>", <% }); 
+       }
+    %>
+  ],
 };
 
 module.exports = moduleFederationConfig;

package/src/generators/host/files/module-federation-ssr-ts/module-federation.server.config.ts__tmpl__

@@ -3,8 +3,11 @@ import { ModuleFederationConfig } from '@nx/webpack';
 const config: ModuleFederationConfig = {
     name: '<%= projectName %>',
     remotes: [
-    <% remotes.forEach(function(r) {%> "<%= r.fileName %>", <% }); %>
-    ],
+      <% if (static) { 
+         remotes.forEach(function(r) { %> "<%= r.fileName %>", <% }); 
+       }
+    %>
+  ],
 };
 
 export default config;

package/src/generators/host/files/module-federation-ts/module-federation.config.ts__tmpl__

@@ -2,9 +2,24 @@ import { ModuleFederationConfig } from '@nx/webpack';
 
 const config: ModuleFederationConfig = {
     name: '<%= projectName %>',
+    /**
+     * To use a remote that does not exist in your current Nx Workspace
+     * You can use the tuple-syntax to define your remote
+     *
+     * remotes: [['my-external-remote', 'https://nx-angular-remote.netlify.app']]
+     *
+     * You _may_ need to add a `remotes.d.ts` file to your `src/` folder declaring the external remote for tsc, with the
+     * following content:
+     *
+     * declare module 'my-external-remote';
+     *
+     */
     remotes: [
-        <% remotes.forEach(function(r) {%> "<%= r.fileName %>", <% }); %>
-],
+            <% if (static) { 
+         remotes.forEach(function(r) { %> "<%= r.fileName %>", <% }); 
+       }
+    %>
+  ],
 };
 
 export default config;