From c2e31127d9178aad7803adfe0462136bbfeb714f Mon Sep 17 00:00:00 2001
From: Nicholas Cunningham <ndcunningham@gmail.com>
Date: Thu, 31 Oct 2024 10:14:21 -0600
Subject: [PATCH] feat(core): Update plugin generators so that they are
 formatted by default (#28593)

---
 .../__snapshots__/application.spec.ts.snap    |  10 +-
 .../src/app/app.component.html__tpl__         |   9 +-
 .../src/app/app.component.html__tpl__         |   9 +-
 .../src/generators/application/lib/add-e2e.ts |   4 -
 .../__componentFileName__.stories.ts__tmpl__  |   8 +-
 .../component/files/__fileName__.__style__    |   2 +-
 .../library/files/base/README.md__tpl__       |   4 +-
 .../src/generators/library/library.spec.ts    |   8 +-
 .../__snapshots__/stories-app.spec.ts.snap    |  10 -
 .../__snapshots__/stories-lib.spec.ts.snap    |   6 -
 .../storybook-configuration.spec.ts.snap      |   2 -
 .../angular/src/generators/utils/add-jest.ts  |   8 +-
 .../common/__directory__/tsconfig.json__ext__ |   4 +-
 .../__snapshots__/generator.spec.ts.snap      | 378 +++++++++++-------
 .../converters/json-converter.spec.ts         |  76 +++-
 .../convert-to-flat-config/generator.spec.ts  |  80 ++--
 .../lint-project/lint-project.spec.ts         |  24 +-
 .../src/generators/utils/eslint-file.spec.ts  |  20 +-
 .../utils/flat-config/ast-utils.spec.ts       |  58 ++-
 .../generators/utils/flat-config/ast-utils.ts |   4 +-
 .../files/app/app.controller.spec.ts__tmpl__  |   1 -
 .../files/app/app.controller.ts__tmpl__       |   1 -
 .../files/app/app.module.ts__tmpl__           |   1 -
 .../files/app/app.service.spec.ts__tmpl__     |   1 -
 .../application/files/main.ts__tmpl__         |   1 -
 .../application/application.spec.ts           |   4 +-
 .../application/lib/add-linting.spec.ts       |   6 +-
 .../files/common/webpack.config.js__tmpl__    |   6 +-
 .../common/src/support/test-setup.ts__tmpl__  |   1 -
 .../__snapshots__/application.spec.ts.snap    |  32 +-
 .../files/base/nuxt.config.ts__tmpl__         |   4 +-
 .../__snapshots__/application.spec.ts.snap    |  61 +--
 .../src/app/__fileName__.spec.tsx__tmpl__     |   6 +-
 .../files/base-rspack/src/main.tsx__tmpl__    |  28 +-
 .../base-rspack/tsconfig.app.json__tmpl__     |   2 +-
 .../src/app/__fileName__.spec.tsx__tmpl__     |   6 +-
 .../files/base-vite/src/main.tsx__tmpl__      |  37 +-
 .../files/base-vite/tsconfig.app.json__tmpl__ |   2 +-
 .../src/app/__fileName__.spec.tsx__tmpl__     |   6 +-
 .../files/base-webpack/src/main.tsx__tmpl__   |  24 +-
 .../base-webpack/tsconfig.app.json__tmpl__    |   2 +-
 .../base-webpack/webpack.config.js__tmpl__    |   6 +-
 .../src/app/__fileName__.tsx__tmpl__          |  42 +-
 .../src/app/__fileName__.tsx__tmpl__          |  49 ++-
 .../src/app/__fileName__.tsx__tmpl__          |  42 +-
 .../src/app/__fileName__.tsx__tmpl__          |  53 ++-
 .../src/app/__fileName__.tsx__tmpl__          |  51 ++-
 .../src/app/__fileName__.tsx__tmpl__          |  48 ++-
 .../application/lib/get-app-tests.ts          |  33 +-
 .../component-story.spec.ts.snap              |  30 --
 .../__componentFileName__.stories.jsx__tmpl__ |  10 +-
 .../__componentFileName__.stories.tsx__tmpl__ |   7 +-
 .../component/files/__fileName__.tsx__tmpl__  | 111 +++--
 .../__snapshots__/host.webpack.spec.ts.snap   |  31 +-
 .../src/app/__fileName__.tsx__tmpl__          |  54 +--
 .../host/files/common-ts/src/main.ts__tmpl__  |  18 +-
 .../common/src/app/__fileName__.js__tmpl__    |  40 +-
 .../host/files/common/src/main.js__tmpl__     |  18 +-
 .../src/app/__fileName__.jsx__tmpl__          |  26 +-
 .../files/rspack-common/src/main.jsx__tmpl__  |  18 +-
 ...module-federation.server.config.ts__tmpl__ |  12 +-
 .../rspack.server.config.ts__tmpl__           |   2 +-
 ...module-federation.server.config.js__tmpl__ |  10 +-
 .../rspack.server.config.js__tmpl__           |   2 +-
 .../module-federation.config.ts__tmpl__       |  36 +-
 .../rspack.config.prod.ts__tmpl__             |  44 +-
 .../rspack.config.ts__tmpl__                  |   2 +-
 .../module-federation.config.js__tmpl__       |   8 +-
 .../rspack.config.prod.js__tmpl__             |   4 +-
 ...module-federation.server.config.ts__tmpl__ |  12 +-
 .../webpack.server.config.ts__tmpl__          |   2 +-
 ...module-federation.server.config.js__tmpl__ |  12 +-
 .../webpack.server.config.js__tmpl__          |   2 +-
 .../module-federation.config.ts__tmpl__       |  36 +-
 .../webpack.config.prod.ts__tmpl__            |  44 +-
 .../webpack.config.ts__tmpl__                 |   2 +-
 .../module-federation.config.js__tmpl__       |   8 +-
 .../webpack.config.prod.js__tmpl__            |  44 +-
 .../files/common/tsconfig.lib.json__tmpl__    |   2 +-
 .../files/vite/tsconfig.lib.json__tmpl__      |   2 +-
 .../__snapshots__/remote.rspack.spec.ts.snap  |  29 +-
 .../__snapshots__/remote.webpack.spec.ts.snap |  29 +-
 ...module-federation.server.config.ts__tmpl__ |   8 +-
 .../rspack.server.config.ts__tmpl__           |   2 +-
 ...module-federation.server.config.js__tmpl__ |   8 +-
 .../rspack.server.config.js__tmpl__           |   2 +-
 .../module-federation.config.ts__tmpl__       |  14 +-
 .../rspack.config.ts__tmpl__                  |   2 +-
 .../module-federation.config.js__tmpl__       |  14 +-
 ...module-federation.server.config.ts__tmpl__ |   8 +-
 .../webpack.server.config.ts__tmpl__          |   2 +-
 ...module-federation.server.config.js__tmpl__ |   8 +-
 .../webpack.server.config.js__tmpl__          |   2 +-
 .../module-federation.config.ts__tmpl__       |  14 +-
 .../webpack.config.ts__tmpl__                 |   2 +-
 .../module-federation.config.js__tmpl__       |  14 +-
 .../__snapshots__/stories.app.spec.ts.snap    |   2 -
 .../__snapshots__/stories.lib.spec.ts.snap    |   2 -
 .../__snapshots__/configuration.spec.ts.snap  |   2 -
 .../__snapshots__/application.spec.ts.snap    |   4 -
 .../files/common/src/app/App.spec.ts.template |  10 +-
 .../files/common/src/app/App.vue.template     |  30 +-
 .../files/common/src/main.ts.template         |  13 +-
 .../__snapshots__/library.spec.ts.snap        |   8 +-
 104 files changed, 1209 insertions(+), 949 deletions(-)

diff --git a/packages/angular/src/generators/application/__snapshots__/application.spec.ts.snap b/packages/angular/src/generators/application/__snapshots__/application.spec.ts.snap
index 0c02b4b50432d..74f27eda061af 100644
--- a/packages/angular/src/generators/application/__snapshots__/application.spec.ts.snap
+++ b/packages/angular/src/generators/application/__snapshots__/application.spec.ts.snap
@@ -58,7 +58,8 @@ describe('AppComponent', () => {
 `;
 
 exports[`app --minimal should skip "nx-welcome.component.ts" file and references for non-standalone apps with routing 4`] = `
-"<h1>Welcome plain</h1> <router-outlet></router-outlet>
+"<h1>Welcome plain</h1>
+<router-outlet></router-outlet>
 "
 `;
 
@@ -116,7 +117,7 @@ describe('AppComponent', () => {
 `;
 
 exports[`app --minimal should skip "nx-welcome.component.ts" file and references for non-standalone apps without routing 4`] = `
-"<h1>Welcome plain</h1> 
+"<h1>Welcome plain</h1>
 "
 `;
 
@@ -160,7 +161,8 @@ describe('AppComponent', () => {
 `;
 
 exports[`app --minimal should skip "nx-welcome.component.ts" file and references for standalone apps with routing 3`] = `
-"<h1>Welcome plain</h1> <router-outlet></router-outlet>
+"<h1>Welcome plain</h1>
+<router-outlet></router-outlet>
 "
 `;
 
@@ -202,7 +204,7 @@ describe('AppComponent', () => {
 `;
 
 exports[`app --minimal should skip "nx-welcome.component.ts" file and references for standalone apps without routing 3`] = `
-"<h1>Welcome plain</h1> 
+"<h1>Welcome plain</h1>
 "
 `;
 
diff --git a/packages/angular/src/generators/application/files/ng-module/src/app/app.component.html__tpl__ b/packages/angular/src/generators/application/files/ng-module/src/app/app.component.html__tpl__
index 7b09482b0dc6d..dc4bf1687b6f3 100644
--- a/packages/angular/src/generators/application/files/ng-module/src/app/app.component.html__tpl__
+++ b/packages/angular/src/generators/application/files/ng-module/src/app/app.component.html__tpl__
@@ -1 +1,8 @@
-<% if(minimal) { %><h1>Welcome <%= appName %></h1><% } else { %><<%= nxWelcomeSelector %>></<%= nxWelcomeSelector %>><% } %> <% if(routing) { %><router-outlet></router-outlet><% } %>
+<%_ if(minimal) { _%>
+<h1>Welcome <%= appName %></h1>
+<%_ } else { _%>
+<<%= nxWelcomeSelector %>></<%= nxWelcomeSelector %>>
+<%_ } _%> 
+<%_ if(routing) { _%>
+<router-outlet></router-outlet>
+<%_ } _%>
diff --git a/packages/angular/src/generators/application/files/standalone-components/src/app/app.component.html__tpl__ b/packages/angular/src/generators/application/files/standalone-components/src/app/app.component.html__tpl__
index 7b09482b0dc6d..e912d0d640879 100644
--- a/packages/angular/src/generators/application/files/standalone-components/src/app/app.component.html__tpl__
+++ b/packages/angular/src/generators/application/files/standalone-components/src/app/app.component.html__tpl__
@@ -1 +1,8 @@
-<% if(minimal) { %><h1>Welcome <%= appName %></h1><% } else { %><<%= nxWelcomeSelector %>></<%= nxWelcomeSelector %>><% } %> <% if(routing) { %><router-outlet></router-outlet><% } %>
+<%_ if(minimal) { _%>
+<h1>Welcome <%= appName %></h1>
+<%_ } else { _%>
+<<%= nxWelcomeSelector %>></<%= nxWelcomeSelector %>>
+<%_ } _%>
+<%_ if(routing) { _%>
+<router-outlet></router-outlet>
+<%_ } _%>
diff --git a/packages/angular/src/generators/application/lib/add-e2e.ts b/packages/angular/src/generators/application/lib/add-e2e.ts
index 04359159d718e..2227cbadf2c1c 100644
--- a/packages/angular/src/generators/application/lib/add-e2e.ts
+++ b/packages/angular/src/generators/application/lib/add-e2e.ts
@@ -1,16 +1,12 @@
 import { Tree } from '@nx/devkit';
 import {
-  addDependenciesToPackageJson,
   addProjectConfiguration,
   ensurePackage,
   getPackageManagerCommand,
   joinPathFragments,
   readNxJson,
-  readProjectConfiguration,
-  updateProjectConfiguration,
 } from '@nx/devkit';
 import { nxVersion } from '../../../utils/versions';
-import { getInstalledAngularVersionInfo } from '../../utils/version-utils';
 import type { NormalizedSchema } from './normalized-schema';
 import { addE2eCiTargetDefaults } from '@nx/devkit/src/generators/target-defaults-utils';
 import { E2EWebServerDetails } from '@nx/devkit/src/generators/e2e-web-server-info-utils';
diff --git a/packages/angular/src/generators/component-story/files/__componentFileName__.stories.ts__tmpl__ b/packages/angular/src/generators/component-story/files/__componentFileName__.stories.ts__tmpl__
index c44af67d2cbe5..c10f05da004f8 100644
--- a/packages/angular/src/generators/component-story/files/__componentFileName__.stories.ts__tmpl__
+++ b/packages/angular/src/generators/component-story/files/__componentFileName__.stories.ts__tmpl__
@@ -1,9 +1,9 @@
 import type { Meta, StoryObj } from '@storybook/angular';
 import { <%=componentName%> } from './<%=componentFileName%>';
-<% if ( interactionTests ) { %>
+<%_ if ( interactionTests ) { _%>
 import { within } from '@storybook/testing-library';
 import { expect } from '@storybook/jest';
-<% } %>
+<%_ } _%>
 
 const meta: Meta<<%= componentName %>> = {
   component: <%= componentName %>,
@@ -18,7 +18,7 @@ export const Primary: Story = {
   },
 };
 
-<% if ( interactionTests ) { %>
+<%_ if ( interactionTests ) { _%>
 export const Heading: Story = {
   args: {<% for (let prop of props) { %>
     <%= prop.name %>: <%- prop.defaultValue %>,<% } %>
@@ -28,4 +28,4 @@ export const Heading: Story = {
     expect(canvas.getByText(/<%=componentNameSimple%> works!/gi)).toBeTruthy();
   },
 };
-<% } %>
\ No newline at end of file
+<%_ } _%>
\ No newline at end of file
diff --git a/packages/angular/src/generators/component/files/__fileName__.__style__ b/packages/angular/src/generators/component/files/__fileName__.__style__
index 421d8143c9bb2..5acacb500a84a 100644
--- a/packages/angular/src/generators/component/files/__fileName__.__style__
+++ b/packages/angular/src/generators/component/files/__fileName__.__style__
@@ -2,5 +2,5 @@
   display: block;
 }
 <% } else { %>\:host
-  display: block;
+  display: block
 <% }} %>
diff --git a/packages/angular/src/generators/library/files/base/README.md__tpl__ b/packages/angular/src/generators/library/files/base/README.md__tpl__
index fe31a9859bca4..2c868e46e5fb6 100644
--- a/packages/angular/src/generators/library/files/base/README.md__tpl__
+++ b/packages/angular/src/generators/library/files/base/README.md__tpl__
@@ -1,9 +1,9 @@
 # <%= libName %>
 
 This library was generated with [Nx](https://nx.dev).
-<% if (unitTesting) { %>
+<%_ if (unitTesting) { _%>
 
 ## Running unit tests
 
 Run `nx test <%= libName %>` to execute the unit tests.
-<% } %>
+<%_ } _%>
\ No newline at end of file
diff --git a/packages/angular/src/generators/library/library.spec.ts b/packages/angular/src/generators/library/library.spec.ts
index e5f2def48f33f..b4e3f17b7e8c0 100644
--- a/packages/angular/src/generators/library/library.spec.ts
+++ b/packages/angular/src/generators/library/library.spec.ts
@@ -1218,7 +1218,9 @@ describe('lib', () => {
               ...nx.configs["flat/angular"],
               ...nx.configs["flat/angular-template"],
               {
-                  files: ["**/*.ts"],
+                  files: [
+                      "**/*.ts"
+                  ],
                   rules: {
                       "@angular-eslint/directive-selector": [
                           "error",
@@ -1239,7 +1241,9 @@ describe('lib', () => {
                   }
               },
               {
-                  files: ["**/*.html"],
+                  files: [
+                      "**/*.html"
+                  ],
                   // Override or add rules here
                   rules: {}
               }
diff --git a/packages/angular/src/generators/stories/__snapshots__/stories-app.spec.ts.snap b/packages/angular/src/generators/stories/__snapshots__/stories-app.spec.ts.snap
index fcc8f17b7a008..5b5de71b2be55 100644
--- a/packages/angular/src/generators/stories/__snapshots__/stories-app.spec.ts.snap
+++ b/packages/angular/src/generators/stories/__snapshots__/stories-app.spec.ts.snap
@@ -3,11 +3,9 @@
 exports[`angularStories generator: applications should generate stories file for inline scam component 1`] = `
 "import type { Meta, StoryObj } from '@storybook/angular';
 import { MyScamComponent } from './my-scam.component';
-
 import { within } from '@storybook/testing-library';
 import { expect } from '@storybook/jest';
 
-
 const meta: Meta<MyScamComponent> = {
   component: MyScamComponent,
   title: 'MyScamComponent',
@@ -20,7 +18,6 @@ export const Primary: Story = {
   },
 };
 
-
 export const Heading: Story = {
   args: {
   },
@@ -35,7 +32,6 @@ export const Heading: Story = {
 exports[`angularStories generator: applications should generate stories file with interaction tests 1`] = `
 "import type { Meta, StoryObj } from '@storybook/angular';
 import { AppComponent } from './app.component';
-
 import { within } from '@storybook/testing-library';
 import { expect } from '@storybook/jest';
 
@@ -63,11 +59,9 @@ export const Heading: Story = {
 exports[`angularStories generator: applications should ignore a path that has a nested component, but still generate nested component stories 1`] = `
 "import type { Meta, StoryObj } from '@storybook/angular';
 import { ComponentBComponent } from './component-b.component';
-
 import { within } from '@storybook/testing-library';
 import { expect } from '@storybook/jest';
 
-
 const meta: Meta<ComponentBComponent> = {
   component: ComponentBComponent,
   title: 'ComponentBComponent',
@@ -80,7 +74,6 @@ export const Primary: Story = {
   },
 };
 
-
 export const Heading: Story = {
   args: {
   },
@@ -95,11 +88,9 @@ export const Heading: Story = {
 exports[`angularStories generator: applications should ignore a path when using a routing module 1`] = `
 "import type { Meta, StoryObj } from '@storybook/angular';
 import { ComponentComponent } from './component.component';
-
 import { within } from '@storybook/testing-library';
 import { expect } from '@storybook/jest';
 
-
 const meta: Meta<ComponentComponent> = {
   component: ComponentComponent,
   title: 'ComponentComponent',
@@ -112,7 +103,6 @@ export const Primary: Story = {
   },
 };
 
-
 export const Heading: Story = {
   args: {
   },
diff --git a/packages/angular/src/generators/stories/__snapshots__/stories-lib.spec.ts.snap b/packages/angular/src/generators/stories/__snapshots__/stories-lib.spec.ts.snap
index b7ffda42877fd..72842c417c3e3 100644
--- a/packages/angular/src/generators/stories/__snapshots__/stories-lib.spec.ts.snap
+++ b/packages/angular/src/generators/stories/__snapshots__/stories-lib.spec.ts.snap
@@ -3,7 +3,6 @@
 exports[`angularStories generator: libraries Stories for non-empty Angular library should generate stories file for standalone components 1`] = `
 "import type { Meta, StoryObj } from '@storybook/angular';
 import { StandaloneComponent } from './standalone.component';
-
 import { within } from '@storybook/testing-library';
 import { expect } from '@storybook/jest';
 
@@ -31,7 +30,6 @@ export const Heading: Story = {
 exports[`angularStories generator: libraries Stories for non-empty Angular library should generate stories file for standalone components 2`] = `
 "import type { Meta, StoryObj } from '@storybook/angular';
 import { SecondaryStandaloneComponent } from './secondary-standalone.component';
-
 import { within } from '@storybook/testing-library';
 import { expect } from '@storybook/jest';
 
@@ -59,7 +57,6 @@ export const Heading: Story = {
 exports[`angularStories generator: libraries Stories for non-empty Angular library should generate stories.ts files 1`] = `
 "import type { Meta, StoryObj } from '@storybook/angular';
 import { TestButtonComponent } from './test-button.component';
-
 import { within } from '@storybook/testing-library';
 import { expect } from '@storybook/jest';
 
@@ -97,11 +94,9 @@ export const Heading: Story = {
 exports[`angularStories generator: libraries Stories for non-empty Angular library should ignore paths 1`] = `
 "import type { Meta, StoryObj } from '@storybook/angular';
 import { TestButtonComponent } from './test-button.component';
-
 import { within } from '@storybook/testing-library';
 import { expect } from '@storybook/jest';
 
-
 const meta: Meta<TestButtonComponent> = {
   component: TestButtonComponent,
   title: 'TestButtonComponent',
@@ -118,7 +113,6 @@ export const Primary: Story = {
   },
 };
 
-
 export const Heading: Story = {
   args: {
     buttonType: 'button',
diff --git a/packages/angular/src/generators/storybook-configuration/__snapshots__/storybook-configuration.spec.ts.snap b/packages/angular/src/generators/storybook-configuration/__snapshots__/storybook-configuration.spec.ts.snap
index da7b19f3d1ba4..0c718a36b087f 100644
--- a/packages/angular/src/generators/storybook-configuration/__snapshots__/storybook-configuration.spec.ts.snap
+++ b/packages/angular/src/generators/storybook-configuration/__snapshots__/storybook-configuration.spec.ts.snap
@@ -33,7 +33,6 @@ export default config;
 exports[`StorybookConfiguration generator should configure storybook with interaction tests and install dependencies 1`] = `
 "import type { Meta, StoryObj } from '@storybook/angular';
 import { TestButtonComponent } from './test-button.component';
-
 import { within } from '@storybook/testing-library';
 import { expect } from '@storybook/jest';
 
@@ -71,7 +70,6 @@ export const Heading: Story = {
 exports[`StorybookConfiguration generator should configure storybook with interaction tests and install dependencies 2`] = `
 "import type { Meta, StoryObj } from '@storybook/angular';
 import { TestOtherComponent } from './test-other.component';
-
 import { within } from '@storybook/testing-library';
 import { expect } from '@storybook/jest';
 
diff --git a/packages/angular/src/generators/utils/add-jest.ts b/packages/angular/src/generators/utils/add-jest.ts
index 68eb5b219b202..b9fe5e713083c 100644
--- a/packages/angular/src/generators/utils/add-jest.ts
+++ b/packages/angular/src/generators/utils/add-jest.ts
@@ -55,10 +55,10 @@ export async function addJest(
       setupFile,
       `// @ts-expect-error https://thymikee.github.io/jest-preset-angular/docs/getting-started/test-environment
 globalThis.ngJest = {
-testEnvironmentOptions: {
-  errorOnUnknownElements: true,
-  errorOnUnknownProperties: true,
-},
+  testEnvironmentOptions: {
+    errorOnUnknownElements: true,
+    errorOnUnknownProperties: true,
+  },
 };
 ${contents}`
     );
diff --git a/packages/cypress/src/generators/base-setup/files/common/__directory__/tsconfig.json__ext__ b/packages/cypress/src/generators/base-setup/files/common/__directory__/tsconfig.json__ext__
index eb50c8dd4140a..ff84d2055f45b 100644
--- a/packages/cypress/src/generators/base-setup/files/common/__directory__/tsconfig.json__ext__
+++ b/packages/cypress/src/generators/base-setup/files/common/__directory__/tsconfig.json__ext__
@@ -12,9 +12,9 @@
     "**/*.js",
     "<%= offsetFromProjectRoot %>cypress.config.ts",
     "<%= offsetFromProjectRoot %>**/*.cy.ts",
-    <% if (jsx) { %> "<%= offsetFromProjectRoot %>**/*.cy.tsx",<% } %>
+    <%_ if (jsx) { _%> "<%= offsetFromProjectRoot %>**/*.cy.tsx",<%_ } _%>
     "<%= offsetFromProjectRoot %>**/*.cy.js",
-    <% if (jsx) { %>"<%= offsetFromProjectRoot %>**/*.cy.jsx",<% } %>
+    <%_ if (jsx) { _%>"<%= offsetFromProjectRoot %>**/*.cy.jsx",<%_ } _%>
     "<%= offsetFromProjectRoot %>**/*.d.ts"
   ]
 }
diff --git a/packages/eslint/src/generators/convert-to-flat-config/__snapshots__/generator.spec.ts.snap b/packages/eslint/src/generators/convert-to-flat-config/__snapshots__/generator.spec.ts.snap
index 43b7476d1018c..9a5d471e3e830 100644
--- a/packages/eslint/src/generators/convert-to-flat-config/__snapshots__/generator.spec.ts.snap
+++ b/packages/eslint/src/generators/convert-to-flat-config/__snapshots__/generator.spec.ts.snap
@@ -32,20 +32,28 @@ module.exports = [
       ],
     },
   },
-  ...compat.config({ extends: ['plugin:@nx/typescript'] }).map((config) => ({
-    ...config,
-    files: ['**/*.ts', '**/*.tsx'],
-    rules: {
-      ...config.rules,
-    },
-  })),
-  ...compat.config({ extends: ['plugin:@nx/javascript'] }).map((config) => ({
-    ...config,
-    files: ['**/*.js', '**/*.jsx'],
-    rules: {
-      ...config.rules,
-    },
-  })),
+  ...compat
+    .config({
+      extends: ['plugin:@nx/typescript'],
+    })
+    .map((config) => ({
+      ...config,
+      files: ['**/*.ts', '**/*.tsx'],
+      rules: {
+        ...config.rules,
+      },
+    })),
+  ...compat
+    .config({
+      extends: ['plugin:@nx/javascript'],
+    })
+    .map((config) => ({
+      ...config,
+      files: ['**/*.js', '**/*.jsx'],
+      rules: {
+        ...config.rules,
+      },
+    })),
 ];
 "
 `;
@@ -86,20 +94,28 @@ module.exports = [
       ],
     },
   },
-  ...compat.config({ extends: ['plugin:@nx/typescript'] }).map((config) => ({
-    ...config,
-    files: ['**/*.ts', '**/*.tsx'],
-    rules: {
-      ...config.rules,
-    },
-  })),
-  ...compat.config({ extends: ['plugin:@nx/javascript'] }).map((config) => ({
-    ...config,
-    files: ['**/*.js', '**/*.jsx'],
-    rules: {
-      ...config.rules,
-    },
-  })),
+  ...compat
+    .config({
+      extends: ['plugin:@nx/typescript'],
+    })
+    .map((config) => ({
+      ...config,
+      files: ['**/*.ts', '**/*.tsx'],
+      rules: {
+        ...config.rules,
+      },
+    })),
+  ...compat
+    .config({
+      extends: ['plugin:@nx/javascript'],
+    })
+    .map((config) => ({
+      ...config,
+      files: ['**/*.js', '**/*.jsx'],
+      rules: {
+        ...config.rules,
+      },
+    })),
 ];
 "
 `;
@@ -135,20 +151,28 @@ module.exports = [
       ],
     },
   },
-  ...compat.config({ extends: ['plugin:@nx/typescript'] }).map((config) => ({
-    ...config,
-    files: ['**/*.ts', '**/*.tsx'],
-    rules: {
-      ...config.rules,
-    },
-  })),
-  ...compat.config({ extends: ['plugin:@nx/javascript'] }).map((config) => ({
-    ...config,
-    files: ['**/*.js', '**/*.jsx'],
-    rules: {
-      ...config.rules,
-    },
-  })),
+  ...compat
+    .config({
+      extends: ['plugin:@nx/typescript'],
+    })
+    .map((config) => ({
+      ...config,
+      files: ['**/*.ts', '**/*.tsx'],
+      rules: {
+        ...config.rules,
+      },
+    })),
+  ...compat
+    .config({
+      extends: ['plugin:@nx/javascript'],
+    })
+    .map((config) => ({
+      ...config,
+      files: ['**/*.js', '**/*.jsx'],
+      rules: {
+        ...config.rules,
+      },
+    })),
 ];
 "
 `;
@@ -183,21 +207,31 @@ module.exports = [
       ],
     },
   },
-  ...compat.config({ extends: ['plugin:@nx/typescript'] }).map((config) => ({
-    ...config,
-    files: ['**/*.ts', '**/*.tsx'],
-    rules: {
-      ...config.rules,
-    },
-  })),
-  ...compat.config({ extends: ['plugin:@nx/javascript'] }).map((config) => ({
-    ...config,
-    files: ['**/*.js', '**/*.jsx'],
-    rules: {
-      ...config.rules,
-    },
-  })),
-  { ignores: ['ignore/me'] },
+  ...compat
+    .config({
+      extends: ['plugin:@nx/typescript'],
+    })
+    .map((config) => ({
+      ...config,
+      files: ['**/*.ts', '**/*.tsx'],
+      rules: {
+        ...config.rules,
+      },
+    })),
+  ...compat
+    .config({
+      extends: ['plugin:@nx/javascript'],
+    })
+    .map((config) => ({
+      ...config,
+      files: ['**/*.js', '**/*.jsx'],
+      rules: {
+        ...config.rules,
+      },
+    })),
+  {
+    ignores: ['ignore/me'],
+  },
 ];
 "
 `;
@@ -234,20 +268,28 @@ module.exports = [
       ],
     },
   },
-  ...compat.config({ extends: ['plugin:@nx/typescript'] }).map((config) => ({
-    ...config,
-    files: ['**/*.ts', '**/*.tsx'],
-    rules: {
-      ...config.rules,
-    },
-  })),
-  ...compat.config({ extends: ['plugin:@nx/javascript'] }).map((config) => ({
-    ...config,
-    files: ['**/*.js', '**/*.jsx'],
-    rules: {
-      ...config.rules,
-    },
-  })),
+  ...compat
+    .config({
+      extends: ['plugin:@nx/typescript'],
+    })
+    .map((config) => ({
+      ...config,
+      files: ['**/*.ts', '**/*.tsx'],
+      rules: {
+        ...config.rules,
+      },
+    })),
+  ...compat
+    .config({
+      extends: ['plugin:@nx/javascript'],
+    })
+    .map((config) => ({
+      ...config,
+      files: ['**/*.js', '**/*.jsx'],
+      rules: {
+        ...config.rules,
+      },
+    })),
 ];
 "
 `;
@@ -292,20 +334,28 @@ module.exports = [
       ],
     },
   },
-  ...compat.config({ extends: ['plugin:@nx/typescript'] }).map((config) => ({
-    ...config,
-    files: ['**/*.ts', '**/*.tsx'],
-    rules: {
-      ...config.rules,
-    },
-  })),
-  ...compat.config({ extends: ['plugin:@nx/javascript'] }).map((config) => ({
-    ...config,
-    files: ['**/*.js', '**/*.jsx'],
-    rules: {
-      ...config.rules,
-    },
-  })),
+  ...compat
+    .config({
+      extends: ['plugin:@nx/typescript'],
+    })
+    .map((config) => ({
+      ...config,
+      files: ['**/*.ts', '**/*.tsx'],
+      rules: {
+        ...config.rules,
+      },
+    })),
+  ...compat
+    .config({
+      extends: ['plugin:@nx/javascript'],
+    })
+    .map((config) => ({
+      ...config,
+      files: ['**/*.js', '**/*.jsx'],
+      rules: {
+        ...config.rules,
+      },
+    })),
 ];
 "
 `;
@@ -322,7 +372,11 @@ const compat = new FlatCompat({
 
 module.exports = [
   { plugins: { '@nx': nxEslintPlugin } },
-  { settings: { sharedData: 'Hello' } },
+  {
+    settings: {
+      sharedData: 'Hello',
+    },
+  },
   {
     files: ['**/*.ts', '**/*.tsx', '**/*.js', '**/*.jsx'],
     rules: {
@@ -341,20 +395,28 @@ module.exports = [
       ],
     },
   },
-  ...compat.config({ extends: ['plugin:@nx/typescript'] }).map((config) => ({
-    ...config,
-    files: ['**/*.ts', '**/*.tsx'],
-    rules: {
-      ...config.rules,
-    },
-  })),
-  ...compat.config({ extends: ['plugin:@nx/javascript'] }).map((config) => ({
-    ...config,
-    files: ['**/*.js', '**/*.jsx'],
-    rules: {
-      ...config.rules,
-    },
-  })),
+  ...compat
+    .config({
+      extends: ['plugin:@nx/typescript'],
+    })
+    .map((config) => ({
+      ...config,
+      files: ['**/*.ts', '**/*.tsx'],
+      rules: {
+        ...config.rules,
+      },
+    })),
+  ...compat
+    .config({
+      extends: ['plugin:@nx/javascript'],
+    })
+    .map((config) => ({
+      ...config,
+      files: ['**/*.js', '**/*.jsx'],
+      rules: {
+        ...config.rules,
+      },
+    })),
 ];
 "
 `;
@@ -389,20 +451,28 @@ module.exports = [
       ],
     },
   },
-  ...compat.config({ extends: ['plugin:@nx/typescript'] }).map((config) => ({
-    ...config,
-    files: ['**/*.ts', '**/*.tsx'],
-    rules: {
-      ...config.rules,
-    },
-  })),
-  ...compat.config({ extends: ['plugin:@nx/javascript'] }).map((config) => ({
-    ...config,
-    files: ['**/*.js', '**/*.jsx'],
-    rules: {
-      ...config.rules,
-    },
-  })),
+  ...compat
+    .config({
+      extends: ['plugin:@nx/typescript'],
+    })
+    .map((config) => ({
+      ...config,
+      files: ['**/*.ts', '**/*.tsx'],
+      rules: {
+        ...config.rules,
+      },
+    })),
+  ...compat
+    .config({
+      extends: ['plugin:@nx/javascript'],
+    })
+    .map((config) => ({
+      ...config,
+      files: ['**/*.js', '**/*.jsx'],
+      rules: {
+        ...config.rules,
+      },
+    })),
 ];
 "
 `;
@@ -461,20 +531,28 @@ module.exports = [
       ],
     },
   },
-  ...compat.config({ extends: ['plugin:@nx/typescript'] }).map((config) => ({
-    ...config,
-    files: ['**/*.ts', '**/*.tsx'],
-    rules: {
-      ...config.rules,
-    },
-  })),
-  ...compat.config({ extends: ['plugin:@nx/javascript'] }).map((config) => ({
-    ...config,
-    files: ['**/*.js', '**/*.jsx'],
-    rules: {
-      ...config.rules,
-    },
-  })),
+  ...compat
+    .config({
+      extends: ['plugin:@nx/typescript'],
+    })
+    .map((config) => ({
+      ...config,
+      files: ['**/*.ts', '**/*.tsx'],
+      rules: {
+        ...config.rules,
+      },
+    })),
+  ...compat
+    .config({
+      extends: ['plugin:@nx/javascript'],
+    })
+    .map((config) => ({
+      ...config,
+      files: ['**/*.js', '**/*.jsx'],
+      rules: {
+        ...config.rules,
+      },
+    })),
 ];
 "
 `;
@@ -533,20 +611,28 @@ module.exports = [
       ],
     },
   },
-  ...compat.config({ extends: ['plugin:@nx/typescript'] }).map((config) => ({
-    ...config,
-    files: ['**/*.ts', '**/*.tsx'],
-    rules: {
-      ...config.rules,
-    },
-  })),
-  ...compat.config({ extends: ['plugin:@nx/javascript'] }).map((config) => ({
-    ...config,
-    files: ['**/*.js', '**/*.jsx'],
-    rules: {
-      ...config.rules,
-    },
-  })),
+  ...compat
+    .config({
+      extends: ['plugin:@nx/typescript'],
+    })
+    .map((config) => ({
+      ...config,
+      files: ['**/*.ts', '**/*.tsx'],
+      rules: {
+        ...config.rules,
+      },
+    })),
+  ...compat
+    .config({
+      extends: ['plugin:@nx/javascript'],
+    })
+    .map((config) => ({
+      ...config,
+      files: ['**/*.js', '**/*.jsx'],
+      rules: {
+        ...config.rules,
+      },
+    })),
 ];
 "
 `;
@@ -595,8 +681,12 @@ module.exports = [
     // Override or add rules here
     rules: {},
   },
-  { ignores: ['ignore/me'] },
-  { ignores: ['ignore/me/as/well'] },
+  {
+    ignores: ['ignore/me'],
+  },
+  {
+    ignores: ['ignore/me/as/well'],
+  },
 ];
 "
 `;
diff --git a/packages/eslint/src/generators/convert-to-flat-config/converters/json-converter.spec.ts b/packages/eslint/src/generators/convert-to-flat-config/converters/json-converter.spec.ts
index 26e2935cfdaac..5e976f5294849 100644
--- a/packages/eslint/src/generators/convert-to-flat-config/converters/json-converter.spec.ts
+++ b/packages/eslint/src/generators/convert-to-flat-config/converters/json-converter.spec.ts
@@ -84,19 +84,29 @@ describe('convertEslintJsonToFlatConfig', () => {
                   "**/*.js",
                   "**/*.jsx"
               ],
-              rules: { "@nx/enforce-module-boundaries": [
+              rules: {
+                  "@nx/enforce-module-boundaries": [
                       "error",
                       {
                           enforceBuildableLibDependency: true,
                           allow: [],
-                          depConstraints: [{
+                          depConstraints: [
+                              {
                                   sourceTag: "*",
-                                  onlyDependOnLibsWithTags: ["*"]
-                              }]
+                                  onlyDependOnLibsWithTags: [
+                                      "*"
+                                  ]
+                              }
+                          ]
                       }
-                  ] }
+                  ]
+              }
           },
-          ...compat.config({ extends: ["plugin:@nx/typescript"] }).map(config => ({
+          ...compat.config({
+              extends: [
+                  "plugin:@nx/typescript"
+              ]
+          }).map(config => ({
               ...config,
               files: [
                   "**/*.ts",
@@ -106,7 +116,11 @@ describe('convertEslintJsonToFlatConfig', () => {
                   ...config.rules
               }
           })),
-          ...compat.config({ env: { jest: true } }).map(config => ({
+          ...compat.config({
+              env: {
+                  jest: true
+              }
+          }).map(config => ({
               ...config,
               files: [
                   "**/*.spec.ts",
@@ -118,8 +132,16 @@ describe('convertEslintJsonToFlatConfig', () => {
                   ...config.rules
               }
           })),
-          { ignores: ["src/ignore/to/keep.ts"] },
-          { ignores: ["something/else"] }
+          {
+              ignores: [
+                  "src/ignore/to/keep.ts"
+              ]
+          },
+          {
+              ignores: [
+                  "something/else"
+              ]
+          }
       ];
       "
     `);
