@nx/react 17.0.5 → 17.0.6

package/LICENSE

@@ -1,6 +1,6 @@
 (The MIT License)
 
-Copyright (c) 2017-2024 Narwhal Technologies Inc.
+Copyright (c) 2017-2023 Narwhal Technologies Inc.
 
 Permission is hereby granted, free of charge, to any person obtaining
 a copy of this software and associated documentation files (the

package/README.md

@@ -1,9 +1,4 @@
-<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>
+<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>
 
 <div style="text-align: center;">
 
@@ -20,9 +15,9 @@
 
 <hr>
 
-# Nx: Smart Monorepos · Fast CI
+# Nx: Smart, Fast and Extensible Build System
 
-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.
+Nx is a next generation build system with first class monorepo support and powerful integrations.
 
 This package is a [React plugin for Nx](https://nx.dev/packages/react).
 
@@ -64,5 +59,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 Monorepos · Fast CI"></a></p>
+width="100%" alt="Nx - Smart, Fast and Extensible Build System"></a></p>
 

package/generators.json

@@ -37,7 +37,7 @@
       "aliases": ["slice"]
     },
     "storybook-configuration": {
-      "factory": "./src/generators/storybook-configuration/configuration#storybookConfigurationGeneratorInternal",
+      "factory": "./src/generators/storybook-configuration/configuration#storybookConfigurationGenerator",
       "schema": "./src/generators/storybook-configuration/schema.json",
       "description": "Set up storybook for a React app or library.",
       "hidden": false

package/index.d.ts

@@ -19,4 +19,3 @@ export { componentTestGenerator } from './src/generators/component-test/componen
 export { setupTailwindGenerator } from './src/generators/setup-tailwind/setup-tailwind';
 export type { SupportedStyles } from './typings/style';
 export * from './plugins/with-react';
-export { NxReactWebpackPlugin } from './plugins/nx-react-webpack-plugin/nx-react-webpack-plugin';

package/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.NxReactWebpackPlugin = exports.setupTailwindGenerator = exports.componentTestGenerator = exports.cypressComponentConfigGenerator = exports.remoteGenerator = exports.hostGenerator = exports.storybookConfigurationGenerator = exports.storiesGenerator = exports.reduxGenerator = exports.reactInitGenerator = exports.libraryGenerator = exports.componentStoryGenerator = exports.componentCypressGenerator = exports.hookGenerator = exports.componentGenerator = exports.applicationGenerator = exports.reactVersion = exports.reactDomVersion = exports.assertValidStyle = exports.cssInJsDependenciesBabel = exports.extendReactEslintJson = exports.extraEslintDependencies = void 0;
+exports.setupTailwindGenerator = exports.componentTestGenerator = exports.cypressComponentConfigGenerator = exports.remoteGenerator = exports.hostGenerator = exports.storybookConfigurationGenerator = exports.storiesGenerator = exports.reduxGenerator = exports.reactInitGenerator = exports.libraryGenerator = exports.componentStoryGenerator = exports.componentCypressGenerator = exports.hookGenerator = exports.componentGenerator = exports.applicationGenerator = exports.reactVersion = exports.reactDomVersion = exports.assertValidStyle = exports.cssInJsDependenciesBabel = exports.extendReactEslintJson = exports.extraEslintDependencies = void 0;
 const tslib_1 = require("tslib");
 var lint_1 = require("./src/utils/lint");
 Object.defineProperty(exports, "extraEslintDependencies", { enumerable: true, get: function () { return lint_1.extraEslintDependencies; } });
@@ -43,5 +43,3 @@ Object.defineProperty(exports, "componentTestGenerator", { enumerable: true, get
 var setup_tailwind_1 = require("./src/generators/setup-tailwind/setup-tailwind");
 Object.defineProperty(exports, "setupTailwindGenerator", { enumerable: true, get: function () { return setup_tailwind_1.setupTailwindGenerator; } });
 tslib_1.__exportStar(require("./plugins/with-react"), exports);
-var nx_react_webpack_plugin_1 = require("./plugins/nx-react-webpack-plugin/nx-react-webpack-plugin");
-Object.defineProperty(exports, "NxReactWebpackPlugin", { enumerable: true, get: function () { return nx_react_webpack_plugin_1.NxReactWebpackPlugin; } });

package/migrations.json

@@ -47,18 +47,6 @@
       "version": "16.7.0-beta.2",
       "description": "Add @nx/react types to tsconfig types array",
       "implementation": "./src/migrations/update-16-7-0-add-typings/update-16-7-0-add-typings"
-    },
-    "add-module-federation-env-var-to-target-defaults": {
-      "cli": "nx",
-      "version": "18.0.0-beta.0",
-      "description": "Add NX_MF_DEV_SERVER_STATIC_REMOTES to inputs for task hashing when '@nx/webpack:webpack' is used for Module Federation.",
-      "factory": "./src/migrations/update-18-0-0/add-mf-env-var-to-target-defaults"
-    },
-    "fix-target-defaults-for-webpack": {
-      "cli": "nx",
-      "version": "18.1.1-beta.0",
-      "description": "Ensure targetDefaults inputs for task hashing when '@nx/webpack:webpack' is used are correct for Module Federation.",
-      "factory": "./src/migrations/update-18-1-1/fix-target-defaults-inputs"
     }
   },
   "packageJsonUpdates": {
@@ -302,15 +290,6 @@
           "alwaysAddToPackageJson": false
         }
       }
-    },
-    "17.3.0": {
-      "version": "17.3.0-beta.3",
-      "packages": {
-        "@types/node": {
-          "version": "18.16.9",
-          "alwaysAddToPackageJson": false
-        }
-      }
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/react",
-  "version": "17.0.5",
+  "version": "v17.0.6",
   "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": {
@@ -35,13 +35,13 @@
     "@svgr/webpack": "^8.0.1",
     "chalk": "^4.1.0",
     "file-loader": "^6.2.0",
-    "minimatch": "9.0.3",
+    "minimatch": "3.0.5",
     "tslib": "^2.3.0",
-    "@nx/devkit": "17.0.5",
-    "@nx/js": "17.0.5",
-    "@nx/eslint": "17.0.5",
-    "@nx/web": "17.0.5",
-    "@nrwl/react": "17.0.5"
+    "@nx/devkit": "v17.0.6",
+    "@nx/js": "v17.0.6",
+    "@nx/eslint": "v17.0.6",
+    "@nx/web": "v17.0.6",
+    "@nrwl/react": "v17.0.6"
   },
   "publishConfig": {
     "access": "public"

package/plugins/component-testing/index.js

@@ -25,17 +25,12 @@ const path_1 = require("path");
  * @param options override options
  */
 function nxComponentTestingPreset(pathToConfig, options) {
-    const basePresetSettings = (0, cypress_preset_1.nxBaseCypressPreset)(pathToConfig, {
-        testingType: 'component',
-    });
-    if (global.NX_GRAPH_CREATION || global.NX_CYPRESS_INIT_GENERATOR_RUNNING) {
-        // this is only used by plugins, so we don't need the component testing
-        // options, cast to any to avoid type errors
-        return basePresetSettings;
-    }
     const normalizedProjectRootPath = ['.ts', '.js'].some((ext) => pathToConfig.endsWith(ext))
         ? pathToConfig
         : (0, path_1.dirname)(pathToConfig);
+    const basePresetSettings = (0, cypress_preset_1.nxBaseCypressPreset)(pathToConfig, {
+        testingType: 'component',
+    });
     if (options?.bundler === 'vite') {
         return {
             ...basePresetSettings,
@@ -71,31 +66,25 @@ function nxComponentTestingPreset(pathToConfig, options) {
         const ctTargetName = options?.ctTargetName || 'component-test';
         const ctConfigurationName = process.env.NX_CYPRESS_TARGET_CONFIGURATION;
         const ctExecutorContext = (0, ct_helpers_1.createExecutorContext)(graph, ctTargets, ctProjectName, ctTargetName, ctConfigurationName);
-        let buildTarget = options?.buildTarget;
-        if (!buildTarget) {
-            const ctExecutorOptions = (0, devkit_1.readTargetOptions)({
-                project: ctProjectName,
-                target: ctTargetName,
-                configuration: ctConfigurationName,
-            }, ctExecutorContext);
-            buildTarget = ctExecutorOptions.devServerTarget;
-        }
+        const ctExecutorOptions = (0, devkit_1.readTargetOptions)({
+            project: ctProjectName,
+            target: ctTargetName,
+            configuration: ctConfigurationName,
+        }, ctExecutorContext);
+        const buildTarget = ctExecutorOptions.devServerTarget;
         if (!buildTarget) {
             throw new Error(`Unable to find the 'devServerTarget' executor option in the '${ctTargetName}' target of the '${ctProjectName}' project`);
         }
         webpackConfig = buildTargetWebpack(ctExecutorContext, buildTarget, ctProjectName);
     }
     catch (e) {
-        if (e instanceof InvalidExecutorError) {
-            throw e;
-        }
         devkit_1.logger.warn((0, devkit_1.stripIndents) `Unable to build a webpack config with the project graph. 
       Falling back to default webpack config.`);
         devkit_1.logger.warn(e);
         const { buildBaseWebpackConfig } = require('./webpack-fallback');
         webpackConfig = buildBaseWebpackConfig({
             tsConfigPath: findTsConfig(normalizedProjectRootPath),
-            compiler: options?.compiler || 'babel',
+            compiler: 'babel',
         });
     }
     return {
@@ -134,6 +123,7 @@ function withSchemaDefaults(target, context) {
     options.maxWorkers ??= 2;
     options.fileReplacements ??= [];
     options.buildLibsFromSource ??= true;
+    options.generateIndexHtml ??= true;
     return options;
 }
 function buildTargetWebpack(ctx, buildTarget, componentTestingProjectName) {
@@ -148,40 +138,29 @@ function buildTargetWebpack(ctx, buildTarget, componentTestingProjectName) {
     Has component config? ${!!ctProjectConfig}
     `);
     }
-    if (buildableProjectConfig.targets[parsed.target].executor !==
-        '@nx/webpack:webpack') {
-        throw new InvalidExecutorError(`The '${parsed.target}' target of the '${parsed.project}' project is not using the '@nx/webpack:webpack' executor. ` +
-            `Please make sure to use '@nx/webpack:webpack' executor in that target to use Cypress Component Testing.`);
-    }
     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 { resolveCustomWebpackConfig, } = require('@nx/webpack/src/utils/webpack/custom-webpack');
+    const { getWebpackConfig, } = require('@nx/webpack/src/executors/webpack/lib/get-webpack-config');
     const options = normalizeOptions(withSchemaDefaults(parsed, context), devkit_1.workspaceRoot, buildableProjectConfig.root, buildableProjectConfig.sourceRoot);
     let customWebpack;
     if (options.webpackConfig) {
-        customWebpack = resolveUserDefinedWebpackConfig(options.webpackConfig, options.tsConfig.startsWith(context.root)
+        customWebpack = resolveCustomWebpackConfig(options.webpackConfig, options.tsConfig.startsWith(context.root)
             ? options.tsConfig
             : (0, path_1.join)(context.root, options.tsConfig));
     }
     return async () => {
         customWebpack = await customWebpack;
-        // TODO(v19): 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,
+        // TODO(jack): Once webpackConfig is always set in @nx/webpack:webpack, we no longer need this default.
+        const defaultWebpack = getWebpackConfig(context, {
+            ...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,
         });
         if (customWebpack) {
             return await customWebpack(defaultWebpack, {
@@ -213,10 +192,3 @@ function findTsConfig(projectRoot) {
         }
     }
 }
-class InvalidExecutorError extends Error {
-    constructor(message) {
-        super(message);
-        this.message = message;
-        this.name = 'InvalidExecutorError';
-    }
-}

package/plugins/component-testing/webpack-fallback.js

@@ -29,7 +29,7 @@ function buildBaseWebpackConfig({ tsConfigPath = 'tsconfig.cy.json', compiler =
                     type: 'asset',
                     parser: {
                         dataUrlCondition: {
-                            maxSize: 10_000, // 10 kB
+                            maxSize: 10000, // 10 kB
                         },
                     },
                 },

package/plugins/storybook/index.js

@@ -8,9 +8,6 @@ const webpack_1 = require("webpack");
 const merge_plugins_1 = require("./merge-plugins");
 const with_react_1 = require("../with-react");
 const fs_1 = require("fs");
-// Prevent sensitive keys from being bundled when source code uses entire `process.env` object rather than individual keys (e.g. `process.env.NX_FOO`).
-// TODO(v19): BREAKING: Only env vars prefixed with NX_PUBLIC should be bundled. This is a breaking change so we won't do it in v18.
-const excludedKeys = ['NX_CLOUD_ACCESS_TOKEN', 'NX_CLOUD_ENCRYPTION_KEY'];
 // This is shamelessly taken from CRA and modified for NX use
 // https://github.com/facebook/create-react-app/blob/4784997f0682e75eb32a897b4ffe34d735912e6c/packages/react-scripts/config/env.js#L71
 function getClientEnvironment(mode) {
@@ -19,8 +16,7 @@ function getClientEnvironment(mode) {
     const NX_PREFIX = /^NX_/i;
     const STORYBOOK_PREFIX = /^STORYBOOK_/i;
     const raw = Object.keys(process.env)
-        .filter((key) => !excludedKeys.includes(key) &&
-        (NX_PREFIX.test(key) || STORYBOOK_PREFIX.test(key)))
+        .filter((key) => NX_PREFIX.test(key) || STORYBOOK_PREFIX.test(key))
         .reduce((env, key) => {
         env[key] = process.env[key];
         return env;
@@ -144,7 +140,7 @@ const webpack = async (storybookWebpackConfig = {}, options) => {
     };
     // ESM build for modern browsers.
     let baseWebpackConfig = {};
-    const configure = (0, config_1.composePluginsSync)(withNx({ target: 'web', skipTypeChecking: true }), (0, with_react_1.withReact)());
+    const configure = (0, config_1.composePluginsSync)(withNx({ skipTypeChecking: true }), withWeb(), (0, with_react_1.withReact)());
     const finalConfig = configure(baseWebpackConfig, {
         options: builderOptions,
         context: { root: devkit_1.workspaceRoot }, // The context is not used here.

package/plugins/storybook/merge-plugins.d.ts

@@ -1,3 +1,3 @@
 import { ResolvePluginInstance, RuleSetRule, WebpackPluginInstance } from 'webpack';
-export declare const mergeRules: (...args: RuleSetRule[]) => (WebpackPluginInstance | RuleSetRule)[];
+export declare const mergeRules: (...args: RuleSetRule[]) => (RuleSetRule | WebpackPluginInstance)[];
 export declare const mergePlugins: (...args: (WebpackPluginInstance | ResolvePluginInstance)[]) => (WebpackPluginInstance | ResolvePluginInstance)[];

package/plugins/webpack.d.ts

@@ -1 +1,3 @@
-export {};
+/** @deprecated use `import { withReact } from '@nx/react'` */
+declare const getWebpackConfig: (config: import("webpack").Configuration, context: import("../../../build/packages/webpack").NxWebpackExecutionContext) => import("webpack").Configuration;
+export { getWebpackConfig };

package/plugins/webpack.js

@@ -1,6 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const webpack_1 = require("@nx/webpack");
+exports.getWebpackConfig = void 0;
 const with_react_1 = require("./with-react");
-const plugin = (0, webpack_1.composePlugins)((0, webpack_1.withNx)(), (0, with_react_1.withReact)());
-module.exports = plugin;
+// Support existing default exports as well as new named export.
+const legacyExport = (0, with_react_1.withReact)();
+legacyExport.withReact = with_react_1.withReact;
+/** @deprecated use `import { withReact } from '@nx/react'` */
+// This is here for backward compatibility if anyone imports {getWebpackConfig} directly.
+// TODO(jack): Remove in Nx 16
+const getWebpackConfig = (0, with_react_1.withReact)();
+exports.getWebpackConfig = getWebpackConfig;
+legacyExport.getWebpackConfig = getWebpackConfig;
+module.exports = legacyExport;

package/plugins/with-react.d.ts

@@ -1,6 +1,7 @@
 import type { Configuration } from 'webpack';
-import type { NxWebpackExecutionContext, WithWebOptions } from '@nx/webpack';
-export interface WithReactOptions extends WithWebOptions {
+import type { WithWebOptions } from '@nx/webpack';
+import type { NxWebpackExecutionContext } from '@nx/webpack';
+interface WithReactOptions extends WithWebOptions {
     svgr?: false;
 }
 /**
@@ -8,3 +9,4 @@ export interface WithReactOptions extends WithWebOptions {
  * @returns {NxWebpackPlugin}
  */
 export declare function withReact(pluginOptions?: WithReactOptions): (config: Configuration, context: NxWebpackExecutionContext) => Configuration;
+export {};

package/plugins/with-react.js

@@ -1,8 +1,36 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.withReact = void 0;
-const apply_react_config_1 = require("./nx-react-webpack-plugin/lib/apply-react-config");
 const processed = new Set();
+function addHotReload(config) {
+    if (config.mode === 'development' && config['devServer']?.hot) {
+        // add `react-refresh/babel` to babel loader plugin
+        const babelLoader = config.module.rules.find((rule) => rule &&
+            typeof rule !== 'string' &&
+            rule.loader?.toString().includes('babel-loader'));
+        if (babelLoader && typeof babelLoader !== 'string') {
+            babelLoader.options['plugins'] = [
+                ...(babelLoader.options['plugins'] || []),
+                [
+                    require.resolve('react-refresh/babel'),
+                    {
+                        skipEnvCheck: true,
+                    },
+                ],
+            ];
+        }
+        const ReactRefreshPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
+        config.plugins.push(new ReactRefreshPlugin());
+    }
+}
+// We remove potentially conflicting rules that target SVGs because we use @svgr/webpack loader
+// See https://github.com/nrwl/nx/issues/14383
+function removeSvgLoaderIfPresent(config) {
+    const svgLoaderIdx = config.module.rules.findIndex((rule) => typeof rule === 'object' && rule.test.toString().includes('svg'));
+    if (svgLoaderIdx === -1)
+        return;
+    config.module.rules.splice(svgLoaderIdx, 1);
+}
 /**
  * @param {WithReactOptions} pluginOptions
  * @returns {NxWebpackPlugin}
@@ -14,7 +42,35 @@ function withReact(pluginOptions = {}) {
             return config;
         // Apply web config for CSS, JSX, index.html handling, etc.
         config = withWeb(pluginOptions)(config, context);
-        (0, apply_react_config_1.applyReactConfig)(pluginOptions, config);
+        addHotReload(config);
+        if (pluginOptions?.svgr !== false) {
+            removeSvgLoaderIfPresent(config);
+            config.module.rules.push({
+                test: /\.svg$/,
+                issuer: /\.(js|ts|md)x?$/,
+                use: [
+                    {
+                        loader: require.resolve('@svgr/webpack'),
+                        options: {
+                            svgo: false,
+                            titleProp: true,
+                            ref: true,
+                        },
+                    },
+                    {
+                        loader: require.resolve('file-loader'),
+                        options: {
+                            name: '[name].[hash].[ext]',
+                        },
+                    },
+                ],
+            });
+        }
+        // enable webpack node api
+        config.node = {
+            __dirname: true,
+            __filename: true,
+        };
         processed.add(config);
         return config;
     };

package/src/executors/module-federation-dev-server/module-federation-dev-server.impl.d.ts

@@ -5,20 +5,7 @@ type ModuleFederationDevServerOptions = WebDevServerOptions & {
     skipRemotes?: string[];
     static?: boolean;
     isInitialHost?: boolean;
-    parallel?: number;
-    staticRemotesPort?: number;
-    pathToManifestFile?: string;
 };
-type StaticRemoteConfig = {
-    basePath: string;
-    outputPath: string;
-    urlSegment: string;
-};
-type StaticRemotesConfig = {
-    remotes: string[];
-    config: Record<string, StaticRemoteConfig> | undefined;
-};
-export declare function parseStaticRemotesConfig(staticRemotes: string[] | undefined, context: ExecutorContext): StaticRemotesConfig;
 export default function moduleFederationDevServer(options: ModuleFederationDevServerOptions, context: ExecutorContext): AsyncIterableIterator<{
     success: boolean;
     baseUrl?: string;