@nx/react 17.2.3 → 17.2.5

package/README.md

@@ -1,4 +1,9 @@
-<p style="text-align: center;"><img src="https://raw.githubusercontent.com/nrwl/nx/master/images/nx.png" width="600" alt="Nx - Smart, Fast and Extensible Build System"></p>
+<p style="text-align: center;">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/nrwl/nx/master/images/nx-dark.svg">
+    <img alt="Nx - Smart Monorepos · Fast CI" src="https://raw.githubusercontent.com/nrwl/nx/master/images/nx-light.svg" width="100%">
+  </picture>
+</p>
 
 <div style="text-align: center;">
 
@@ -15,9 +20,9 @@
 
 <hr>
 
-# Nx: Smart, Fast and Extensible Build System
+# Nx: Smart Monorepos · Fast CI
 
-Nx is a next generation build system with first class monorepo support and powerful integrations.
+Nx is a build system with built-in tooling and advanced CI capabilities. It helps you maintain and scale monorepos, both locally and on CI.
 
 This package is a [React plugin for Nx](https://nx.dev/packages/react).
 
@@ -59,5 +64,5 @@ npx nx@latest init
 - [Blog Posts About Nx](https://blog.nrwl.io/nx/home)
 
 <p style="text-align: center;"><a href="https://nx.dev/#learning-materials" target="_blank" rel="noreferrer"><img src="https://raw.githubusercontent.com/nrwl/nx/master/images/nx-courses-and-videos.svg" 
-width="100%" alt="Nx - Smart, Fast and Extensible Build System"></a></p>
+width="100%" alt="Nx - Smart Monorepos · Fast CI"></a></p>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/react",
-  "version": "17.2.3",
+  "version": "v17.2.5",
   "private": false,
   "description": "The React plugin for Nx contains executors and generators for managing React applications and libraries within an Nx workspace. It provides:\n\n\n- Integration with libraries such as Jest, Cypress, and Storybook.\n\n- Generators for applications, libraries, components, hooks, and more.\n\n- Library build support for publishing packages to npm or other registries.\n\n- Utilities for automatic workspace refactoring.",
   "repository": {
@@ -37,11 +37,11 @@
     "file-loader": "^6.2.0",
     "minimatch": "3.0.5",
     "tslib": "^2.3.0",
-    "@nx/devkit": "17.2.3",
-    "@nx/js": "17.2.3",
-    "@nx/eslint": "17.2.3",
-    "@nx/web": "17.2.3",
-    "@nrwl/react": "17.2.3"
+    "@nx/devkit": "v17.2.5",
+    "@nx/js": "v17.2.5",
+    "@nx/eslint": "v17.2.5",
+    "@nx/web": "v17.2.5",
+    "@nrwl/react": "v17.2.5"
   },
   "publishConfig": {
     "access": "public"

package/plugins/component-testing/index.js

@@ -123,7 +123,6 @@ function withSchemaDefaults(target, context) {
     options.maxWorkers ??= 2;
     options.fileReplacements ??= [];
     options.buildLibsFromSource ??= true;
-    options.generateIndexHtml ??= true;
     return options;
 }
 function buildTargetWebpack(ctx, buildTarget, componentTestingProjectName) {
@@ -141,7 +140,9 @@ function buildTargetWebpack(ctx, buildTarget, componentTestingProjectName) {
     const context = (0, ct_helpers_1.createExecutorContext)(graph, buildableProjectConfig.targets, parsed.project, parsed.target, parsed.target);
     const { normalizeOptions, } = require('@nx/webpack/src/executors/webpack/lib/normalize-options');
     const { resolveUserDefinedWebpackConfig, } = require('@nx/webpack/src/utils/webpack/resolve-user-defined-webpack-config');
+    const { composePluginsSync } = require('@nx/webpack/src/utils/config');
     const { withNx } = require('@nx/webpack/src/utils/with-nx');
+    const { withWeb } = require('@nx/webpack/src/utils/with-web');
     const options = normalizeOptions(withSchemaDefaults(parsed, context), devkit_1.workspaceRoot, buildableProjectConfig.root, buildableProjectConfig.sourceRoot);
     let customWebpack;
     if (options.webpackConfig) {
@@ -151,12 +152,20 @@ function buildTargetWebpack(ctx, buildTarget, componentTestingProjectName) {
     }
     return async () => {
         customWebpack = await customWebpack;
-        // TODO(jack): Once webpackConfig is always set in @nx/webpack:webpack, we no longer need this default.
-        const defaultWebpack = withNx({
-            ...options,
-            root: devkit_1.workspaceRoot,
-            projectRoot: ctProjectConfig.root,
-            sourceRoot: ctProjectConfig.sourceRoot,
+        // TODO(v18): Once webpackConfig is always set in @nx/webpack:webpack and isolatedConfig is removed, we no longer need this default.
+        const configure = composePluginsSync(withNx(), withWeb());
+        const defaultWebpack = configure({}, {
+            options: {
+                ...options,
+                // cypress will generate its own index.html from component-index.html
+                generateIndexHtml: false,
+                // causes issues with buildable libraries with ENOENT: no such file or directory, scandir error
+                extractLicenses: false,
+                root: devkit_1.workspaceRoot,
+                projectRoot: ctProjectConfig.root,
+                sourceRoot: ctProjectConfig.sourceRoot,
+            },
+            context,
         });
         if (customWebpack) {
             return await customWebpack(defaultWebpack, {

package/src/generators/application/files/base-webpack/src/index.html

@@ -3,8 +3,6 @@
   <head>
     <meta charset="utf-8" />
     <title><%= className %></title>
-    <base href="/" />
-
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/x-icon" href="favicon.ico" />
   </head>

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

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

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

@@ -33,6 +33,8 @@ async function normalizeOptions(tree, options) {
     options.routing = options.routing ?? false;
     options.globalCss = options.globalCss ?? false;
     options.inSourceTests = options.inSourceTests ?? false;
+    //TODO (nicholas): Remove when Next page generator is removed
+    options.isNextPage = options.isNextPage ?? false;
     return {
         ...options,
         projectName,

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

@@ -33,6 +33,8 @@ export interface Schema {
   // Used by other wrapping generators to preserve previous behavior
   // e.g. @nx/next:component
   derivedDirectory?: string;
+  // Used by Next.js to determine how React should generate the page
+  isNextPage?: boolean;
 }
 
 export interface NormalizedSchema extends Schema {

package/src/module-federation/with-module-federation.js

@@ -3,16 +3,18 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.withModuleFederation = void 0;
 const utils_1 = require("./utils");
 const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
+const isVarOrWindow = (libType) => libType === 'var' || libType === 'window';
 /**
  * @param {ModuleFederationConfig} options
  * @return {Promise<AsyncNxComposableWebpackPlugin>}
  */
 async function withModuleFederation(options) {
     const { sharedDependencies, sharedLibraries, mappedRemotes } = await (0, utils_1.getModuleFederationConfig)(options);
+    const isGlobal = isVarOrWindow(options.library?.type);
     return (config, ctx) => {
         config.output.uniqueName = options.name;
         config.output.publicPath = 'auto';
-        if (options.library?.type === 'var') {
+        if (isGlobal) {
             config.output.scriptType = 'text/javascript';
         }
         config.optimization = {
@@ -20,7 +22,7 @@ async function withModuleFederation(options) {
         };
         config.experiments = {
             ...config.experiments,
-            outputModule: !(options.library?.type === 'var'),
+            outputModule: !isGlobal,
         };
         config.plugins.push(new ModuleFederationPlugin({
             name: options.name,
@@ -37,7 +39,7 @@ async function withModuleFederation(options) {
              *  { appX: 'appX@http://localhost:3001/remoteEntry.js' }
              *  { appY: 'appY@http://localhost:3002/remoteEntry.js' }
              */
-            ...(options.library?.type === 'var' ? { remoteType: 'script' } : {}),
+            ...(isGlobal ? { remoteType: 'script' } : {}),
         }), sharedLibraries.getReplacementPlugin());
         return config;
     };