@@ -195,7 +217,11 @@ describe('convertEslintJsonToFlatConfig', () => {
           ...baseConfig,
           ...compat.extends("plugin:@nx/react-typescript", "next", "next/core-web-vitals"),
           { languageOptions: { globals: { ...globals.jest } } },
-          { rules: { "@next/next/no-html-link-for-pages": "off" } },
+          {
+              rules: {
+                  "@next/next/no-html-link-for-pages": "off"
+              }
+          },
           {
               files: [
                   "**/*.ts",
@@ -203,10 +229,12 @@ describe('convertEslintJsonToFlatConfig', () => {
                   "**/*.js",
                   "**/*.jsx"
               ],
-              rules: { "@next/next/no-html-link-for-pages": [
+              rules: {
+                  "@next/next/no-html-link-for-pages": [
                       "error",
                       "apps/test-next/pages"
-                  ] }
+                  ]
+              }
           },
           {
               files: [
@@ -225,12 +253,26 @@ describe('convertEslintJsonToFlatConfig', () => {
               rules: {}
           },
           {
-              files: ["**/*.json"],
-              rules: { "@nx/dependency-checks": "error" },
-              languageOptions: { parser: require("jsonc-eslint-parser") }
+              files: [
+                  "**/*.json"
+              ],
+              rules: {
+                  "@nx/dependency-checks": "error"
+              },
+              languageOptions: {
+                  parser: require("jsonc-eslint-parser")
+              }
+          },
+          {
+              ignores: [
+                  ".next/**/*"
+              ]
           },
-          { ignores: [".next/**/*"] },
-          { ignores: ["something/else"] }
+          {
+              ignores: [
+                  "something/else"
+              ]
+          }
       ];
       "
     `);
diff --git a/packages/eslint/src/generators/convert-to-flat-config/generator.spec.ts b/packages/eslint/src/generators/convert-to-flat-config/generator.spec.ts
index 988dfd588b04d..45a1ed54543d9 100644
--- a/packages/eslint/src/generators/convert-to-flat-config/generator.spec.ts
+++ b/packages/eslint/src/generators/convert-to-flat-config/generator.spec.ts
@@ -176,20 +176,28 @@ describe('convert-to-flat-config generator', () => {
             ],
           },
         },
-        ...compat.config({ extends: ['plugin:@nx/typescript'] }).map((config) => ({
-          ...config,
-          files: ['**/*.ts', '**/*.tsx'],
-          rules: {
-            ...config.rules,
-          },
-        })),
-        ...compat.config({ extends: ['plugin:@nx/javascript'] }).map((config) => ({
-          ...config,
-          files: ['**/*.js', '**/*.jsx'],
-          rules: {
-            ...config.rules,
-          },
-        })),
+        ...compat
+          .config({
+            extends: ['plugin:@nx/typescript'],
+          })
+          .map((config) => ({
+            ...config,
+            files: ['**/*.ts', '**/*.tsx'],
+            rules: {
+              ...config.rules,
+            },
+          })),
+        ...compat
+          .config({
+            extends: ['plugin:@nx/javascript'],
+          })
+          .map((config) => ({
+            ...config,
+            files: ['**/*.js', '**/*.jsx'],
+            rules: {
+              ...config.rules,
+            },
+          })),
       ];
       "
     `);
@@ -428,20 +436,28 @@ describe('convert-to-flat-config generator', () => {
             ],
           },
         },
-        ...compat.config({ extends: ['plugin:@nx/typescript'] }).map((config) => ({
-          ...config,
-          files: ['**/*.ts', '**/*.tsx'],
-          rules: {
-            ...config.rules,
-          },
-        })),
-        ...compat.config({ extends: ['plugin:@nx/javascript'] }).map((config) => ({
-          ...config,
-          files: ['**/*.js', '**/*.jsx'],
-          rules: {
-            ...config.rules,
-          },
-        })),
+        ...compat
+          .config({
+            extends: ['plugin:@nx/typescript'],
+          })
+          .map((config) => ({
+            ...config,
+            files: ['**/*.ts', '**/*.tsx'],
+            rules: {
+              ...config.rules,
+            },
+          })),
+        ...compat
+          .config({
+            extends: ['plugin:@nx/javascript'],
+          })
+          .map((config) => ({
+            ...config,
+            files: ['**/*.js', '**/*.jsx'],
+            rules: {
+              ...config.rules,
+            },
+          })),
       ];
       "
     `);
@@ -560,7 +576,9 @@ describe('convert-to-flat-config generator', () => {
           // Override or add rules here
           rules: {},
           languageOptions: {
-            parserOptions: { project: ['apps/dx-assets-ui/tsconfig.*?.json'] },
+            parserOptions: {
+              project: ['apps/dx-assets-ui/tsconfig.*?.json'],
+            },
           },
         },
         {
@@ -573,7 +591,9 @@ describe('convert-to-flat-config generator', () => {
           // Override or add rules here
           rules: {},
         },
-        { ignores: ['__fixtures__/**/*'] },
+        {
+          ignores: ['__fixtures__/**/*'],
+        },
       ];
       "
     `);
diff --git a/packages/eslint/src/generators/lint-project/lint-project.spec.ts b/packages/eslint/src/generators/lint-project/lint-project.spec.ts
index 118e09e566f65..3fa984d3ccb49 100644
--- a/packages/eslint/src/generators/lint-project/lint-project.spec.ts
+++ b/packages/eslint/src/generators/lint-project/lint-project.spec.ts
@@ -61,7 +61,9 @@ describe('@nx/eslint:lint-project', () => {
           ...nx.configs["flat/typescript"],
           ...nx.configs["flat/javascript"],
           {
-              ignores: ["**/dist"]
+              ignores: [
+                  "**/dist"
+              ]
           },
           {
               files: [
@@ -70,17 +72,25 @@ describe('@nx/eslint:lint-project', () => {
                   "**/*.js",
                   "**/*.jsx"
               ],
-              rules: { "@nx/enforce-module-boundaries": [
+              rules: {
+                  "@nx/enforce-module-boundaries": [
                       "error",
                       {
                           enforceBuildableLibDependency: true,
-                          allow: ["^.*/eslint(\\\\.base)?\\\\.config\\\\.[cm]?js$"],
-                          depConstraints: [{
+                          allow: [
+                              "^.*/eslint(\\\\.base)?\\\\.config\\\\.[cm]?js$"
+                          ],
+                          depConstraints: [
+                              {
                                   sourceTag: "*",
-                                  onlyDependOnLibsWithTags: ["*"]
-                              }]
+                                  onlyDependOnLibsWithTags: [
+                                      "*"
+                                  ]
+                              }
+                          ]
                       }
-                  ] }
+                  ]
+              }
           },
           {
               files: [
diff --git a/packages/eslint/src/generators/utils/eslint-file.spec.ts b/packages/eslint/src/generators/utils/eslint-file.spec.ts
index 96929ac2f53b9..619128da6753e 100644
--- a/packages/eslint/src/generators/utils/eslint-file.spec.ts
+++ b/packages/eslint/src/generators/utils/eslint-file.spec.ts
@@ -441,12 +441,16 @@ module.exports = [
 
         module.exports = [
           ...baseConfig,
-            ...compat.config({ extends: [
+            ...compat.config({
+                extends: [
                     "plugin:@nx/angular",
                     "plugin:@angular-eslint/template/process-inline-templates"
-                ] }).map(config => ({
+                ]
+            }).map(config => ({
                 ...config,
-                files: ["**/*.ts"],
+                files: [
+                    "**/*.ts"
+                ],
                 rules: {
                     ...config.rules,
                     "@angular-eslint/directive-selector": [
@@ -467,9 +471,15 @@ module.exports = [
                     ]
                 }
             })),
-            ...compat.config({ extends: ["plugin:@nx/angular-template"] }).map(config => ({
+            ...compat.config({
+                extends: [
+                    "plugin:@nx/angular-template"
+                ]
+            }).map(config => ({
                 ...config,
-                files: ["**/*.html"],
+                files: [
+                    "**/*.html"
+                ],
                 rules: {
                     ...config.rules
                 }
diff --git a/packages/eslint/src/generators/utils/flat-config/ast-utils.spec.ts b/packages/eslint/src/generators/utils/flat-config/ast-utils.spec.ts
index cac8fe56a7c80..3d17c64a3a8c5 100644
--- a/packages/eslint/src/generators/utils/flat-config/ast-utils.spec.ts
+++ b/packages/eslint/src/generators/utils/flat-config/ast-utils.spec.ts
@@ -59,10 +59,14 @@ describe('ast-utils', () => {
                 b: "off",
                 c: [
                     "error",
-                    { some: { rich: [
+                    {
+                        some: {
+                            rich: [
                                 "config",
                                 "options"
-                            ] } }
+                            ]
+                        }
+                    }
                 ]
             }
         }"
@@ -73,7 +77,13 @@ describe('ast-utils', () => {
         getOutput({
           files: '*.ts', //  old single * syntax should be replaced by **/*
         })
-      ).toMatchInlineSnapshot(`"{ files: ["**/*.ts"] }"`);
+      ).toMatchInlineSnapshot(`
+        "{
+            files: [
+                "**/*.ts"
+            ]
+        }"
+      `);
 
       expect(
         getOutput({
@@ -82,7 +92,9 @@ describe('ast-utils', () => {
         })
       ).toMatchInlineSnapshot(`
         "{
-            languageOptions: { parser: require("jsonc-eslint-parser") }
+            languageOptions: {
+                parser: require("jsonc-eslint-parser")
+            }
         }"
       `);
 
@@ -95,14 +107,22 @@ describe('ast-utils', () => {
         })
       ).toMatchInlineSnapshot(`
         "{
-            languageOptions: { parserOptions: { foo: "bar" } }
+            languageOptions: {
+                parserOptions: {
+                    foo: "bar"
+                }
+            }
         }"
       `);
 
       // It should add the compat tooling for extends, and spread the rules object to allow for easier editing by users
       expect(getOutput({ extends: ['plugin:@nx/typescript'] }))
         .toMatchInlineSnapshot(`
-        "...compat.config({ extends: ["plugin:@nx/typescript"] }).map(config => ({
+        "...compat.config({
+            extends: [
+                "plugin:@nx/typescript"
+            ]
+        }).map(config => ({
             ...config,
             rules: {
                 ...config.rules
@@ -113,7 +133,11 @@ describe('ast-utils', () => {
       // It should add the compat tooling for plugins, and spread the rules object to allow for easier editing by users
       expect(getOutput({ plugins: ['@nx/eslint-plugin'] }))
         .toMatchInlineSnapshot(`
-        "...compat.config({ plugins: ["@nx/eslint-plugin"] }).map(config => ({
+        "...compat.config({
+            plugins: [
+                "@nx/eslint-plugin"
+            ]
+        }).map(config => ({
             ...config,
             rules: {
                 ...config.rules
@@ -123,7 +147,11 @@ describe('ast-utils', () => {
 
       // It should add the compat tooling for env, and spread the rules object to allow for easier editing by users
       expect(getOutput({ env: { jest: true } })).toMatchInlineSnapshot(`
-        "...compat.config({ env: { jest: true } }).map(config => ({
+        "...compat.config({
+            env: {
+                jest: true
+            }
+        }).map(config => ({
             ...config,
             rules: {
                 ...config.rules
@@ -134,7 +162,11 @@ describe('ast-utils', () => {
       // Files for the compat tooling should be added appropriately
       expect(getOutput({ env: { jest: true }, files: ['*.ts', '*.tsx'] }))
         .toMatchInlineSnapshot(`
-        "...compat.config({ env: { jest: true } }).map(config => ({
+        "...compat.config({
+            env: {
+                jest: true
+            }
+        }).map(config => ({
             ...config,
             files: [
                 "**/*.ts",
@@ -184,8 +216,12 @@ describe('ast-utils', () => {
                 },
                 { ignores: ["my-lib/.cache/**/*"] },
             {
-                files: ["**/*.svg"],
-                rules: { "@nx/do-something-with-svg": "error" }
+                files: [
+                    "**/*.svg"
+                ],
+                rules: {
+                    "@nx/do-something-with-svg": "error"
+                }
             },
             ];"
       `);
diff --git a/packages/eslint/src/generators/utils/flat-config/ast-utils.ts b/packages/eslint/src/generators/utils/flat-config/ast-utils.ts
index 351488ffb1b4e..c86ceefc8d9ff 100644
--- a/packages/eslint/src/generators/utils/flat-config/ast-utils.ts
+++ b/packages/eslint/src/generators/utils/flat-config/ast-utils.ts
@@ -1140,7 +1140,7 @@ export function generateAst<T>(
       input.map((item) =>
         generateAst<ts.Expression>(item, propertyAssignmentReplacer)
       ),
-      input.length > 1 // multiline only if more than one item
+      true // Always treat as multiline, using item.length does not work in all cases
     ) as T;
   }
   if (input === null) {
@@ -1152,7 +1152,7 @@ export function generateAst<T>(
         input,
         propertyAssignmentReplacer
       ),
-      Object.keys(input).length > 1 // multiline only if more than one property
+      true // Always treat as multiline, using  Object.keys(input).length > 1 does not work in all cases
     ) as T;
   }
   if (typeof input === 'string') {
diff --git a/packages/nest/src/generators/application/files/app/app.controller.spec.ts__tmpl__ b/packages/nest/src/generators/application/files/app/app.controller.spec.ts__tmpl__
index 47879864a9773..dfd987f75efdf 100644
--- a/packages/nest/src/generators/application/files/app/app.controller.spec.ts__tmpl__
+++ b/packages/nest/src/generators/application/files/app/app.controller.spec.ts__tmpl__
@@ -1,5 +1,4 @@
 import { Test, TestingModule } from '@nestjs/testing';
-
 import { AppController } from './app.controller';
 import { AppService } from './app.service';
 
diff --git a/packages/nest/src/generators/application/files/app/app.controller.ts__tmpl__ b/packages/nest/src/generators/application/files/app/app.controller.ts__tmpl__
index dff210a841eb3..aa4a3dd680324 100644
--- a/packages/nest/src/generators/application/files/app/app.controller.ts__tmpl__
+++ b/packages/nest/src/generators/application/files/app/app.controller.ts__tmpl__
@@ -1,5 +1,4 @@
 import { Controller, Get } from '@nestjs/common';
-
 import { AppService } from './app.service';
 
 @Controller()
diff --git a/packages/nest/src/generators/application/files/app/app.module.ts__tmpl__ b/packages/nest/src/generators/application/files/app/app.module.ts__tmpl__
index 6a9bc166d3509..86628031ca2a1 100644
--- a/packages/nest/src/generators/application/files/app/app.module.ts__tmpl__
+++ b/packages/nest/src/generators/application/files/app/app.module.ts__tmpl__
@@ -1,5 +1,4 @@
 import { Module } from '@nestjs/common';
-
 import { AppController } from './app.controller';
 import { AppService } from './app.service';
 
diff --git a/packages/nest/src/generators/application/files/app/app.service.spec.ts__tmpl__ b/packages/nest/src/generators/application/files/app/app.service.spec.ts__tmpl__
index 986bbb40c61a5..709b42135c709 100644
--- a/packages/nest/src/generators/application/files/app/app.service.spec.ts__tmpl__
+++ b/packages/nest/src/generators/application/files/app/app.service.spec.ts__tmpl__
@@ -1,5 +1,4 @@
 import { Test } from '@nestjs/testing';
-
 import { AppService } from './app.service';
 
 describe('AppService', () => {
diff --git a/packages/nest/src/generators/application/files/main.ts__tmpl__ b/packages/nest/src/generators/application/files/main.ts__tmpl__
index 3f86b8fa31530..bf88f16703882 100644
--- a/packages/nest/src/generators/application/files/main.ts__tmpl__
+++ b/packages/nest/src/generators/application/files/main.ts__tmpl__
@@ -5,7 +5,6 @@
 
 import { Logger } from '@nestjs/common';
 import { NestFactory } from '@nestjs/core';
-
 import { AppModule } from './app/app.module';
 
 async function bootstrap() {
diff --git a/packages/next/src/generators/application/application.spec.ts b/packages/next/src/generators/application/application.spec.ts
index b1e071b48a16e..5e42781d53c54 100644
--- a/packages/next/src/generators/application/application.spec.ts
+++ b/packages/next/src/generators/application/application.spec.ts
@@ -604,7 +604,9 @@ describe('app', () => {
 
             ...baseConfig,
             ...nx.configs['flat/react-typescript'],
-            { ignores: ['.next/**/*'] },
+            {
+              ignores: ['.next/**/*'],
+            },
           ];
           "
         `);
diff --git a/packages/next/src/generators/application/lib/add-linting.spec.ts b/packages/next/src/generators/application/lib/add-linting.spec.ts
index cba4e0f3d2099..37782d4096eaa 100644
--- a/packages/next/src/generators/application/lib/add-linting.spec.ts
+++ b/packages/next/src/generators/application/lib/add-linting.spec.ts
@@ -117,7 +117,11 @@ describe('updateEslint', () => {
 
           ...baseConfig,
           ...nx.configs["flat/react-typescript"],
-          { ignores: [".next/**/*"] }
+          {
+              ignores: [
+                  ".next/**/*"
+              ]
+          }
       ];
       "
     `);
diff --git a/packages/node/src/generators/application/files/common/webpack.config.js__tmpl__ b/packages/node/src/generators/application/files/common/webpack.config.js__tmpl__
index 052c7a86d19ee..77ab0d9c0528e 100644
--- a/packages/node/src/generators/application/files/common/webpack.config.js__tmpl__
+++ b/packages/node/src/generators/application/files/common/webpack.config.js__tmpl__
@@ -1,4 +1,4 @@
-<% if (webpackPluginOptions) { %>
+<%_ if (webpackPluginOptions) { _%>
 const { NxAppWebpackPlugin } = require('@nx/webpack/app-plugin');
 const { join } = require('path');
 
@@ -19,7 +19,7 @@ module.exports = {
     })
   ],
 };
-<% } else { %>
+<%_ } else { _%>
 const { composePlugins, withNx} = require('@nx/webpack');
 
 // Nx plugins for webpack.
@@ -33,4 +33,4 @@ module.exports = composePlugins(
     return config;
   }
 );
-<% } %>
+<%_ } _%>
diff --git a/packages/node/src/generators/e2e-project/files/server/common/src/support/test-setup.ts__tmpl__ b/packages/node/src/generators/e2e-project/files/server/common/src/support/test-setup.ts__tmpl__
index 79ff96994111f..7336dc61f291b 100644
--- a/packages/node/src/generators/e2e-project/files/server/common/src/support/test-setup.ts__tmpl__
+++ b/packages/node/src/generators/e2e-project/files/server/common/src/support/test-setup.ts__tmpl__
@@ -1,5 +1,4 @@
 /* eslint-disable */
-
 import axios from 'axios';
 
 module.exports = async function() {
diff --git a/packages/nuxt/src/generators/application/__snapshots__/application.spec.ts.snap b/packages/nuxt/src/generators/application/__snapshots__/application.spec.ts.snap
index 5c1aff4ee55f8..67c3d76774431 100644
--- a/packages/nuxt/src/generators/application/__snapshots__/application.spec.ts.snap
+++ b/packages/nuxt/src/generators/application/__snapshots__/application.spec.ts.snap
@@ -53,10 +53,14 @@ module.exports = [
   {
     files: ['**/*.vue'],
     languageOptions: {
-      parserOptions: { parser: require('@typescript-eslint/parser') },
+      parserOptions: {
+        parser: require('@typescript-eslint/parser'),
+      },
     },
   },
-  { ignores: ['.nuxt/**', '.output/**', 'node_modules'] },
+  {
+    ignores: ['.nuxt/**', '.output/**', 'node_modules'],
+  },
 ];
 "
 `;
@@ -83,7 +87,6 @@ export default defineNuxtConfig({
   imports: {
     autoImport: true,
   },
-
   vite: {
     plugins: [nxViteTsPaths()],
   },
@@ -261,9 +264,7 @@ export default defineNuxtConfig({
   imports: {
     autoImport: true,
   },
-
   css: ['~/assets/css/styles.css'],
-
   vite: {
     plugins: [nxViteTsPaths()],
   },
@@ -293,9 +294,7 @@ export default defineNuxtConfig({
   imports: {
     autoImport: true,
   },
-
   css: ['~/assets/css/styles.less'],
-
   vite: {
     plugins: [nxViteTsPaths()],
   },
@@ -325,9 +324,7 @@ export default defineNuxtConfig({
   imports: {
     autoImport: true,
   },
-
   css: ['~/assets/css/styles.scss'],
-
   vite: {
     plugins: [nxViteTsPaths()],
   },
@@ -357,7 +354,6 @@ export default defineNuxtConfig({
   imports: {
     autoImport: true,
   },
-
   vite: {
     plugins: [nxViteTsPaths()],
   },
@@ -418,10 +414,14 @@ module.exports = [
   {
     files: ['**/*.vue'],
     languageOptions: {
-      parserOptions: { parser: require('@typescript-eslint/parser') },
+      parserOptions: {
+        parser: require('@typescript-eslint/parser'),
+      },
     },
   },
-  { ignores: ['.nuxt/**', '.output/**', 'node_modules'] },
+  {
+    ignores: ['.nuxt/**', '.output/**', 'node_modules'],
+  },
 ];
 "
 `;
@@ -448,7 +448,6 @@ export default defineNuxtConfig({
   imports: {
     autoImport: true,
   },
-
   vite: {
     plugins: [nxViteTsPaths()],
   },
@@ -626,9 +625,7 @@ export default defineNuxtConfig({
   imports: {
     autoImport: true,
   },
-
   css: ['~/assets/css/styles.css'],
-
   vite: {
     plugins: [nxViteTsPaths()],
   },
@@ -658,9 +655,7 @@ export default defineNuxtConfig({
   imports: {
     autoImport: true,
   },
-
   css: ['~/assets/css/styles.less'],
-
   vite: {
     plugins: [nxViteTsPaths()],
   },
@@ -690,9 +685,7 @@ export default defineNuxtConfig({
   imports: {
     autoImport: true,
   },
-
   css: ['~/assets/css/styles.scss'],
-
   vite: {
     plugins: [nxViteTsPaths()],
   },
@@ -722,7 +715,6 @@ export default defineNuxtConfig({
   imports: {
     autoImport: true,
   },
-
   vite: {
     plugins: [nxViteTsPaths()],
   },
diff --git a/packages/nuxt/src/generators/application/files/base/nuxt.config.ts__tmpl__ b/packages/nuxt/src/generators/application/files/base/nuxt.config.ts__tmpl__
index eddfddcde0ee4..9e692b83a7100 100644
--- a/packages/nuxt/src/generators/application/files/base/nuxt.config.ts__tmpl__
+++ b/packages/nuxt/src/generators/application/files/base/nuxt.config.ts__tmpl__
@@ -19,9 +19,9 @@ export default defineNuxtConfig({
   imports: {
     autoImport: true,
   },
-  <% if (style !== 'none') { %>
+  <%_ if (style !== 'none') { _%>
   css: ['~/assets/css/styles.<%= style %>'],
-  <% } %>
+  <%_ } _%>
   vite: {
     plugins: [
       nxViteTsPaths()
diff --git a/packages/react/src/generators/application/__snapshots__/application.spec.ts.snap b/packages/react/src/generators/application/__snapshots__/application.spec.ts.snap
index fba1aec069996..f971b87d9db33 100644
--- a/packages/react/src/generators/application/__snapshots__/application.spec.ts.snap
+++ b/packages/react/src/generators/application/__snapshots__/application.spec.ts.snap
@@ -1,27 +1,20 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`app --minimal should create default application without Nx welcome component 1`] = `
-"
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
+"// eslint-disable-next-line @typescript-eslint/no-unused-vars
 import styles from './app.module.css';
 
-
-
 export function App() {
-
   return (
     <div>
-      
       <h1>
         <span> Hello there, </span>
         Welcome plain 👋
       </h1>
-     
-    </div>);
-
+    </div>
+  );
 }
 
-
 export default App;
 
  
@@ -36,16 +29,15 @@ if (import.meta.vitest) {
     render = (await import('@testing-library/react')).render;
   });
 
-  
-it('should render successfully', () => {
-  const { baseElement } = render(<App />);
-  expect(baseElement).toBeTruthy();
-});
+  it('should render successfully', () => {
+    const { baseElement } = render(<App />);
+    expect(baseElement).toBeTruthy();
+  });
 
-it('should have a greeting as the title', () => {
-  const { getByText } = render(<App />);
-  expect(getByText(/Welcome plain/gi)).toBeTruthy();
-});
+  it('should have a greeting as the title', () => {
+    const { getByText } = render(<App />);
+    expect(getByText(/Welcome plain/gi)).toBeTruthy();
+  });
 
 }
  
@@ -53,8 +45,7 @@ it('should have a greeting as the title', () => {
 `;
 
 exports[`app --style @emotion/styled should exclude styles 1`] = `
-"
-const { NxAppWebpackPlugin } = require('@nx/webpack/app-plugin');
+"const { NxAppWebpackPlugin } = require('@nx/webpack/app-plugin');
 const { NxReactWebpackPlugin } = require('@nx/react/webpack-plugin');
 const { join } = require('path');
 
@@ -89,7 +80,6 @@ module.exports = {
     }),
   ],
 };
-
 "
 `;
 
@@ -129,8 +119,7 @@ export default defineConfig({
 `;
 
 exports[`app --style none should exclude styles 1`] = `
-"
-const { NxAppWebpackPlugin } = require('@nx/webpack/app-plugin');
+"const { NxAppWebpackPlugin } = require('@nx/webpack/app-plugin');
 const { NxReactWebpackPlugin } = require('@nx/react/webpack-plugin');
 const { join } = require('path');
 
@@ -165,7 +154,6 @@ module.exports = {
     }),
   ],
 };
-
 "
 `;
 
@@ -253,7 +241,6 @@ export default defineConfig({
 exports[`app not nested should generate files 1`] = `
 "// eslint-disable-next-line @typescript-eslint/no-unused-vars
 import styles from './app.module.css';
-
 import NxWelcome from './nx-welcome';
 
 export function App() {
@@ -317,8 +304,7 @@ export default defineConfig({
 exports[`app setup React app with --bundler=vite should setup targets with vite configuration 1`] = `null`;
 
 exports[`app should add custom webpack config 1`] = `
-"
-const { NxAppWebpackPlugin } = require('@nx/webpack/app-plugin');
+"const { NxAppWebpackPlugin } = require('@nx/webpack/app-plugin');
 const { NxReactWebpackPlugin } = require('@nx/react/webpack-plugin');
 const { join } = require('path');
 
@@ -353,31 +339,22 @@ module.exports = {
     }),
   ],
 };
-
 "
 `;
 
 exports[`app should create Nx specific template 1`] = `
-"
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
+"// eslint-disable-next-line @typescript-eslint/no-unused-vars
 import styles from './app.module.css';
-
 import NxWelcome from "./nx-welcome";
 
-
-
 export function App() {
-
   return (
     <div>
-      
       <NxWelcome title="my-app"/>
-     
-    </div>);
-
+    </div>
+  );
 }
 
-
 export default App;
 
 
@@ -420,8 +397,7 @@ export default defineConfig({
 `;
 
 exports[`app should setup webpack 1`] = `
-"
-const { NxAppWebpackPlugin } = require('@nx/webpack/app-plugin');
+"const { NxAppWebpackPlugin } = require('@nx/webpack/app-plugin');
 const { NxReactWebpackPlugin } = require('@nx/react/webpack-plugin');
 const { join } = require('path');
 
@@ -456,6 +432,5 @@ module.exports = {
     }),
   ],
 };
-
 "
 `;
diff --git a/packages/react/src/generators/application/files/base-rspack/src/app/__fileName__.spec.tsx__tmpl__ b/packages/react/src/generators/application/files/base-rspack/src/app/__fileName__.spec.tsx__tmpl__
index a156be880642a..5de60696f5158 100644
--- a/packages/react/src/generators/application/files/base-rspack/src/app/__fileName__.spec.tsx__tmpl__
+++ b/packages/react/src/generators/application/files/base-rspack/src/app/__fileName__.spec.tsx__tmpl__
@@ -1,10 +1,10 @@
 import { render } from '@testing-library/react';
-<% if (routing) { %>
+<%_ if (routing) { _%>
 import { BrowserRouter } from 'react-router-dom';
-<% } %>
+<%_ } _%>
 
 import App from './<%= fileName %>';
 
 describe('App', () => {
-  <%- appTests %>
+  <%- appTests _%>
 });
diff --git a/packages/react/src/generators/application/files/base-rspack/src/main.tsx__tmpl__ b/packages/react/src/generators/application/files/base-rspack/src/main.tsx__tmpl__
index b9c4df4721ab4..16706dff0c703 100644
--- a/packages/react/src/generators/application/files/base-rspack/src/main.tsx__tmpl__
+++ b/packages/react/src/generators/application/files/base-rspack/src/main.tsx__tmpl__
@@ -1,11 +1,31 @@
-<% if (strict) { %>import { StrictMode } from 'react';<% } %>
+<%_ if (strict) { _%>import { StrictMode } from 'react';<%_ } _%>
 import * as ReactDOM from 'react-dom/client';
-<% if (routing) { %>import { BrowserRouter } from 'react-router-dom';<% } %>
+<%_ if (routing) { _%>import { BrowserRouter } from 'react-router-dom';<%_ } _%>
 
 import App from './app/<%= fileName %>';
 import './styles.<%= style %>'
 
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
+<%_ if(strict && !routing) { _%>
 root.render(
-<% if (strict) { %><StrictMode><% } %><% if (routing) { %><BrowserRouter><% } %><App /><% if (routing) { %></BrowserRouter><% } %><% if (strict) { %></StrictMode><% } %>
-);
+  <StrictMode>
+    <App/>
+  </StrictMode>
+)
+<%_ } _%>
+<%_ if(!strict && routing) { _%>
+root.render(
+  <BrowserRouter>
+    <App/>
+  </BrowserRouter>
+)
+<%_ } _%>
+<%_ if(strict && routing) { _%>
+root.render(
+  <StrictMode>
+    <BrowserRouter>
+      <App/>
+    </BrowserRouter>
+  </StrictMode>
+)
+<%_ } _%>
diff --git a/packages/react/src/generators/application/files/base-rspack/tsconfig.app.json__tmpl__ b/packages/react/src/generators/application/files/base-rspack/tsconfig.app.json__tmpl__
index d4f25e841132a..8bdce3f07d6ac 100644
--- a/packages/react/src/generators/application/files/base-rspack/tsconfig.app.json__tmpl__
+++ b/packages/react/src/generators/application/files/base-rspack/tsconfig.app.json__tmpl__
@@ -4,7 +4,7 @@
     "outDir": "<%= offsetFromRoot %>dist/out-tsc",
     "types": [
       "node",
-      <% if (style === 'styled-jsx') { %>"@nx/react/typings/styled-jsx.d.ts",<% } %>
+      <%_ if (style === 'styled-jsx') { %>"@nx/react/typings/styled-jsx.d.ts",<% } _%>
       "@nx/react/typings/cssmodule.d.ts",
       "@nx/react/typings/image.d.ts"
       ]
diff --git a/packages/react/src/generators/application/files/base-vite/src/app/__fileName__.spec.tsx__tmpl__ b/packages/react/src/generators/application/files/base-vite/src/app/__fileName__.spec.tsx__tmpl__
index a156be880642a..5de60696f5158 100644
--- a/packages/react/src/generators/application/files/base-vite/src/app/__fileName__.spec.tsx__tmpl__
+++ b/packages/react/src/generators/application/files/base-vite/src/app/__fileName__.spec.tsx__tmpl__
@@ -1,10 +1,10 @@
 import { render } from '@testing-library/react';
-<% if (routing) { %>
+<%_ if (routing) { _%>
 import { BrowserRouter } from 'react-router-dom';
-<% } %>
+<%_ } _%>
 
 import App from './<%= fileName %>';
 
 describe('App', () => {
-  <%- appTests %>
+  <%- appTests _%>
 });
diff --git a/packages/react/src/generators/application/files/base-vite/src/main.tsx__tmpl__ b/packages/react/src/generators/application/files/base-vite/src/main.tsx__tmpl__
index d5a60a7b0dd14..2a61bc6ec38a3 100644
--- a/packages/react/src/generators/application/files/base-vite/src/main.tsx__tmpl__
+++ b/packages/react/src/generators/application/files/base-vite/src/main.tsx__tmpl__
@@ -1,10 +1,35 @@
-<% if (strict) { %>import { StrictMode } from 'react';<% } %>
+<%_ if (strict) { _%>
+import { StrictMode } from 'react';
+<%_ } _%>
+<%_ if (routing) { _%>
+import { BrowserRouter } from 'react-router-dom';
+<%_ } _%>
 import * as ReactDOM from 'react-dom/client';
-<% if (routing) { %>import { BrowserRouter } from 'react-router-dom';<% } %>
-
 import App from './app/<%= fileName %>';
 
-const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
-root.render(
-<% if (strict) { %><StrictMode><% } %><% if (routing) { %><BrowserRouter><% } %><App /><% if (routing) { %></BrowserRouter><% } %><% if (strict) { %></StrictMode><% } %>
+const root = ReactDOM.createRoot(
+  document.getElementById('root') as HTMLElement
 );
+
+root.render(
+<%_ if(strict && !routing) { _%>
+  <StrictMode>
+    <App/>
+  </StrictMode>
+<%_ } _%>
+<%_ if(!strict && routing) { _%>
+  <BrowserRouter>
+    <App/>
+  </BrowserRouter>
+<%_ } _%>
+<%_ if(strict && routing) { _%>
+  <StrictMode>
+    <BrowserRouter>
+      <App/>
+    </BrowserRouter>
+  </StrictMode>
+<%_ } _%>
+<%_ if(!strict && !routing) { _%>
+  <App/>
+<%_ } _%>
+);
\ No newline at end of file
diff --git a/packages/react/src/generators/application/files/base-vite/tsconfig.app.json__tmpl__ b/packages/react/src/generators/application/files/base-vite/tsconfig.app.json__tmpl__
index de4ac4ad7e888..80a1b8ebf4c4a 100644
--- a/packages/react/src/generators/application/files/base-vite/tsconfig.app.json__tmpl__
+++ b/packages/react/src/generators/application/files/base-vite/tsconfig.app.json__tmpl__
@@ -4,7 +4,7 @@
     "outDir": "<%= offsetFromRoot %>dist/out-tsc",
     "types": [
       "node",
-      <% if (style === 'styled-jsx') { %>"@nx/react/typings/styled-jsx.d.ts",<% } %>
+      <%_ if (style === 'styled-jsx') { _%>"@nx/react/typings/styled-jsx.d.ts",<%_ } _%>
       "@nx/react/typings/cssmodule.d.ts",
       "@nx/react/typings/image.d.ts"
       ]
diff --git a/packages/react/src/generators/application/files/base-webpack/src/app/__fileName__.spec.tsx__tmpl__ b/packages/react/src/generators/application/files/base-webpack/src/app/__fileName__.spec.tsx__tmpl__
index a156be880642a..5de60696f5158 100644
--- a/packages/react/src/generators/application/files/base-webpack/src/app/__fileName__.spec.tsx__tmpl__
+++ b/packages/react/src/generators/application/files/base-webpack/src/app/__fileName__.spec.tsx__tmpl__
@@ -1,10 +1,10 @@
 import { render } from '@testing-library/react';
-<% if (routing) { %>
+<%_ if (routing) { _%>
 import { BrowserRouter } from 'react-router-dom';
-<% } %>
+<%_ } _%>
 
 import App from './<%= fileName %>';
 
 describe('App', () => {
-  <%- appTests %>
+  <%- appTests _%>
 });
diff --git a/packages/react/src/generators/application/files/base-webpack/src/main.tsx__tmpl__ b/packages/react/src/generators/application/files/base-webpack/src/main.tsx__tmpl__
index d5a60a7b0dd14..aa727538bab38 100644
--- a/packages/react/src/generators/application/files/base-webpack/src/main.tsx__tmpl__
+++ b/packages/react/src/generators/application/files/base-webpack/src/main.tsx__tmpl__
@@ -5,6 +5,26 @@ import * as ReactDOM from 'react-dom/client';
 import App from './app/<%= fileName %>';
 
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
+<%_ if(strict && !routing) { _%>
 root.render(
-<% if (strict) { %><StrictMode><% } %><% if (routing) { %><BrowserRouter><% } %><App /><% if (routing) { %></BrowserRouter><% } %><% if (strict) { %></StrictMode><% } %>
-);
+  <StrictMode>
+    <App/>
+  </StrictMode>
+)
+<%_ } _%>
+<%_ if(!strict && routing) { _%>
+root.render(
+  <BrowserRouter>
+    <App/>
+  </BrowserRouter>
+)
+<%_ } _%>
+<%_ if(strict && routing) { _%>
+root.render(
+  <StrictMode>
+    <BrowserRouter>
+      <App/>
+    </BrowserRouter>
+  </StrictMode>
+)
+<%_ } _%>
diff --git a/packages/react/src/generators/application/files/base-webpack/tsconfig.app.json__tmpl__ b/packages/react/src/generators/application/files/base-webpack/tsconfig.app.json__tmpl__
index d4f25e841132a..03309c7d0f926 100644
--- a/packages/react/src/generators/application/files/base-webpack/tsconfig.app.json__tmpl__
+++ b/packages/react/src/generators/application/files/base-webpack/tsconfig.app.json__tmpl__
@@ -4,7 +4,7 @@
     "outDir": "<%= offsetFromRoot %>dist/out-tsc",
     "types": [
       "node",
-      <% if (style === 'styled-jsx') { %>"@nx/react/typings/styled-jsx.d.ts",<% } %>
+      <%_ if (style === 'styled-jsx') { _%>"@nx/react/typings/styled-jsx.d.ts",<%_ } _%>
       "@nx/react/typings/cssmodule.d.ts",
       "@nx/react/typings/image.d.ts"
       ]
diff --git a/packages/react/src/generators/application/files/base-webpack/webpack.config.js__tmpl__ b/packages/react/src/generators/application/files/base-webpack/webpack.config.js__tmpl__
index 496b0e1f4be6e..d5b037cf0c17d 100644
--- a/packages/react/src/generators/application/files/base-webpack/webpack.config.js__tmpl__
+++ b/packages/react/src/generators/application/files/base-webpack/webpack.config.js__tmpl__
@@ -1,4 +1,4 @@
-<% if (webpackPluginOptions) { %>
+<%_ if (webpackPluginOptions) { _%>
 const { NxAppWebpackPlugin } = require('@nx/webpack/app-plugin');
 const { NxReactWebpackPlugin } = require('@nx/react/webpack-plugin');
 const { join } = require('path');
@@ -34,7 +34,7 @@ module.exports = {
     }),
   ],
 };
-<% } else { %>
+<%_ } else { _%>
 const { composePlugins, withNx } = require('@nx/webpack');
 const { withReact } = require('@nx/react');
 
@@ -52,4 +52,4 @@ module.exports = composePlugins(
     return config;
   }
 );
-<% } %>
+<%_ } _%>
diff --git a/packages/react/src/generators/application/files/style-css-module/src/app/__fileName__.tsx__tmpl__ b/packages/react/src/generators/application/files/style-css-module/src/app/__fileName__.tsx__tmpl__
index df01e91c5f946..4f04c1a17dbca 100644
--- a/packages/react/src/generators/application/files/style-css-module/src/app/__fileName__.tsx__tmpl__
+++ b/packages/react/src/generators/application/files/style-css-module/src/app/__fileName__.tsx__tmpl__
@@ -1,35 +1,45 @@
 <% if (classComponent) { %>
 import { Component } from 'react';
-<% } %>
+<%_ } _%>
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import styles from './<%= fileName %>.module.<%= style %>';
-<% if (!minimal) { %>
+<%_ if (!minimal) { _%>
 import NxWelcome from "./nx-welcome";
-<% } %>
+<%_ } _%>
 
-<% if (classComponent) { %>
+<%_ if (classComponent) { _%>
 export class App extends Component {
-  render() {
-<% } else { %>
+  override render() {
+    return (
+      <div>
+        <%_ if (!minimal) { _%>
+        <NxWelcome title="<%= projectName %>"/>
+        <%_ } else { _%>
+        <h1>
+          <span> Hello there, </span>
+          Welcome <%= projectName %> 👋
+        </h1>
+        <%_ } _%>
+      </div>
+    );
+  }
+}
+<%_ } else { _%>
 export function App() {
-<% } %>
   return (
     <div>
-      <% if (!minimal) { %>
+    <%_ if (!minimal) { _%>
       <NxWelcome title="<%= projectName %>"/>
-     <% } else { %>
+    <%_ } else { _%>
       <h1>
         <span> Hello there, </span>
         Welcome <%= projectName %> 👋
       </h1>
-     <% } %>
-    </div>);
-<% if (classComponent) { %>
-  }
-}
-<% } else { %>
+    <%_ } _%>
+    </div>
+  );
 }
-<% } %>
+<%_ } _%>
 
 export default App;
 
diff --git a/packages/react/src/generators/application/files/style-global-css/src/app/__fileName__.tsx__tmpl__ b/packages/react/src/generators/application/files/style-global-css/src/app/__fileName__.tsx__tmpl__
index 066e35c0ac943..0b806a9a7fc28 100644
--- a/packages/react/src/generators/application/files/style-global-css/src/app/__fileName__.tsx__tmpl__
+++ b/packages/react/src/generators/application/files/style-global-css/src/app/__fileName__.tsx__tmpl__
@@ -1,35 +1,44 @@
-<% if (classComponent) { %>
+<%_ if (classComponent) { _%>
 import { Component } from 'react';
-<% } %>
+<%_ } _%>
 import './<%= fileName %>.<%= style %>';
-<% if (!minimal) { %>
+<%_ if (!minimal) { _%>
 import NxWelcome from "./nx-welcome";
-<% } %>
+<%_ } _%>
 
-<% if (classComponent) { %>
+<%_ if (classComponent) { _%>
 export class App extends Component {
-  render() {
-<% } else { %>
+  override render() {
+    return (
+      <div>
+        <%_ if (!minimal) { _%>
+        <NxWelcome title="<%= projectName %>"/>
+        <%_ } else { _%>
+        <h1>
+          <span> Hello there, </span>
+          Welcome <%= projectName %> 👋
+        </h1>
+        <%_ } _%>
+      </div>
+    );
+  }
+}
+<%_ } else { _%>
 export function App() {
-<% } %>
   return (
-  <div>
-    <% if (!minimal) { %>
-    <NxWelcome title="<%= projectName %>"/>
-     <% } else { %>
+    <div>
+    <%_ if (!minimal) { _%>
+      <NxWelcome title="<%= projectName %>"/>
+    <%_ } else { _%>
       <h1>
         <span> Hello there, </span>
         Welcome <%= projectName %> 👋
       </h1>
-     <% } %>
-  </div>);
-<% if (classComponent) { %>
-  }
+    <%_ } _%>
+    </div>
+  );
 }
-<% } else { %>
-}
-<% } %>
-
+<%_ } _%>
 export default App;
 
 <% if (inSourceTests === true) { %> <%- inSourceVitestTests %> <% } %>
diff --git a/packages/react/src/generators/application/files/style-none/src/app/__fileName__.tsx__tmpl__ b/packages/react/src/generators/application/files/style-none/src/app/__fileName__.tsx__tmpl__
index 2ed43176fc2c1..294d3c1db46b0 100644
--- a/packages/react/src/generators/application/files/style-none/src/app/__fileName__.tsx__tmpl__
+++ b/packages/react/src/generators/application/files/style-none/src/app/__fileName__.tsx__tmpl__
@@ -1,33 +1,43 @@
-<% if (classComponent) { %>
+<%_ if (classComponent) { _%>
 import  { Component } from 'react';
-<% } %>
-<% if (!minimal) { %>
+<%_ } _%>
+<%_ if (!minimal) { _%>
 import NxWelcome from "./nx-welcome";
-<% } %>
+<%_ } _%>
 
-<% if (classComponent) { %>
+<%_ if (classComponent) { _%>
 export class App extends Component {
   override render() {
-<% } else { %>
+    return (
+      <div>
+        <%_ if (!minimal) { _%>
+        <NxWelcome title="<%= projectName %>"/>
+        <%_ } else { _%>
+        <h1>
+          <span> Hello there, </span>
+          Welcome <%= projectName %> 👋
+        </h1>
+        <%_ } _%>
+      </div>
+    );
+  }
+}
+<%_ } else { _%>
 export function App() {
-<% } %>
   return (
     <div>
-      <% if (!minimal) { %>
+    <%_ if (!minimal) { _%>
       <NxWelcome title="<%= projectName %>"/>
-      <% } else { %>
+    <%_ } else { _%>
       <h1>
         <span> Hello there, </span>
         Welcome <%= projectName %> 👋
       </h1>
-     <% } %>
-    </div>);
-<% if (classComponent) { %>
-  }
-}
-<% } else { %>
+    <%_ } _%>
+    </div>
+  );
 }
-<% } %>
+<%_ } _%>
 
 export default App;
 
diff --git a/packages/react/src/generators/application/files/style-styled-jsx/src/app/__fileName__.tsx__tmpl__ b/packages/react/src/generators/application/files/style-styled-jsx/src/app/__fileName__.tsx__tmpl__
index 044a4c8a35299..856df8f5badf0 100644
--- a/packages/react/src/generators/application/files/style-styled-jsx/src/app/__fileName__.tsx__tmpl__
+++ b/packages/react/src/generators/application/files/style-styled-jsx/src/app/__fileName__.tsx__tmpl__
@@ -1,36 +1,45 @@
-<% if (classComponent) { %>
+<%_ if (classComponent) { _%>
 import { Component } from 'react';
-<% } %>
-<% if (!minimal) { %>
+<%_ } _%>
+<%_ if (!minimal) { _%>
 import NxWelcome from "./nx-welcome";
-<% } %>
+<%_ } _%>
 
-<% if (classComponent) { %>
+<%_ if (classComponent) { _%>
 export class App extends Component {
-  render() {
-<% } else { %>
+  override render() {
+    return (
+      <div>
+        <style jsx>{`/** your style here **/`}</style>
+        <%_ if (!minimal) { _%>
+        <NxWelcome title="<%= projectName %>"/>
+        <%_ } else { _%>
+        <h1>
+          <span> Hello there, </span>
+          Welcome <%= projectName %> 👋
+        </h1>
+        <%_ } _%>
+      </div>
+    );
+  }
+}
+<%_ } else { _%>
 export function App() {
-<% } %>
   return (
     <div>
       <style jsx>{`/** your style here **/`}</style>
-        <% if (!minimal) { %>
-        <NxWelcome title="<%= projectName %>"/>
-        <% } else { %>
-          <h1>
-            <span> Hello there, </span>
-            Welcome <%= projectName %> 👋
-          </h1>
-        <% } %>
+    <%_ if (!minimal) { _%>
+      <NxWelcome title="<%= projectName %>"/>
+    <%_ } else { _%>
+      <h1>
+        <span> Hello there, </span>
+        Welcome <%= projectName %> 👋
+      </h1>
+    <%_ } _%>
     </div>
   );
-
-<% if (classComponent) { %>
-  }
-}
-<% } else { %>
 }
-<% } %>
+<%_ } _%>
 
 export default App;
 
diff --git a/packages/react/src/generators/application/files/style-styled-module/src/app/__fileName__.tsx__tmpl__ b/packages/react/src/generators/application/files/style-styled-module/src/app/__fileName__.tsx__tmpl__
index d1ed0bf98dde6..d13d8ec4eb6f9 100644
--- a/packages/react/src/generators/application/files/style-styled-module/src/app/__fileName__.tsx__tmpl__
+++ b/packages/react/src/generators/application/files/style-styled-module/src/app/__fileName__.tsx__tmpl__
@@ -1,39 +1,48 @@
-<% if (classComponent) { %>
+<%_ if (classComponent) { _%>
 import { Component } from 'react';
-<% } %>
+<%_ } _%>
 import styled from '<%= styledModule %>';
-<% if (!minimal) { %>
+<%_ if (!minimal) { _%>
 import NxWelcome from "./nx-welcome";
-<% } %>
+<%_ } _%>
 
 const StyledApp = styled.div`
     // Your style here
 `;
 
-<% if (classComponent) { %>
+<%_ if (classComponent) { _%>
 export class App extends Component {
-  render() {
-<% } else { %>
-export function App() {
-<% } %>
-  return (
+  override render() {
+    return (
       <StyledApp>
-        <% if (!minimal) { %>
+        <%_ if (!minimal) { _%>
         <NxWelcome title="<%= projectName %>"/>
-        <% } else { %>
-          <h1>
-            <span> Hello there, </span>
-            Welcome <%= projectName %> 👋
-          </h1>
-        <% } %>
+        <%_ } else { _%>
+        <h1>
+          <span> Hello there, </span>
+          Welcome <%= projectName %> 👋
+        </h1>
+        <%_ } _%>
       </StyledApp>
-  );
-<% if (classComponent) { %>
+    );
   }
 }
-<% } else { %>
+<%_ } else { _%>
+export function App() {
+  return (
+    <StyledApp>
+    <%_ if (!minimal) { _%>
+      <NxWelcome title="<%= projectName %>"/>
+    <%_ } else { _%>
+      <h1>
+        <span> Hello there, </span>
+        Welcome <%= projectName %> 👋
+      </h1>
+    <%_ } _%>
+    </StyledApp>
+  );
 }
-<% } %>
+<%_ } _%>
 
 export default App;
 
diff --git a/packages/react/src/generators/application/files/style-tailwind/src/app/__fileName__.tsx__tmpl__ b/packages/react/src/generators/application/files/style-tailwind/src/app/__fileName__.tsx__tmpl__
index 671b49bfca17e..55036b7730625 100644
--- a/packages/react/src/generators/application/files/style-tailwind/src/app/__fileName__.tsx__tmpl__
+++ b/packages/react/src/generators/application/files/style-tailwind/src/app/__fileName__.tsx__tmpl__
@@ -1,32 +1,44 @@
-<% if (classComponent) { %>
+<%_ if (classComponent) { _%>
 import { Component } from 'react';
-<% } if (!minimal) { %>
+<%_ } if (!minimal) { _%>
 import NxWelcome from "./nx-welcome";
-<% } %>
+<%_ } if (bundler === "rspack") { _%>
+import '../styles.css';
+<%_ } _%>
 
-<% if (classComponent) { %>
+<%_ if (classComponent) { _%>
 export class App extends Component {
-  render() {
-<% } else { %>
+  override render() {
+    return (
+      <div>
+        <%_ if (!minimal) { _%>
+        <NxWelcome title="<%= projectName %>"/>
+        <%_ } else { _%>
+        <h1>
+          <span> Hello there, </span>
+          Welcome <%= projectName %> 👋
+        </h1>
+        <%_ } _%>
+      </div>
+    );
+  }
+}
+<%_ } else { _%>
 export function App() {
-<% } %>
   return (
-  <div>
-    <% if (!minimal) { %>
-    <NxWelcome title="<%= projectName %>"/>
-     <% } else { %>
+    <div>
+      <%_ if (!minimal) { _%>
+      <NxWelcome title="<%= projectName %>"/>
+      <%_ } else { _%>
       <h1>
         <span> Hello there, </span>
         Welcome <%= projectName %> 👋
       </h1>
-     <% } %>
-  </div>);
-<% if (classComponent) { %>
-  }
-}
-<% } else { %>
+      <%_ } _%>
+    </div>
+  );
 }
-<% } %>
+<%_ } _%>
 
 export default App;
 
diff --git a/packages/react/src/generators/application/lib/get-app-tests.ts b/packages/react/src/generators/application/lib/get-app-tests.ts
index 3558adb53a674..a1d6fb0fbe73d 100644
--- a/packages/react/src/generators/application/lib/get-app-tests.ts
+++ b/packages/react/src/generators/application/lib/get-app-tests.ts
@@ -1,23 +1,22 @@
 import { NormalizedSchema } from '../schema';
 
 export function getAppTests(options: NormalizedSchema) {
-  return `
-it('should render successfully', () => {
-  ${
-    options.routing
-      ? 'const { baseElement } = render(<BrowserRouter><App /></BrowserRouter>);'
-      : 'const { baseElement } = render(<App />);'
-  }
-  expect(baseElement).toBeTruthy();
-});
+  return `it('should render successfully', () => {
+    ${
+      options.routing
+        ? 'const { baseElement } = render(<BrowserRouter><App /></BrowserRouter>);'
+        : 'const { baseElement } = render(<App />);'
+    }
+    expect(baseElement).toBeTruthy();
+  });
 
-it('should have a greeting as the title', () => {
-  ${
-    options.routing
-      ? 'const { getByText } = render(<BrowserRouter><App /></BrowserRouter>);'
-      : 'const { getByText } = render(<App />);'
-  }
-  expect(getByText(/Welcome ${options.projectName}/gi)).toBeTruthy();
-});
+  it('should have a greeting as the title', () => {
+    ${
+      options.routing
+        ? 'const { getByText } = render(<BrowserRouter><App /></BrowserRouter>);'
+        : 'const { getByText } = render(<App />);'
+    }
+    expect(getByText(/Welcome ${options.projectName}/gi)).toBeTruthy();
+  });
 `;
 }
diff --git a/packages/react/src/generators/component-story/__snapshots__/component-story.spec.ts.snap b/packages/react/src/generators/component-story/__snapshots__/component-story.spec.ts.snap
index 55b29dd23cf7e..aa03506592e3c 100644
--- a/packages/react/src/generators/component-story/__snapshots__/component-story.spec.ts.snap
+++ b/packages/react/src/generators/component-story/__snapshots__/component-story.spec.ts.snap
@@ -3,7 +3,6 @@
 exports[`react:component-story default setup Other types of component definitions Component files with DEFAULT export React component defined as: PureComponent class & then default export new JSX transform should properly setup the controls based on the component props 1`] = `
 "import type { Meta, StoryObj } from '@storybook/react';
 import { Test } from './test-ui-lib';
-
 import { within } from '@storybook/testing-library';
 import { expect } from '@storybook/jest';
 
@@ -37,7 +36,6 @@ export const Heading: Story = {
 exports[`react:component-story default setup Other types of component definitions Component files with DEFAULT export React component defined as: PureComponent class & then default export should properly setup the controls based on the component props 1`] = `
 "import type { Meta, StoryObj } from '@storybook/react';
 import { Test } from './test-ui-lib';
-
 import { within } from '@storybook/testing-library';
 import { expect } from '@storybook/jest';
 
@@ -71,7 +69,6 @@ export const Heading: Story = {
 exports[`react:component-story default setup Other types of component definitions Component files with DEFAULT export React component defined as: arrow function should properly setup the controls based on the component props 1`] = `
 "import type { Meta, StoryObj } from '@storybook/react';
 import { Test } from './test-ui-lib';
-
 import { within } from '@storybook/testing-library';
 import { expect } from '@storybook/jest';
 
@@ -105,7 +102,6 @@ export const Heading: Story = {
 exports[`react:component-story default setup Other types of component definitions Component files with DEFAULT export React component defined as: arrow function without {..} should properly setup the controls based on the component props 1`] = `
 "import type { Meta, StoryObj } from '@storybook/react';
 import { Test } from './test-ui-lib';
-
 import { within } from '@storybook/testing-library';
 import { expect } from '@storybook/jest';
 
@@ -139,7 +135,6 @@ export const Heading: Story = {
 exports[`react:component-story default setup Other types of component definitions Component files with DEFAULT export React component defined as: component class & then default export new JSX transform should properly setup the controls based on the component props 1`] = `
 "import type { Meta, StoryObj } from '@storybook/react';
 import { Test } from './test-ui-lib';
-
 import { within } from '@storybook/testing-library';
 import { expect } from '@storybook/jest';
 
@@ -173,7 +168,6 @@ export const Heading: Story = {
 exports[`react:component-story default setup Other types of component definitions Component files with DEFAULT export React component defined as: component class & then default export should properly setup the controls based on the component props 1`] = `
 "import type { Meta, StoryObj } from '@storybook/react';
 import { Test } from './test-ui-lib';
-
 import { within } from '@storybook/testing-library';
 import { expect } from '@storybook/jest';
 
@@ -207,7 +201,6 @@ export const Heading: Story = {
 exports[`react:component-story default setup Other types of component definitions Component files with DEFAULT export React component defined as: default export function should properly setup the controls based on the component props 1`] = `
 "import type { Meta, StoryObj } from '@storybook/react';
 import { Test } from './test-ui-lib';
-
 import { within } from '@storybook/testing-library';
 import { expect } from '@storybook/jest';
 
@@ -241,7 +234,6 @@ export const Heading: Story = {
 exports[`react:component-story default setup Other types of component definitions Component files with DEFAULT export React component defined as: direct export of component class new JSX transform should properly setup the controls based on the component props 1`] = `
 "import type { Meta, StoryObj } from '@storybook/react';
 import { Test } from './test-ui-lib';
-
 import { within } from '@storybook/testing-library';
 import { expect } from '@storybook/jest';
 
@@ -275,7 +267,6 @@ export const Heading: Story = {
 exports[`react:component-story default setup Other types of component definitions Component files with DEFAULT export React component defined as: direct export of component class should properly setup the controls based on the component props 1`] = `
 "import type { Meta, StoryObj } from '@storybook/react';
 import { Test } from './test-ui-lib';
-
 import { within } from '@storybook/testing-library';
 import { expect } from '@storybook/jest';
 
@@ -309,7 +300,6 @@ export const Heading: Story = {
 exports[`react:component-story default setup Other types of component definitions Component files with DEFAULT export React component defined as: function and then export should properly setup the controls based on the component props 1`] = `
 "import type { Meta, StoryObj } from '@storybook/react';
 import { Test } from './test-ui-lib';
-
 import { within } from '@storybook/testing-library';
 import { expect } from '@storybook/jest';
 
@@ -343,7 +333,6 @@ export const Heading: Story = {
 exports[`react:component-story default setup Other types of component definitions Component files with NO DEFAULT export React component defined as: no default PureComponent class & then default export new JSX transform should properly setup the controls based on the component props 1`] = `
 "import type { Meta, StoryObj } from '@storybook/react';
 import { Test } from './test-ui-lib';
-
 import { within } from '@storybook/testing-library';
 import { expect } from '@storybook/jest';
 
@@ -377,7 +366,6 @@ export const Heading: Story = {
 exports[`react:component-story default setup Other types of component definitions Component files with NO DEFAULT export React component defined as: no default PureComponent class & then default export should properly setup the controls based on the component props 1`] = `
 "import type { Meta, StoryObj } from '@storybook/react';
 import { Test } from './test-ui-lib';
-
 import { within } from '@storybook/testing-library';
 import { expect } from '@storybook/jest';
 
@@ -411,7 +399,6 @@ export const Heading: Story = {
 exports[`react:component-story default setup Other types of component definitions Component files with NO DEFAULT export React component defined as: no default arrow function should properly setup the controls based on the component props 1`] = `
 "import type { Meta, StoryObj } from '@storybook/react';
 import { Test } from './test-ui-lib';
-
 import { within } from '@storybook/testing-library';
 import { expect } from '@storybook/jest';
 
@@ -445,7 +432,6 @@ export const Heading: Story = {
 exports[`react:component-story default setup Other types of component definitions Component files with NO DEFAULT export React component defined as: no default arrow function without {..} should properly setup the controls based on the component props 1`] = `
 "import type { Meta, StoryObj } from '@storybook/react';
 import { Test } from './test-ui-lib';
-
 import { within } from '@storybook/testing-library';
 import { expect } from '@storybook/jest';
 
@@ -479,7 +465,6 @@ export const Heading: Story = {
 exports[`react:component-story default setup Other types of component definitions Component files with NO DEFAULT export React component defined as: no default component class should properly setup the controls based on the component props 1`] = `
 "import type { Meta, StoryObj } from '@storybook/react';
 import { Test } from './test-ui-lib';
-
 import { within } from '@storybook/testing-library';
 import { expect } from '@storybook/jest';
 
@@ -513,7 +498,6 @@ export const Heading: Story = {
 exports[`react:component-story default setup Other types of component definitions Component files with NO DEFAULT export React component defined as: no default direct export of component class new JSX transform should properly setup the controls based on the component props 1`] = `
 "import type { Meta, StoryObj } from '@storybook/react';
 import { Test } from './test-ui-lib';
-
 import { within } from '@storybook/testing-library';
 import { expect } from '@storybook/jest';
 
@@ -547,7 +531,6 @@ export const Heading: Story = {
 exports[`react:component-story default setup Other types of component definitions Component files with NO DEFAULT export React component defined as: no default direct export of component class should properly setup the controls based on the component props 1`] = `
 "import type { Meta, StoryObj } from '@storybook/react';
 import { Test } from './test-ui-lib';
-
 import { within } from '@storybook/testing-library';
 import { expect } from '@storybook/jest';
 
@@ -581,7 +564,6 @@ export const Heading: Story = {
 exports[`react:component-story default setup Other types of component definitions Component files with NO DEFAULT export React component defined as: no default simple export function should properly setup the controls based on the component props 1`] = `
 "import type { Meta, StoryObj } from '@storybook/react';
 import { Test } from './test-ui-lib';
-
 import { within } from '@storybook/testing-library';
 import { expect } from '@storybook/jest';
 
@@ -615,7 +597,6 @@ export const Heading: Story = {
 exports[`react:component-story default setup Other types of component definitions Component files with NO DEFAULT export should create stories for all components in a file with no default export 1`] = `
 "import type { Meta, StoryObj } from '@storybook/react';
 import { One } from './test-ui-lib';
-
 import { within } from '@storybook/testing-library';
 import { expect } from '@storybook/jest';
 
@@ -643,7 +624,6 @@ export const Heading: Story = {
 exports[`react:component-story default setup Other types of component definitions Component files with NO DEFAULT export should create stories for all components in a file with no default export 2`] = `
 "import type { Meta, StoryObj } from '@storybook/react';
 import { Two } from './test-ui-lib';
-
 import { within } from '@storybook/testing-library';
 import { expect } from '@storybook/jest';
 
@@ -671,7 +651,6 @@ export const Heading: Story = {
 exports[`react:component-story default setup Other types of component definitions Component files with NO DEFAULT export should create stories for all components in a file with no default export 3`] = `
 "import type { Meta, StoryObj } from '@storybook/react';
 import { Three } from './test-ui-lib';
-
 import { within } from '@storybook/testing-library';
 import { expect } from '@storybook/jest';
 
@@ -703,7 +682,6 @@ export const Heading: Story = {
 exports[`react:component-story default setup component with props and actions should setup controls based on the component props 1`] = `
 "import type { Meta, StoryObj } from '@storybook/react';
 import { Test } from './test-ui-lib';
-
 import { within } from '@storybook/testing-library';
 import { expect } from '@storybook/jest';
 
@@ -742,7 +720,6 @@ export const Heading: Story = {
 exports[`react:component-story default setup component with props should setup controls based on the component destructured props defined in an inline literal type 1`] = `
 "import type { Meta, StoryObj } from '@storybook/react';
 import { Test } from './test-ui-lib';
-
 import { within } from '@storybook/testing-library';
 import { expect } from '@storybook/jest';
 
@@ -776,7 +753,6 @@ export const Heading: Story = {
 exports[`react:component-story default setup component with props should setup controls based on the component destructured props without type 1`] = `
 "import type { Meta, StoryObj } from '@storybook/react';
 import { Test } from './test-ui-lib';
-
 import { within } from '@storybook/testing-library';
 import { expect } from '@storybook/jest';
 
@@ -810,7 +786,6 @@ export const Heading: Story = {
 exports[`react:component-story default setup component with props should setup controls based on the component props defined in a literal type 1`] = `
 "import type { Meta, StoryObj } from '@storybook/react';
 import { Test } from './test-ui-lib';
-
 import { within } from '@storybook/testing-library';
 import { expect } from '@storybook/jest';
 
@@ -844,7 +819,6 @@ export const Heading: Story = {
 exports[`react:component-story default setup component with props should setup controls based on the component props defined in an inline literal type 1`] = `
 "import type { Meta, StoryObj } from '@storybook/react';
 import { Test } from './test-ui-lib';
-
 import { within } from '@storybook/testing-library';
 import { expect } from '@storybook/jest';
 
@@ -878,7 +852,6 @@ export const Heading: Story = {
 exports[`react:component-story default setup component with props should setup controls based on the component props defined in an interface 1`] = `
 "import type { Meta, StoryObj } from '@storybook/react';
 import { Test } from './test-ui-lib';
-
 import { within } from '@storybook/testing-library';
 import { expect } from '@storybook/jest';
 
@@ -912,7 +885,6 @@ export const Heading: Story = {
 exports[`react:component-story default setup component without any props defined should create a story without controls 1`] = `
 "import type { Meta, StoryObj } from '@storybook/react';
 import { Test } from './test-ui-lib';
-
 import { within } from '@storybook/testing-library';
 import { expect } from '@storybook/jest';
 
@@ -940,7 +912,6 @@ export const Heading: Story = {
 exports[`react:component-story default setup default component setup should properly set up the story 1`] = `
 "import type { Meta, StoryObj } from '@storybook/react';
 import { TestUiLib } from './test-ui-lib';
-
 import { within } from '@storybook/testing-library';
 import { expect } from '@storybook/jest';
 
@@ -967,7 +938,6 @@ export const Heading: Story = {
 
 exports[`react:component-story default setup when using plain JS components should properly set up the story 1`] = `
 "import componentName from './test-ui-libplain';
-
 import { within } from '@storybook/testing-library';
 import { expect } from '@storybook/jest';
 
diff --git a/packages/react/src/generators/component-story/files/jsx/__componentFileName__.stories.jsx__tmpl__ b/packages/react/src/generators/component-story/files/jsx/__componentFileName__.stories.jsx__tmpl__
index 5750a734eab0a..6fc760353b05c 100644
--- a/packages/react/src/generators/component-story/files/jsx/__componentFileName__.stories.jsx__tmpl__
+++ b/packages/react/src/generators/component-story/files/jsx/__componentFileName__.stories.jsx__tmpl__
@@ -1,8 +1,8 @@
 import componentName from './<%= componentImportFileName %>';
-<% if ( interactionTests ) { %>
+<%_ if ( interactionTests ) { _%>
 import { within } from '@storybook/testing-library';
 import { expect } from '@storybook/jest';
-<% } %>
+<%_ } _%>
 
 export default {
   component: <%= componentName %>,
@@ -10,7 +10,7 @@ export default {
   argTypes: {<% for (let argType of argTypes) { %>
     <%= argType.name %>: { <%- argType.type %> : "<%- argType.actionText %>" },<% } %>
 }
-   <% } %> 
+   <%_ } _%> 
 };
 
 export const Primary = {
@@ -19,11 +19,11 @@ export const Primary = {
   },
 };
 
-<% if ( interactionTests ) { %>
+<%_ if ( interactionTests ) { _%>
 export const Heading: Story = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
     expect(canvas.getByText(/Welcome to <%=componentName%>!/gi)).toBeTruthy();
   },
 };
-<% } %>
\ No newline at end of file
+<%_ } _%>
\ No newline at end of file
diff --git a/packages/react/src/generators/component-story/files/tsx/__componentFileName__.stories.tsx__tmpl__ b/packages/react/src/generators/component-story/files/tsx/__componentFileName__.stories.tsx__tmpl__
index 0045de48e0bb6..6a040ba9d2e00 100644
--- a/packages/react/src/generators/component-story/files/tsx/__componentFileName__.stories.tsx__tmpl__
+++ b/packages/react/src/generators/component-story/files/tsx/__componentFileName__.stories.tsx__tmpl__
@@ -1,9 +1,9 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { <%= componentName %>  } from './<%= componentImportFileName %>';
-<% if ( interactionTests ) { %>
+<%_ if ( interactionTests ) { _%>
 import { within } from '@storybook/testing-library';
 import { expect } from '@storybook/jest';
-<% } %>
+<%_ } _%>
 
 const meta: Meta<typeof <%= componentName %>> = {
   component: <%= componentName %>,
@@ -16,14 +16,13 @@ const meta: Meta<typeof <%= componentName %>> = {
 export default meta;
 type Story = StoryObj<typeof <%= componentName %>>;
 
-
 export const Primary = {
   args: {<% for (let prop of props) { %>
     <%= prop.name %>:  <%- prop.defaultValue %>,<% } %>
   },
 };
 
-<% if ( interactionTests ) { %>
+<%_ if ( interactionTests ) { _%>
 export const Heading: Story = {
   args: {<% for (let prop of props) { %>
     <%= prop.name %>:  <%- prop.defaultValue %>,<% } %>
diff --git a/packages/react/src/generators/component/files/__fileName__.tsx__tmpl__ b/packages/react/src/generators/component/files/__fileName__.tsx__tmpl__
index 789f2d8d10b00..60bfe0356c994 100644
--- a/packages/react/src/generators/component/files/__fileName__.tsx__tmpl__
+++ b/packages/react/src/generators/component/files/__fileName__.tsx__tmpl__
@@ -1,84 +1,83 @@
-<% if (classComponent) { %>
+<%_ if (classComponent) { _%>
 import { Component } from 'react';
-<% } %>
-
-<% if (routing) { %>
+<%_ } _%>
+<%_ if (routing) { _%>
 import { Route, Link } from 'react-router-dom';
-<% } %>
+<%_ } _%>
 
-<% if (hasStyles) {
+<%_ if (hasStyles) {
    if (styledModule && styledModule !== 'styled-jsx') {
     var wrapper = 'Styled' + className;
     var extras = '';
-  %>
-  import styled from '<%= styledModule %>';
-  <% } else {
+  _%>
+import styled from '<%= styledModule %>';
+  <%_ } else {
     var wrapper = 'div';
     var extras = globalCss || styledModule === 'styled-jsx' ? '' : " className={styles['container']}";
-  %>
-  <%- style !== 'styled-jsx' ? globalCss ? `import './${fileName}.${style}';` : `import styles from './${fileName}.module.${style}';`: '' %>
-  <% }
+  _%>
+<%- style !== 'styled-jsx' ? globalCss ? `import './${fileName}.${style}';` : `import styles from './${fileName}.module.${style}';`: '' %>
+  <%_ }
 } else {
     var wrapper = 'div';
     var extras = '';
-} %>
+} _%>
 
-<% if (styledModule && styledModule !== 'styled-jsx') { %>
+<%_ if (styledModule && styledModule !== 'styled-jsx') { _%>
 const Styled<%= className %> = styled.div`
   color: pink;
 `;
-<% }%>
-<% if(!isNextPage) { %>
-  <% if (classComponent) { %>
-  export class <%= className %> extends Component<{}> {
-    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 %>() {
+<%_ } _%>
+<%_ if(!isNextPage) { _%>
+  <%_ if (classComponent) { _%>
+export class <%= className %> extends Component<{}> {
+  override render() {
     return (
       <<%= wrapper %><%- extras %>>
-        <% if (styledModule === 'styled-jsx') { %><style jsx>{`div { color: pink; }`}</style><% } %>
-        <h1>Welcome to <%= className %>!</h1>
-        <% if (routing) { %>
+        <%= 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 %>() {
+  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 %>;
-<% } else { %>
-  export default function <%= className %>() {
-    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 %>;
+<%_ } else { _%>
+export default function <%= className %>() {
+  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 %>>
+  );
+};
 <% } %>
 
 <% if (inSourceTests === true) { %> <%- inSourceVitestTests %> <% } %>
diff --git a/packages/react/src/generators/host/__snapshots__/host.webpack.spec.ts.snap b/packages/react/src/generators/host/__snapshots__/host.webpack.spec.ts.snap
index e2c2ed26f8de3..fd1ec7d006fb7 100644
--- a/packages/react/src/generators/host/__snapshots__/host.webpack.spec.ts.snap
+++ b/packages/react/src/generators/host/__snapshots__/host.webpack.spec.ts.snap
@@ -139,7 +139,7 @@ import {withModuleFederation} from '@nx/react/module-federation';
 import baseConfig from './module-federation.config';
 
 const config: ModuleFederationConfig = {
-    ...baseConfig,
+  ...baseConfig,
 };
 
 // Nx plugins for webpack to build config object from Nx options and context.
@@ -156,21 +156,20 @@ exports[`hostGenerator bundler=webpack should generate host files and configs wh
 "import { ModuleFederationConfig } from '@nx/webpack';
 
 const config: ModuleFederationConfig = {
-    name: 'test',
-    /**
-     * 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: [
-            
+  name: 'test',
+  /**
+    * 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: [
   ],
 };
 
diff --git a/packages/react/src/generators/host/files/common-ts/src/app/__fileName__.tsx__tmpl__ b/packages/react/src/generators/host/files/common-ts/src/app/__fileName__.tsx__tmpl__
index 7960d003fffb0..2c6a48fdfca44 100644
--- a/packages/react/src/generators/host/files/common-ts/src/app/__fileName__.tsx__tmpl__
+++ b/packages/react/src/generators/host/files/common-ts/src/app/__fileName__.tsx__tmpl__
@@ -1,39 +1,39 @@
 import * as React from 'react';
-<% if (!minimal) { %>
+<%_ if (!minimal) { _%>
 import NxWelcome from "./nx-welcome";
-<% } %>
+<%_ } _%>
 import { Link, Route, Routes } from 'react-router-dom';
-<% if (dynamic) { %>
+<%_ 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'));
-<% } %>
- <% }); %>
-<% } %>
+<%_ 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>
+      <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>
   );
 }
diff --git a/packages/react/src/generators/host/files/common-ts/src/main.ts__tmpl__ b/packages/react/src/generators/host/files/common-ts/src/main.ts__tmpl__
index a4061a83eab54..28b8cfb24dcb8 100644
--- a/packages/react/src/generators/host/files/common-ts/src/main.ts__tmpl__
+++ b/packages/react/src/generators/host/files/common-ts/src/main.ts__tmpl__
@@ -1,10 +1,10 @@
-<% if (dynamic) { %>
-    import { setRemoteDefinitions } from '@nx/react/mf';
+<%_ 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));
-<% } %>
\ No newline at end of file
+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));
+<%_ } _%>
\ No newline at end of file
diff --git a/packages/react/src/generators/host/files/common/src/app/__fileName__.js__tmpl__ b/packages/react/src/generators/host/files/common/src/app/__fileName__.js__tmpl__
index 00edc49cc2d87..8252e92801c59 100644
--- a/packages/react/src/generators/host/files/common/src/app/__fileName__.js__tmpl__
+++ b/packages/react/src/generators/host/files/common/src/app/__fileName__.js__tmpl__
@@ -1,31 +1,31 @@
 import * as React from 'react';
-<% if (!minimal) { %>
+<%_ if (!minimal) { _%>
 import NxWelcome from "./nx-welcome";
-<% } %>
+<%_ } _%>
 import { Link, Route, Routes } from 'react-router-dom';
 
-<% if (remotes.length > 0) { %>
-<% remotes.forEach(function(r) { %>
- const <%= r.className %> = React.lazy(() => import('<%= r.fileName %>/Module'));
- <% }); %>
+<%_ if (remotes.length > 0) {
+  remotes.forEach(function(r) { _%>
+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>
+      <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>
   );
 }
diff --git a/packages/react/src/generators/host/files/common/src/main.js__tmpl__ b/packages/react/src/generators/host/files/common/src/main.js__tmpl__
index a4061a83eab54..f68313e1f932e 100644
--- a/packages/react/src/generators/host/files/common/src/main.js__tmpl__
+++ b/packages/react/src/generators/host/files/common/src/main.js__tmpl__
@@ -1,10 +1,10 @@
-<% if (dynamic) { %>
-    import { setRemoteDefinitions } from '@nx/react/mf';
+<%_ 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));
-<% } %>
\ No newline at end of file
+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));
+<%_ } _%>
\ No newline at end of file
diff --git a/packages/react/src/generators/host/files/rspack-common/src/app/__fileName__.jsx__tmpl__ b/packages/react/src/generators/host/files/rspack-common/src/app/__fileName__.jsx__tmpl__
index 00edc49cc2d87..e0da5bf8c8945 100644
--- a/packages/react/src/generators/host/files/rspack-common/src/app/__fileName__.jsx__tmpl__
+++ b/packages/react/src/generators/host/files/rspack-common/src/app/__fileName__.jsx__tmpl__
@@ -1,30 +1,30 @@
 import * as React from 'react';
-<% if (!minimal) { %>
+<%_ if (!minimal) { _%>
 import NxWelcome from "./nx-welcome";
-<% } %>
+<%_ } _%>
 import { Link, Route, Routes } from 'react-router-dom';
 
-<% if (remotes.length > 0) { %>
-<% remotes.forEach(function(r) { %>
- const <%= r.className %> = React.lazy(() => import('<%= r.fileName %>/Module'));
- <% }); %>
-<% } %>
+<% if (remotes.length > 0) {
+  remotes.forEach(function(r) { %>
+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) { %>
+       <%_ remotes.forEach(function(r) { _%>
          <li><Link to="/<%=r.fileName%>"><%=r.className%></Link></li>
-       <% }); %>
+       <%_ }); _%>
      </ul>
      <Routes>
-       <% if (!minimal) { %>
+       <%_ if (!minimal) { _%>
        <Route path="/" element={<NxWelcome title="<%= projectName %>"/>} />
-       <% } %>
-       <% remotes.forEach(function(r) { %>
+       <%_ } _%>
+       <%_ remotes.forEach(function(r) { _%>
          <Route path="/<%=r.fileName%>" element={<<%= r.className %>/>} />
-       <% }); %>
+       <%_ }); _%>
      </Routes>
     </React.Suspense>
   );
diff --git a/packages/react/src/generators/host/files/rspack-common/src/main.jsx__tmpl__ b/packages/react/src/generators/host/files/rspack-common/src/main.jsx__tmpl__
index a4061a83eab54..f68313e1f932e 100644
--- a/packages/react/src/generators/host/files/rspack-common/src/main.jsx__tmpl__
+++ b/packages/react/src/generators/host/files/rspack-common/src/main.jsx__tmpl__
@@ -1,10 +1,10 @@
-<% if (dynamic) { %>
-    import { setRemoteDefinitions } from '@nx/react/mf';
+<%_ 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));
-<% } %>
\ No newline at end of file
+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));
+<%_ } _%>
\ No newline at end of file
diff --git a/packages/react/src/generators/host/files/rspack-module-federation-ssr-ts/module-federation.server.config.ts__tmpl__ b/packages/react/src/generators/host/files/rspack-module-federation-ssr-ts/module-federation.server.config.ts__tmpl__
index 6ce651ac3acb5..b5a5af31a8d85 100644
--- a/packages/react/src/generators/host/files/rspack-module-federation-ssr-ts/module-federation.server.config.ts__tmpl__
+++ b/packages/react/src/generators/host/files/rspack-module-federation-ssr-ts/module-federation.server.config.ts__tmpl__
@@ -1,12 +1,12 @@
 import { ModuleFederationConfig } from '@nx/rspack/module-federation';
 
 const config: ModuleFederationConfig = {
-    name: '<%= projectName %>',
-    remotes: [
-      <% if (static) { 
-         remotes.forEach(function(r) { %> "<%= r.fileName %>", <% }); 
-       }
-    %>
+  name: '<%= projectName %>',
+  remotes: [
+    <%_ if (static) { 
+      remotes.forEach(function(r) { _%>
+    "<%= r.fileName %>", 
+      <%_ }); } _%>
   ],
 };
 
diff --git a/packages/react/src/generators/host/files/rspack-module-federation-ssr-ts/rspack.server.config.ts__tmpl__ b/packages/react/src/generators/host/files/rspack-module-federation-ssr-ts/rspack.server.config.ts__tmpl__
index 7200fe9de12f1..0d7fb7aa31842 100644
--- a/packages/react/src/generators/host/files/rspack-module-federation-ssr-ts/rspack.server.config.ts__tmpl__
+++ b/packages/react/src/generators/host/files/rspack-module-federation-ssr-ts/rspack.server.config.ts__tmpl__
@@ -4,7 +4,7 @@ import {withModuleFederationForSSR} from '@nx/rspack/module-federation';
 import baseConfig from './module-federation.config';
 
 const defaultConfig = {
-    ...baseConfig
+  ...baseConfig
 };
 
 // Nx plugins for rspack to build config object from Nx options and context.
diff --git a/packages/react/src/generators/host/files/rspack-module-federation-ssr/module-federation.server.config.js__tmpl__ b/packages/react/src/generators/host/files/rspack-module-federation-ssr/module-federation.server.config.js__tmpl__
index 0c08f62f765fb..d15b2cd4b6486 100644
--- a/packages/react/src/generators/host/files/rspack-module-federation-ssr/module-federation.server.config.js__tmpl__
+++ b/packages/react/src/generators/host/files/rspack-module-federation-ssr/module-federation.server.config.js__tmpl__
@@ -6,10 +6,12 @@
 const moduleFederationConfig = {
     name: '<%= projectName %>',
     remotes: [
-       <% if (static) { 
-         remotes.forEach(function(r) { %> "<%= r.fileName %>", <% }); 
-       }
-    %>
+      <%_ if (static) { 
+        remotes.forEach(function(r) { _%> 
+      "<%= r.fileName %>",
+        <%_ }); 
+      }
+    _%>
   ],
 };
 
diff --git a/packages/react/src/generators/host/files/rspack-module-federation-ssr/rspack.server.config.js__tmpl__ b/packages/react/src/generators/host/files/rspack-module-federation-ssr/rspack.server.config.js__tmpl__
index 931aa3bac016a..724e6f0c4aabb 100644
--- a/packages/react/src/generators/host/files/rspack-module-federation-ssr/rspack.server.config.js__tmpl__
+++ b/packages/react/src/generators/host/files/rspack-module-federation-ssr/rspack.server.config.js__tmpl__
@@ -4,7 +4,7 @@ const {withModuleFederationForSSR} = require('@nx/rspack/module-federation');
 const baseConfig = require('./module-federation.config');
 
 const defaultConfig = {
-    ...baseConfig
+	...baseConfig
 };
 
 // Nx plugins for rspack to build config object from Nx options and context.
diff --git a/packages/react/src/generators/host/files/rspack-module-federation-ts/module-federation.config.ts__tmpl__ b/packages/react/src/generators/host/files/rspack-module-federation-ts/module-federation.config.ts__tmpl__
index cd866449770d1..49b05d3f938a3 100644
--- a/packages/react/src/generators/host/files/rspack-module-federation-ts/module-federation.config.ts__tmpl__
+++ b/packages/react/src/generators/host/files/rspack-module-federation-ts/module-federation.config.ts__tmpl__
@@ -1,24 +1,24 @@
 import { ModuleFederationConfig } from '@nx/rspack/module-federation';
 
 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: [
-            <% if (static) { 
-         remotes.forEach(function(r) { %> "<%= r.fileName %>", <% }); 
-       }
-    %>
+  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: [
+    <%_ if (static) { 
+        remotes.forEach(function(r) { _%> 
+    "<%= r.fileName %>", 
+    <%_ }); } _%>
   ],
 };
 
diff --git a/packages/react/src/generators/host/files/rspack-module-federation-ts/rspack.config.prod.ts__tmpl__ b/packages/react/src/generators/host/files/rspack-module-federation-ts/rspack.config.prod.ts__tmpl__
index 14798436c629a..270951c48a44c 100644
--- a/packages/react/src/generators/host/files/rspack-module-federation-ts/rspack.config.prod.ts__tmpl__
+++ b/packages/react/src/generators/host/files/rspack-module-federation-ts/rspack.config.prod.ts__tmpl__
@@ -4,27 +4,29 @@ import { withModuleFederation, ModuleFederationConfig } from '@nx/rspack/module-
 import baseConfig from './module-federation.config';
 
 const prodConfig: ModuleFederationConfig = {
-    ...baseConfig,
-    /*
-     * Remote overrides for production.
-     * Each entry is a pair of a unique name and the URL where it is deployed.
-     *
-     * e.g.
-     * remotes: [
-     *   ['app1', 'http://app1.example.com'],
-     *   ['app2', 'http://app2.example.com'],
-     * ]
-     *
-     * You can also use a full path to the remoteEntry.js file if desired.
-     *
-     * remotes: [
-     *   ['app1', 'http://example.com/path/to/app1/remoteEntry.js'],
-     *   ['app2', 'http://example.com/path/to/app2/remoteEntry.js'],
-     * ]
-     */
-    remotes: [
-        <% remotes.forEach(function(r) {%>['<%= r.fileName %>', 'http://localhost:<%= r.port %>/'],<% }); %>
-],
+	...baseConfig,
+	/*
+		* Remote overrides for production.
+		* Each entry is a pair of a unique name and the URL where it is deployed.
+		*
+		* e.g.
+		* remotes: [
+		*   ['app1', 'http://app1.example.com'],
+		*   ['app2', 'http://app2.example.com'],
+		* ]
+		*
+		* You can also use a full path to the remoteEntry.js file if desired.
+		*
+		* remotes: [
+		*   ['app1', 'http://example.com/path/to/app1/remoteEntry.js'],
+		*   ['app2', 'http://example.com/path/to/app2/remoteEntry.js'],
+		* ]
+		*/
+	remotes: [
+		<%_ remotes.forEach(function(r) { _%>
+		['<%= r.fileName %>', 'http://localhost:<%= r.port %>/'],
+		<%_ }); _%>
+	],
 };
 
 // Nx plugins for rspack to build config object from Nx options and context.
diff --git a/packages/react/src/generators/host/files/rspack-module-federation-ts/rspack.config.ts__tmpl__ b/packages/react/src/generators/host/files/rspack-module-federation-ts/rspack.config.ts__tmpl__
index 25f9c67bce66f..367dcd894c87c 100644
--- a/packages/react/src/generators/host/files/rspack-module-federation-ts/rspack.config.ts__tmpl__
+++ b/packages/react/src/generators/host/files/rspack-module-federation-ts/rspack.config.ts__tmpl__
@@ -4,7 +4,7 @@ import {withModuleFederation, ModuleFederationConfig} from '@nx/rspack/module-fe
 import baseConfig from './module-federation.config';
 
 const config: ModuleFederationConfig = {
-    ...baseConfig,
+  ...baseConfig,
 };
 
 // Nx plugins for rspack to build config object from Nx options and context.
diff --git a/packages/react/src/generators/host/files/rspack-module-federation/module-federation.config.js__tmpl__ b/packages/react/src/generators/host/files/rspack-module-federation/module-federation.config.js__tmpl__
index fab2be0f32486..cd97ad36fb5d8 100644
--- a/packages/react/src/generators/host/files/rspack-module-federation/module-federation.config.js__tmpl__
+++ b/packages/react/src/generators/host/files/rspack-module-federation/module-federation.config.js__tmpl__
@@ -16,9 +16,9 @@ module.exports = {
    *
    */
   remotes: [
-    <% if (static) { 
-         remotes.forEach(function(r) { %> "<%= r.fileName %>", <% }); 
-       }
-    %>
+    <%_ if (static) { 
+      remotes.forEach(function(r) { %> 
+    "<%= r.fileName %>", 
+      <%_ }); } _%>
   ],
 };
diff --git a/packages/react/src/generators/host/files/rspack-module-federation/rspack.config.prod.js__tmpl__ b/packages/react/src/generators/host/files/rspack-module-federation/rspack.config.prod.js__tmpl__
index b3a45249e0e86..ae08aecf78e7f 100644
--- a/packages/react/src/generators/host/files/rspack-module-federation/rspack.config.prod.js__tmpl__
+++ b/packages/react/src/generators/host/files/rspack-module-federation/rspack.config.prod.js__tmpl__
@@ -23,7 +23,9 @@ const prodConfig = {
      * ]
      */
     remotes: [
-      <% remotes.forEach(function(r) {%>['<%= r.fileName %>', 'http://localhost:<%= r.port %>/'],<% }); %>
+    <%_ remotes.forEach(function(r) { _%>
+    ['<%= r.fileName %>', 'http://localhost:<%= r.port %>/'],
+    <%_ }); _%>
     ],
 };
 
diff --git a/packages/react/src/generators/host/files/webpack-module-federation-ssr-ts/module-federation.server.config.ts__tmpl__ b/packages/react/src/generators/host/files/webpack-module-federation-ssr-ts/module-federation.server.config.ts__tmpl__
index 7b9730996c03e..2c77021c886b8 100644
--- a/packages/react/src/generators/host/files/webpack-module-federation-ssr-ts/module-federation.server.config.ts__tmpl__
+++ b/packages/react/src/generators/host/files/webpack-module-federation-ssr-ts/module-federation.server.config.ts__tmpl__
@@ -1,12 +1,12 @@
 import { ModuleFederationConfig } from '@nx/webpack';
 
 const config: ModuleFederationConfig = {
-    name: '<%= projectName %>',
-    remotes: [
-      <% if (static) { 
-         remotes.forEach(function(r) { %> "<%= r.fileName %>", <% }); 
-       }
-    %>
+  name: '<%= projectName %>',
+  remotes: [
+    <%_ if (static) { 
+        remotes.forEach(function(r) { _%> 
+    "<%= r.fileName %>", 
+    <%_ }); } _%>
   ],
 };
 
diff --git a/packages/react/src/generators/host/files/webpack-module-federation-ssr-ts/webpack.server.config.ts__tmpl__ b/packages/react/src/generators/host/files/webpack-module-federation-ssr-ts/webpack.server.config.ts__tmpl__
index 811978b1ca7a6..2388154cc15b6 100644
--- a/packages/react/src/generators/host/files/webpack-module-federation-ssr-ts/webpack.server.config.ts__tmpl__
+++ b/packages/react/src/generators/host/files/webpack-module-federation-ssr-ts/webpack.server.config.ts__tmpl__
@@ -5,7 +5,7 @@ import {withModuleFederationForSSR} from '@nx/react/module-federation';
 import baseConfig from './module-federation.config';
 
 const defaultConfig = {
-    ...baseConfig
+  ...baseConfig
 };
 
 // Nx plugins for webpack to build config object from Nx options and context.
diff --git a/packages/react/src/generators/host/files/webpack-module-federation-ssr/module-federation.server.config.js__tmpl__ b/packages/react/src/generators/host/files/webpack-module-federation-ssr/module-federation.server.config.js__tmpl__
index 7e902a654be47..539b086da5974 100644
--- a/packages/react/src/generators/host/files/webpack-module-federation-ssr/module-federation.server.config.js__tmpl__
+++ b/packages/react/src/generators/host/files/webpack-module-federation-ssr/module-federation.server.config.js__tmpl__
@@ -4,12 +4,12 @@
  * @type {import('@nx/webpack').ModuleFederationConfig}
  **/
 const moduleFederationConfig = {
-    name: '<%= projectName %>',
-    remotes: [
-       <% if (static) { 
-         remotes.forEach(function(r) { %> "<%= r.fileName %>", <% }); 
-       }
-    %>
+  name: '<%= projectName %>',
+  remotes: [
+    <%_ if (static) { 
+      remotes.forEach(function(r) { _%> 
+    "<%= r.fileName %>", 
+      <%_ }); } _%>
   ],
 };
 
diff --git a/packages/react/src/generators/host/files/webpack-module-federation-ssr/webpack.server.config.js__tmpl__ b/packages/react/src/generators/host/files/webpack-module-federation-ssr/webpack.server.config.js__tmpl__
index 62f1362b44df9..93a23c66de1b6 100644
--- a/packages/react/src/generators/host/files/webpack-module-federation-ssr/webpack.server.config.js__tmpl__
+++ b/packages/react/src/generators/host/files/webpack-module-federation-ssr/webpack.server.config.js__tmpl__
@@ -5,7 +5,7 @@ const {withModuleFederationForSSR} = require('@nx/react/module-federation');
 const baseConfig = require('./module-federation.config');
 
 const defaultConfig = {
-    ...baseConfig
+	...baseConfig
 };
 
 // Nx plugins for webpack to build config object from Nx options and context.
diff --git a/packages/react/src/generators/host/files/webpack-module-federation-ts/module-federation.config.ts__tmpl__ b/packages/react/src/generators/host/files/webpack-module-federation-ts/module-federation.config.ts__tmpl__
index 290c25ecaa88c..f6789084eb40d 100644
--- a/packages/react/src/generators/host/files/webpack-module-federation-ts/module-federation.config.ts__tmpl__
+++ b/packages/react/src/generators/host/files/webpack-module-federation-ts/module-federation.config.ts__tmpl__
@@ -1,24 +1,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: [
-            <% if (static) { 
-         remotes.forEach(function(r) { %> "<%= r.fileName %>", <% }); 
-       }
-    %>
+  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: [
+    <%_ if (static) { 
+      remotes.forEach(function(r) { _%> 
+    "<%= r.fileName %>", 
+    <%_ }); } _%>
   ],
 };
 
diff --git a/packages/react/src/generators/host/files/webpack-module-federation-ts/webpack.config.prod.ts__tmpl__ b/packages/react/src/generators/host/files/webpack-module-federation-ts/webpack.config.prod.ts__tmpl__
index db79cf011da5c..50dc4835f7703 100644
--- a/packages/react/src/generators/host/files/webpack-module-federation-ts/webpack.config.prod.ts__tmpl__
+++ b/packages/react/src/generators/host/files/webpack-module-federation-ts/webpack.config.prod.ts__tmpl__
@@ -6,27 +6,29 @@ import { ModuleFederationConfig } from '@nx/webpack';
 import baseConfig from './module-federation.config';
 
 const prodConfig: ModuleFederationConfig = {
-    ...baseConfig,
-    /*
-     * Remote overrides for production.
-     * Each entry is a pair of a unique name and the URL where it is deployed.
-     *
-     * e.g.
-     * remotes: [
-     *   ['app1', 'http://app1.example.com'],
-     *   ['app2', 'http://app2.example.com'],
-     * ]
-     *
-     * You can also use a full path to the remoteEntry.js file if desired.
-     *
-     * remotes: [
-     *   ['app1', 'http://example.com/path/to/app1/remoteEntry.js'],
-     *   ['app2', 'http://example.com/path/to/app2/remoteEntry.js'],
-     * ]
-     */
-    remotes: [
-        <% remotes.forEach(function(r) {%>['<%= r.fileName %>', 'http://localhost:<%= r.port %>/'],<% }); %>
-],
+  ...baseConfig,
+  /*
+    * Remote overrides for production.
+    * Each entry is a pair of a unique name and the URL where it is deployed.
+    *
+    * e.g.
+    * remotes: [
+    *   ['app1', 'http://app1.example.com'],
+    *   ['app2', 'http://app2.example.com'],
+    * ]
+    *
+    * You can also use a full path to the remoteEntry.js file if desired.
+    *
+    * remotes: [
+    *   ['app1', 'http://example.com/path/to/app1/remoteEntry.js'],
+    *   ['app2', 'http://example.com/path/to/app2/remoteEntry.js'],
+    * ]
+    */
+  remotes: [
+    <%_ remotes.forEach(function(r) { _%>
+    ['<%= r.fileName %>', 'http://localhost:<%= r.port %>/'],
+    <%_ }); _%>
+  ],
 };
 
 // Nx plugins for webpack to build config object from Nx options and context.
diff --git a/packages/react/src/generators/host/files/webpack-module-federation-ts/webpack.config.ts__tmpl__ b/packages/react/src/generators/host/files/webpack-module-federation-ts/webpack.config.ts__tmpl__
index a6aabc079ec95..5812a3c9a099c 100644
--- a/packages/react/src/generators/host/files/webpack-module-federation-ts/webpack.config.ts__tmpl__
+++ b/packages/react/src/generators/host/files/webpack-module-federation-ts/webpack.config.ts__tmpl__
@@ -5,7 +5,7 @@ import {withModuleFederation} from '@nx/react/module-federation';
 import baseConfig from './module-federation.config';
 
 const config: ModuleFederationConfig = {
-    ...baseConfig,
+  ...baseConfig,
 };
 
 // Nx plugins for webpack to build config object from Nx options and context.
diff --git a/packages/react/src/generators/host/files/webpack-module-federation/module-federation.config.js__tmpl__ b/packages/react/src/generators/host/files/webpack-module-federation/module-federation.config.js__tmpl__
index fab2be0f32486..397fb718270bc 100644
--- a/packages/react/src/generators/host/files/webpack-module-federation/module-federation.config.js__tmpl__
+++ b/packages/react/src/generators/host/files/webpack-module-federation/module-federation.config.js__tmpl__
@@ -16,9 +16,9 @@ module.exports = {
    *
    */
   remotes: [
-    <% if (static) { 
-         remotes.forEach(function(r) { %> "<%= r.fileName %>", <% }); 
-       }
-    %>
+    <%_ if (static) { 
+      remotes.forEach(function(r) { _%> 
+    "<%= r.fileName %>", 
+      <%_ }); } _%>
   ],
 };
diff --git a/packages/react/src/generators/host/files/webpack-module-federation/webpack.config.prod.js__tmpl__ b/packages/react/src/generators/host/files/webpack-module-federation/webpack.config.prod.js__tmpl__
index 06f91eb820872..cf879affc167d 100644
--- a/packages/react/src/generators/host/files/webpack-module-federation/webpack.config.prod.js__tmpl__
+++ b/packages/react/src/generators/host/files/webpack-module-federation/webpack.config.prod.js__tmpl__
@@ -5,27 +5,29 @@ const { withModuleFederation } = require('@nx/react/module-federation');
 const baseConfig = require('./module-federation.config');
 
 const prodConfig = {
-    ...baseConfig,
-    /*
-     * Remote overrides for production.
-     * Each entry is a pair of a unique name and the URL where it is deployed.
-     *
-     * e.g.
-     * remotes: [
-     *   ['app1', 'http://app1.example.com'],
-     *   ['app2', 'http://app2.example.com'],
-     * ]
-     *
-     * You can also use a full path to the remoteEntry.js file if desired.
-     *
-     * remotes: [
-     *   ['app1', 'http://example.com/path/to/app1/remoteEntry.js'],
-     *   ['app2', 'http://example.com/path/to/app2/remoteEntry.js'],
-     * ]
-     */
-    remotes: [
-      <% remotes.forEach(function(r) {%>['<%= r.fileName %>', 'http://localhost:<%= r.port %>/'],<% }); %>
-    ],
+  ...baseConfig,
+  /*
+    * Remote overrides for production.
+    * Each entry is a pair of a unique name and the URL where it is deployed.
+    *
+    * e.g.
+    * remotes: [
+    *   ['app1', 'http://app1.example.com'],
+    *   ['app2', 'http://app2.example.com'],
+    * ]
+    *
+    * You can also use a full path to the remoteEntry.js file if desired.
+    *
+    * remotes: [
+    *   ['app1', 'http://example.com/path/to/app1/remoteEntry.js'],
+    *   ['app2', 'http://example.com/path/to/app2/remoteEntry.js'],
+    * ]
+    */
+  remotes: [
+    <%_ remotes.forEach(function(r) { _%>
+    ['<%= r.fileName %>', 'http://localhost:<%= r.port %>/'],
+    <%_ }); _%>
+  ],
 };
 
 // Nx plugins for webpack to build config object from Nx options and context.
diff --git a/packages/react/src/generators/library/files/common/tsconfig.lib.json__tmpl__ b/packages/react/src/generators/library/files/common/tsconfig.lib.json__tmpl__
index 3a3cd9a846b36..07396ad8a0a0a 100644
--- a/packages/react/src/generators/library/files/common/tsconfig.lib.json__tmpl__
+++ b/packages/react/src/generators/library/files/common/tsconfig.lib.json__tmpl__
@@ -4,7 +4,7 @@
     "outDir": "<%= offsetFromRoot %>dist/out-tsc",
     "types": [
       "node",
-      <% if (style === 'styled-jsx') { %>"@nx/react/typings/styled-jsx.d.ts",<% } %>
+      <%_ if (style === 'styled-jsx') { %>"@nx/react/typings/styled-jsx.d.ts",<% } _%>
       "@nx/react/typings/cssmodule.d.ts",
       "@nx/react/typings/image.d.ts"
     ]
diff --git a/packages/react/src/generators/library/files/vite/tsconfig.lib.json__tmpl__ b/packages/react/src/generators/library/files/vite/tsconfig.lib.json__tmpl__
index a42800faca63e..27f07b1327fd5 100644
--- a/packages/react/src/generators/library/files/vite/tsconfig.lib.json__tmpl__
+++ b/packages/react/src/generators/library/files/vite/tsconfig.lib.json__tmpl__
@@ -4,7 +4,7 @@
     "outDir": "<%= offsetFromRoot %>dist/out-tsc",
     "types": [
       "node",
-      <% if (style === 'styled-jsx') { %>"@nx/react/typings/styled-jsx.d.ts",<% } %>
+      <%_ if (style === 'styled-jsx') { _%>"@nx/react/typings/styled-jsx.d.ts",<%_ } _%>
       "@nx/react/typings/cssmodule.d.ts",
       "@nx/react/typings/image.d.ts"
     ]
diff --git a/packages/react/src/generators/remote/__snapshots__/remote.rspack.spec.ts.snap b/packages/react/src/generators/remote/__snapshots__/remote.rspack.spec.ts.snap
index 8982659954a23..cb83553beb289 100644
--- a/packages/react/src/generators/remote/__snapshots__/remote.rspack.spec.ts.snap
+++ b/packages/react/src/generators/remote/__snapshots__/remote.rspack.spec.ts.snap
@@ -27,11 +27,10 @@ exports[`remote generator bundler=rspack should create the remote with the corre
 * Nx requires a default export of the config to allow correct resolution of the module federation graph.
 **/
 module.exports = {
-   name: 'test',
-   
-   exposes: {
-     './Module': './src/remote-entry.ts',
-   },
+  name: 'test',
+  exposes: {
+    './Module': './src/remote-entry.ts',
+  },
 };
 "
 `;
@@ -63,11 +62,10 @@ exports[`remote generator bundler=rspack should create the remote with the corre
 * Nx requires a default export of the config to allow correct resolution of the module federation graph.
 **/
 module.exports = {
-   name: 'test',
-   
-   exposes: {
-     './Module': './src/remote-entry.js',
-   },
+  name: 'test',
+  exposes: {
+    './Module': './src/remote-entry.js',
+  },
 };
 "
 `;
@@ -106,7 +104,6 @@ exports[`remote generator bundler=rspack should create the remote with the corre
 
 const config: ModuleFederationConfig = {
   name: 'test',
-
   exposes: {
     './Module': './src/remote-entry.ts',
   },
@@ -126,7 +123,7 @@ const {withModuleFederationForSSR} = require('@nx/rspack/module-federation');
 const baseConfig = require("./module-federation.server.config");
 
 const defaultConfig = {
-    ...baseConfig,
+  ...baseConfig,
 };
 
 // Nx plugins for rspack to build config object from Nx options and context.
@@ -144,10 +141,10 @@ exports[`remote generator bundler=rspack should generate correct remote with con
 * Nx requires a default export of the config to allow correct resolution of the module federation graph.
 **/
 module.exports = {
-    name: 'test',
-   exposes: {
-     './Module': './src/remote-entry.ts',
-   },
+  name: 'test',
+  exposes: {
+    './Module': './src/remote-entry.ts',
+  },
 };
 "
 `;
diff --git a/packages/react/src/generators/remote/__snapshots__/remote.webpack.spec.ts.snap b/packages/react/src/generators/remote/__snapshots__/remote.webpack.spec.ts.snap
index 1f59c12295219..3f8c0446282d5 100644
--- a/packages/react/src/generators/remote/__snapshots__/remote.webpack.spec.ts.snap
+++ b/packages/react/src/generators/remote/__snapshots__/remote.webpack.spec.ts.snap
@@ -28,11 +28,10 @@ exports[`remote generator bundler=webpack should create the remote with the corr
 * Nx requires a default export of the config to allow correct resolution of the module federation graph.
 **/
 module.exports = {
-   name: 'test',
-   
-   exposes: {
-     './Module': './src/remote-entry.ts',
-   },
+  name: 'test',
+  exposes: {
+    './Module': './src/remote-entry.ts',
+  },
 };
 "
 `;
@@ -65,11 +64,10 @@ exports[`remote generator bundler=webpack should create the remote with the corr
 * Nx requires a default export of the config to allow correct resolution of the module federation graph.
 **/
 module.exports = {
-   name: 'test',
-   
-   exposes: {
-     './Module': './src/remote-entry.js',
-   },
+  name: 'test',
+  exposes: {
+    './Module': './src/remote-entry.js',
+  },
 };
 "
 `;
@@ -109,7 +107,6 @@ exports[`remote generator bundler=webpack should create the remote with the corr
 
 const config: ModuleFederationConfig = {
   name: 'test',
-
   exposes: {
     './Module': './src/remote-entry.ts',
   },
@@ -130,7 +127,7 @@ const {withModuleFederationForSSR} = require('@nx/react/module-federation');
 const baseConfig = require("./module-federation.server.config");
 
 const defaultConfig = {
-    ...baseConfig,
+  ...baseConfig,
 };
 
 // Nx plugins for webpack to build config object from Nx options and context.
@@ -148,10 +145,10 @@ exports[`remote generator bundler=webpack should generate correct remote with co
 * Nx requires a default export of the config to allow correct resolution of the module federation graph.
 **/
 module.exports = {
-    name: 'test',
-   exposes: {
-     './Module': 'test/src/remote-entry.ts',
-   },
+  name: 'test',
+  exposes: {
+    './Module': 'test/src/remote-entry.ts',
+  },
 };
 "
 `;
diff --git a/packages/react/src/generators/remote/files/rspack-module-federation-ssr-ts/module-federation.server.config.ts__tmpl__ b/packages/react/src/generators/remote/files/rspack-module-federation-ssr-ts/module-federation.server.config.ts__tmpl__
index c201c20af9efa..a005c2edd9545 100644
--- a/packages/react/src/generators/remote/files/rspack-module-federation-ssr-ts/module-federation.server.config.ts__tmpl__
+++ b/packages/react/src/generators/remote/files/rspack-module-federation-ssr-ts/module-federation.server.config.ts__tmpl__
@@ -1,10 +1,10 @@
 import {ModuleFederationConfig} from '@nx/rspack/module-federation';
 
 const config: ModuleFederationConfig = {
-    name: '<%= projectName %>',
-    exposes: {
-        './Module': './src/remote-entry.<%= js ? 'js' : 'ts' %>',
-    },
+  name: '<%= projectName %>',
+  exposes: {
+      './Module': './src/remote-entry.<%= js ? 'js' : 'ts' %>',
+  },
 };
 
 /**
diff --git a/packages/react/src/generators/remote/files/rspack-module-federation-ssr-ts/rspack.server.config.ts__tmpl__ b/packages/react/src/generators/remote/files/rspack-module-federation-ssr-ts/rspack.server.config.ts__tmpl__
index d97d3731ae60f..e28a7ba5917fe 100644
--- a/packages/react/src/generators/remote/files/rspack-module-federation-ssr-ts/rspack.server.config.ts__tmpl__
+++ b/packages/react/src/generators/remote/files/rspack-module-federation-ssr-ts/rspack.server.config.ts__tmpl__
@@ -4,7 +4,7 @@ import {withModuleFederationForSSR} from '@nx/rspack/module-federation';
 import baseConfig from "./module-federation.server.config";
 
 const defaultConfig = {
-    ...baseConfig,
+  ...baseConfig,
 };
 
 // Nx plugins for rspack to build config object from Nx options and context.
diff --git a/packages/react/src/generators/remote/files/rspack-module-federation-ssr/module-federation.server.config.js__tmpl__ b/packages/react/src/generators/remote/files/rspack-module-federation-ssr/module-federation.server.config.js__tmpl__
index c60b14b4f8b34..60cf4a38eb767 100644
--- a/packages/react/src/generators/remote/files/rspack-module-federation-ssr/module-federation.server.config.js__tmpl__
+++ b/packages/react/src/generators/remote/files/rspack-module-federation-ssr/module-federation.server.config.js__tmpl__
@@ -2,8 +2,8 @@
 * Nx requires a default export of the config to allow correct resolution of the module federation graph.
 **/
 module.exports = {
-    name: '<%= projectName %>',
-   exposes: {
-     './Module': './src/remote-entry.<%= js ? 'js' : 'ts' %>',
-   },
+  name: '<%= projectName %>',
+  exposes: {
+    './Module': './src/remote-entry.<%= js ? 'js' : 'ts' %>',
+  },
 };
diff --git a/packages/react/src/generators/remote/files/rspack-module-federation-ssr/rspack.server.config.js__tmpl__ b/packages/react/src/generators/remote/files/rspack-module-federation-ssr/rspack.server.config.js__tmpl__
index 0fad19d265d7b..d645983cc2b61 100644
--- a/packages/react/src/generators/remote/files/rspack-module-federation-ssr/rspack.server.config.js__tmpl__
+++ b/packages/react/src/generators/remote/files/rspack-module-federation-ssr/rspack.server.config.js__tmpl__
@@ -4,7 +4,7 @@ const {withModuleFederationForSSR} = require('@nx/rspack/module-federation');
 const baseConfig = require("./module-federation.server.config");
 
 const defaultConfig = {
-    ...baseConfig,
+  ...baseConfig,
 };
 
 // Nx plugins for rspack to build config object from Nx options and context.
diff --git a/packages/react/src/generators/remote/files/rspack-module-federation-ts/module-federation.config.ts__tmpl__ b/packages/react/src/generators/remote/files/rspack-module-federation-ts/module-federation.config.ts__tmpl__
index 25d81f6305f9f..0e4bb1981afbf 100644
--- a/packages/react/src/generators/remote/files/rspack-module-federation-ts/module-federation.config.ts__tmpl__
+++ b/packages/react/src/generators/remote/files/rspack-module-federation-ts/module-federation.config.ts__tmpl__
@@ -1,13 +1,13 @@
 import {ModuleFederationConfig} from '@nx/rspack/module-federation';
 
 const config: ModuleFederationConfig = {
-    name: '<%= projectName %>',
-    <% if (dynamic) { %>
-   library: { type: 'var', name: '<%= projectName %>'},
-   <% } %>
-    exposes: {
-        './Module': './src/remote-entry.<%= js ? 'js' : 'ts' %>',
-    },
+  name: '<%= projectName %>',
+  <%_ if (dynamic) { _%>
+  library: { type: 'var', name: '<%= projectName %>'},
+  <%_ } _%>
+  exposes: {
+    './Module': './src/remote-entry.<%= js ? 'js' : 'ts' %>',
+  },
 };
 
 /**
diff --git a/packages/react/src/generators/remote/files/rspack-module-federation-ts/rspack.config.ts__tmpl__ b/packages/react/src/generators/remote/files/rspack-module-federation-ts/rspack.config.ts__tmpl__
index 91b3276f5ef55..7d8d925be0c9a 100644
--- a/packages/react/src/generators/remote/files/rspack-module-federation-ts/rspack.config.ts__tmpl__
+++ b/packages/react/src/generators/remote/files/rspack-module-federation-ts/rspack.config.ts__tmpl__
@@ -4,7 +4,7 @@ import {withModuleFederation} from '@nx/rspack/module-federation';
 import baseConfig from './module-federation.config';
 
 const config = {
-    ...baseConfig,
+  ...baseConfig,
 };
 
 // Nx plugins for rspack to build config object from Nx options and context.
diff --git a/packages/react/src/generators/remote/files/rspack-module-federation/module-federation.config.js__tmpl__ b/packages/react/src/generators/remote/files/rspack-module-federation/module-federation.config.js__tmpl__
index 852011cfb9e82..9d75a8bb0f859 100644
--- a/packages/react/src/generators/remote/files/rspack-module-federation/module-federation.config.js__tmpl__
+++ b/packages/react/src/generators/remote/files/rspack-module-federation/module-federation.config.js__tmpl__
@@ -2,11 +2,11 @@
 * Nx requires a default export of the config to allow correct resolution of the module federation graph.
 **/
 module.exports = {
-   name: '<%= projectName %>',
-   <% if (dynamic) { %>
-   library: { type: 'var', name: '<%= projectName %>'},
-   <% } %>
-   exposes: {
-     './Module': './src/remote-entry.<%= js ? 'js' : 'ts' %>',
-   },
+  name: '<%= projectName %>',
+  <%_ if (dynamic) { _%>
+  library: { type: 'var', name: '<%= projectName %>'},
+  <%_ } _%>
+  exposes: {
+    './Module': './src/remote-entry.<%= js ? 'js' : 'ts' %>',
+  },
 };
diff --git a/packages/react/src/generators/remote/files/webpack-module-federation-ssr-ts/module-federation.server.config.ts__tmpl__ b/packages/react/src/generators/remote/files/webpack-module-federation-ssr-ts/module-federation.server.config.ts__tmpl__
index f91e75b4366aa..d631a355c288a 100644
--- a/packages/react/src/generators/remote/files/webpack-module-federation-ssr-ts/module-federation.server.config.ts__tmpl__
+++ b/packages/react/src/generators/remote/files/webpack-module-federation-ssr-ts/module-federation.server.config.ts__tmpl__
@@ -1,10 +1,10 @@
 import {ModuleFederationConfig} from '@nx/webpack';
 
 const config: ModuleFederationConfig = {
-    name: '<%= projectName %>',
-    exposes: {
-        './Module': '<%= appProjectRoot %>/src/remote-entry.<%= js ? 'js' : 'ts' %>',
-    },
+  name: '<%= projectName %>',
+  exposes: {
+    './Module': '<%= appProjectRoot %>/src/remote-entry.<%= js ? 'js' : 'ts' %>',
+  },
 };
 
 /**
diff --git a/packages/react/src/generators/remote/files/webpack-module-federation-ssr-ts/webpack.server.config.ts__tmpl__ b/packages/react/src/generators/remote/files/webpack-module-federation-ssr-ts/webpack.server.config.ts__tmpl__
index 1bcfdeeb3079a..7b9ce041565e6 100644
--- a/packages/react/src/generators/remote/files/webpack-module-federation-ssr-ts/webpack.server.config.ts__tmpl__
+++ b/packages/react/src/generators/remote/files/webpack-module-federation-ssr-ts/webpack.server.config.ts__tmpl__
@@ -5,7 +5,7 @@ import {withModuleFederationForSSR} from '@nx/react/module-federation';
 import baseConfig from "./module-federation.server.config";
 
 const defaultConfig = {
-    ...baseConfig,
+  ...baseConfig,
 };
 
 // Nx plugins for webpack to build config object from Nx options and context.
diff --git a/packages/react/src/generators/remote/files/webpack-module-federation-ssr/module-federation.server.config.js__tmpl__ b/packages/react/src/generators/remote/files/webpack-module-federation-ssr/module-federation.server.config.js__tmpl__
index 3e2b447f9832f..20ee9079ae862 100644
--- a/packages/react/src/generators/remote/files/webpack-module-federation-ssr/module-federation.server.config.js__tmpl__
+++ b/packages/react/src/generators/remote/files/webpack-module-federation-ssr/module-federation.server.config.js__tmpl__
@@ -2,8 +2,8 @@
 * Nx requires a default export of the config to allow correct resolution of the module federation graph.
 **/
 module.exports = {
-    name: '<%= projectName %>',
-   exposes: {
-     './Module': '<%= appProjectRoot %>/src/remote-entry.<%= js ? 'js' : 'ts' %>',
-   },
+  name: '<%= projectName %>',
+  exposes: {
+    './Module': '<%= appProjectRoot %>/src/remote-entry.<%= js ? 'js' : 'ts' %>',
+  },
 };
diff --git a/packages/react/src/generators/remote/files/webpack-module-federation-ssr/webpack.server.config.js__tmpl__ b/packages/react/src/generators/remote/files/webpack-module-federation-ssr/webpack.server.config.js__tmpl__
index 663167da2eda5..e400aa73858c5 100644
--- a/packages/react/src/generators/remote/files/webpack-module-federation-ssr/webpack.server.config.js__tmpl__
+++ b/packages/react/src/generators/remote/files/webpack-module-federation-ssr/webpack.server.config.js__tmpl__
@@ -5,7 +5,7 @@ const {withModuleFederationForSSR} = require('@nx/react/module-federation');
 const baseConfig = require("./module-federation.server.config");
 
 const defaultConfig = {
-    ...baseConfig,
+  ...baseConfig,
 };
 
 // Nx plugins for webpack to build config object from Nx options and context.
diff --git a/packages/react/src/generators/remote/files/webpack-module-federation-ts/module-federation.config.ts__tmpl__ b/packages/react/src/generators/remote/files/webpack-module-federation-ts/module-federation.config.ts__tmpl__
index 0613c7d87fdb1..8c9d9430878cb 100644
--- a/packages/react/src/generators/remote/files/webpack-module-federation-ts/module-federation.config.ts__tmpl__
+++ b/packages/react/src/generators/remote/files/webpack-module-federation-ts/module-federation.config.ts__tmpl__
@@ -1,13 +1,13 @@
 import {ModuleFederationConfig} from '@nx/webpack';
 
 const config: ModuleFederationConfig = {
-    name: '<%= projectName %>',
-    <% if (dynamic) { %>
-   library: { type: 'var', name: '<%= projectName %>'},
-   <% } %>
-    exposes: {
-        './Module': './src/remote-entry.<%= js ? 'js' : 'ts' %>',
-    },
+  name: '<%= projectName %>',
+  <%_ if (dynamic) { _%>
+  library: { type: 'var', name: '<%= projectName %>'},
+  <%_ } _%>
+  exposes: {
+    './Module': './src/remote-entry.<%= js ? 'js' : 'ts' %>',
+  },
 };
 
 /**
diff --git a/packages/react/src/generators/remote/files/webpack-module-federation-ts/webpack.config.ts__tmpl__ b/packages/react/src/generators/remote/files/webpack-module-federation-ts/webpack.config.ts__tmpl__
index 387c262d0d901..f3248eafd7651 100644
--- a/packages/react/src/generators/remote/files/webpack-module-federation-ts/webpack.config.ts__tmpl__
+++ b/packages/react/src/generators/remote/files/webpack-module-federation-ts/webpack.config.ts__tmpl__
@@ -5,7 +5,7 @@ import {withModuleFederation} from '@nx/react/module-federation';
 import baseConfig from './module-federation.config';
 
 const config = {
-    ...baseConfig,
+  ...baseConfig,
 };
 
 // Nx plugins for webpack to build config object from Nx options and context.
diff --git a/packages/react/src/generators/remote/files/webpack-module-federation/module-federation.config.js__tmpl__ b/packages/react/src/generators/remote/files/webpack-module-federation/module-federation.config.js__tmpl__
index 852011cfb9e82..9d75a8bb0f859 100644
--- a/packages/react/src/generators/remote/files/webpack-module-federation/module-federation.config.js__tmpl__
+++ b/packages/react/src/generators/remote/files/webpack-module-federation/module-federation.config.js__tmpl__
@@ -2,11 +2,11 @@
 * Nx requires a default export of the config to allow correct resolution of the module federation graph.
 **/
 module.exports = {
-   name: '<%= projectName %>',
-   <% if (dynamic) { %>
-   library: { type: 'var', name: '<%= projectName %>'},
-   <% } %>
-   exposes: {
-     './Module': './src/remote-entry.<%= js ? 'js' : 'ts' %>',
-   },
+  name: '<%= projectName %>',
+  <%_ if (dynamic) { _%>
+  library: { type: 'var', name: '<%= projectName %>'},
+  <%_ } _%>
+  exposes: {
+    './Module': './src/remote-entry.<%= js ? 'js' : 'ts' %>',
+  },
 };
diff --git a/packages/react/src/generators/stories/__snapshots__/stories.app.spec.ts.snap b/packages/react/src/generators/stories/__snapshots__/stories.app.spec.ts.snap
index 61f2da04d5eff..06ba42f218602 100644
--- a/packages/react/src/generators/stories/__snapshots__/stories.app.spec.ts.snap
+++ b/packages/react/src/generators/stories/__snapshots__/stories.app.spec.ts.snap
@@ -3,7 +3,6 @@
 exports[`react:stories for applications should create the stories with interaction tests 1`] = `
 "import type { Meta, StoryObj } from '@storybook/react';
 import { NxWelcome } from './nx-welcome';
-
 import { within } from '@storybook/testing-library';
 import { expect } from '@storybook/jest';
 
@@ -35,7 +34,6 @@ export const Heading: Story = {
 exports[`react:stories for applications should create the stories with interaction tests 2`] = `
 "import type { Meta, StoryObj } from '@storybook/react';
 import { Test } from './another-cmp';
-
 import { within } from '@storybook/testing-library';
 import { expect } from '@storybook/jest';
 
diff --git a/packages/react/src/generators/stories/__snapshots__/stories.lib.spec.ts.snap b/packages/react/src/generators/stories/__snapshots__/stories.lib.spec.ts.snap
index 4606673a016f0..dac210a67a66f 100644
--- a/packages/react/src/generators/stories/__snapshots__/stories.lib.spec.ts.snap
+++ b/packages/react/src/generators/stories/__snapshots__/stories.lib.spec.ts.snap
@@ -3,7 +3,6 @@
 exports[`react:stories for libraries should create the stories with interaction tests 1`] = `
 "import type { Meta, StoryObj } from '@storybook/react';
 import { TestUiLib } from './test-ui-lib';
-
 import { within } from '@storybook/testing-library';
 import { expect } from '@storybook/jest';
 
@@ -31,7 +30,6 @@ export const Heading: Story = {
 exports[`react:stories for libraries should create the stories with interaction tests 2`] = `
 "import type { Meta, StoryObj } from '@storybook/react';
 import { Test } from './another-cmp';
-
 import { within } from '@storybook/testing-library';
 import { expect } from '@storybook/jest';
 
diff --git a/packages/react/src/generators/storybook-configuration/__snapshots__/configuration.spec.ts.snap b/packages/react/src/generators/storybook-configuration/__snapshots__/configuration.spec.ts.snap
index 8ad33db95233c..baa4f5a82200d 100644
--- a/packages/react/src/generators/storybook-configuration/__snapshots__/configuration.spec.ts.snap
+++ b/packages/react/src/generators/storybook-configuration/__snapshots__/configuration.spec.ts.snap
@@ -32,7 +32,6 @@ export default config;
 exports[`react:storybook-configuration should generate stories for components 1`] = `
 "import type { Meta, StoryObj } from '@storybook/react';
 import { MyComponent } from './my-component';
-
 import { within } from '@storybook/testing-library';
 import { expect } from '@storybook/jest';
 
@@ -59,7 +58,6 @@ export const Heading: Story = {
 
 exports[`react:storybook-configuration should generate stories for components written in plain JS 1`] = `
 "import componentName from './test-ui-libplain';
-
 import { within } from '@storybook/testing-library';
 import { expect } from '@storybook/jest';
 
diff --git a/packages/vue/src/generators/application/__snapshots__/application.spec.ts.snap b/packages/vue/src/generators/application/__snapshots__/application.spec.ts.snap
index 65a1586fb0cc2..84f0aba45dcf7 100644
--- a/packages/vue/src/generators/application/__snapshots__/application.spec.ts.snap
+++ b/packages/vue/src/generators/application/__snapshots__/application.spec.ts.snap
@@ -109,14 +109,12 @@ exports[`application generator should set up project correctly for cypress 3`] =
 
 exports[`application generator should set up project correctly for cypress 4`] = `
 "import { describe, it, expect } from 'vitest';
-
 import { mount } from '@vue/test-utils';
 import App from './App.vue';
 
 describe('App', () => {
   it('renders properly', async () => {
     const wrapper = mount(App, {});
-
     expect(wrapper.text()).toContain('Welcome test 👋');
   });
 });
@@ -255,14 +253,12 @@ exports[`application generator should set up project correctly with given option
 
 exports[`application generator should set up project correctly with given options 4`] = `
 "import { describe, it, expect } from 'vitest';
-
 import { mount } from '@vue/test-utils';
 import App from './App.vue';
 
 describe('App', () => {
   it('renders properly', async () => {
     const wrapper = mount(App, {});
-
     expect(wrapper.text()).toContain('Welcome test 👋');
   });
 });
diff --git a/packages/vue/src/generators/application/files/common/src/app/App.spec.ts.template b/packages/vue/src/generators/application/files/common/src/app/App.spec.ts.template
index e8b016b534175..7003bb5f8b920 100644
--- a/packages/vue/src/generators/application/files/common/src/app/App.spec.ts.template
+++ b/packages/vue/src/generators/application/files/common/src/app/App.spec.ts.template
@@ -1,17 +1,17 @@
-<% if ( unitTestRunner === 'vitest' ) { %>
+<%_ if ( unitTestRunner === 'vitest' ) { _%>
 import { describe, it, expect } from 'vitest'
-<% } %><% if( routing ) { %>
+<%_ } _%><%_ if( routing ) { _%>
 import router from '../router';
-<% } %>
+<%_ } _%>
 import { mount } from '@vue/test-utils'
 import App from './App.vue';
 
 describe('App', () => {
   it('renders properly', async () => {
     const wrapper = mount(App, <% if( routing ) { %>{ global: { plugins: [router] }}<% } else { %>{}<% } %>)
-    <% if( routing ) { %>
+    <%_ if( routing ) { _%>
     await router.isReady();
-    <% } %>
+    <%_ } _%>
     expect(wrapper.text()).toContain('Welcome <%= title %> 👋')
   })
 });
diff --git a/packages/vue/src/generators/application/files/common/src/app/App.vue.template b/packages/vue/src/generators/application/files/common/src/app/App.vue.template
index 17555be9b4fe5..4d153bcacd5cd 100644
--- a/packages/vue/src/generators/application/files/common/src/app/App.vue.template
+++ b/packages/vue/src/generators/application/files/common/src/app/App.vue.template
@@ -1,26 +1,26 @@
 <script setup lang="ts">
-<% if (routing) { %>
+<%_ if (routing) { _%>
 import { RouterLink, RouterView } from 'vue-router';
-<% } else { %>
+<%_ } else { _%>
 import NxWelcome from './NxWelcome.vue';
-<% } %>
+<%_ } _%>
 </script>
 
 <template>
-  <% if (routing) { %>
-    <header>
-      <nav>
-        <RouterLink to="/">Home</RouterLink>
-        <RouterLink to="/about">About</RouterLink>
-      </nav>
-    </header>
+  <%_ if (routing) { _%>
+  <header>
+    <nav>
+      <RouterLink to="/">Home</RouterLink>
+      <RouterLink to="/about">About</RouterLink>
+    </nav>
+  </header>
     <RouterView />
-  <% } else { %>
-    <NxWelcome title="<%= title %>" />
-  <% } %>
+  <%_ } else { _%>
+  <NxWelcome title="<%= title %>" />
+  <%_ } _%>
 </template>
 
-<% if (routing && style !== 'none') { %>
+<%_ if (routing && style !== 'none') { _%>
 <style scoped lang="<%= style %>">
 header {
   line-height: 1.5;
@@ -51,4 +51,4 @@ nav > a {
   }
 }
 </style>
-<% } %>
+<%_ } _%>
diff --git a/packages/vue/src/generators/application/files/common/src/main.ts.template b/packages/vue/src/generators/application/files/common/src/main.ts.template
index fcb106d776dab..9792fee522063 100644
--- a/packages/vue/src/generators/application/files/common/src/main.ts.template
+++ b/packages/vue/src/generators/application/files/common/src/main.ts.template
@@ -1,15 +1,14 @@
-<% if (style !== 'none') { %>
+<%_ if (style !== 'none') { _%>
 import './styles.<%= style %>';
-<% } %>
-<% if (routing) { %>
+<%_ }
+if (routing) { _%>
 import router from './router';
-<% } %>
-
+<%_ } _%>
 import { createApp } from 'vue';
 import App from './app/App.vue';
 
 const app = createApp(App);
-<% if (routing) { %>
+<%_ if (routing) { _%>
 app.use(router);
-<% } %>
+<%_ } _%>
 app.mount('#root');
diff --git a/packages/vue/src/generators/library/__snapshots__/library.spec.ts.snap b/packages/vue/src/generators/library/__snapshots__/library.spec.ts.snap
index e5b5c73389b1e..28f3714208e15 100644
--- a/packages/vue/src/generators/library/__snapshots__/library.spec.ts.snap
+++ b/packages/vue/src/generators/library/__snapshots__/library.spec.ts.snap
@@ -287,12 +287,16 @@ module.exports = [
   {
     files: ['**/*.vue'],
     languageOptions: {
-      parserOptions: { parser: require('@typescript-eslint/parser') },
+      parserOptions: {
+        parser: require('@typescript-eslint/parser'),
+      },
     },
   },
   {
     files: ['**/*.ts', '**/*.tsx', '**/*.js', '**/*.jsx', '**/*.vue'],
-    rules: { 'vue/multi-word-component-names': 'off' },
+    rules: {
+      'vue/multi-word-component-names': 'off',
+    },
   },
 ];
 "