@nx/react 17.0.3 → 17.0.4

package/LICENSE

@@ -1,6 +1,6 @@
 (The MIT License)
 
-Copyright (c) 2017-2023 Narwhal Technologies Inc.
+Copyright (c) 2017-2024 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,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/generators.json

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

package/index.d.ts

@@ -19,3 +19,4 @@ 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.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.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;
 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,3 +43,5 @@ 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/mf/dynamic-federation.d.ts

@@ -0,0 +1,4 @@
+export type ResolveRemoteUrlFunction = (remoteName: string) => string | Promise<string>;
+export declare function setRemoteUrlResolver(_resolveRemoteUrl: ResolveRemoteUrlFunction): void;
+export declare function setRemoteDefinitions(definitions: Record<string, string>): void;
+export declare function loadRemoteModule(remoteName: string, moduleName: string): Promise<any>;

package/mf/dynamic-federation.js

@@ -0,0 +1,75 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.loadRemoteModule = exports.setRemoteDefinitions = exports.setRemoteUrlResolver = void 0;
+let remoteUrlDefinitions;
+let resolveRemoteUrl;
+const remoteModuleMap = new Map();
+const remoteContainerMap = new Map();
+let initialSharingScopeCreated = false;
+function setRemoteUrlResolver(_resolveRemoteUrl) {
+    resolveRemoteUrl = _resolveRemoteUrl;
+}
+exports.setRemoteUrlResolver = setRemoteUrlResolver;
+function setRemoteDefinitions(definitions) {
+    remoteUrlDefinitions = definitions;
+}
+exports.setRemoteDefinitions = setRemoteDefinitions;
+async function loadRemoteModule(remoteName, moduleName) {
+    const remoteModuleKey = `${remoteName}:${moduleName}`;
+    if (remoteModuleMap.has(remoteModuleKey)) {
+        return remoteModuleMap.get(remoteModuleKey);
+    }
+    const container = remoteContainerMap.has(remoteName)
+        ? remoteContainerMap.get(remoteName)
+        : await loadRemoteContainer(remoteName);
+    const factory = await container.get(moduleName);
+    const Module = factory();
+    remoteModuleMap.set(remoteModuleKey, Module);
+    return Module;
+}
+exports.loadRemoteModule = loadRemoteModule;
+const fetchRemoteModule = (url, remoteName) => {
+    return new Promise((resolve, reject) => {
+        const script = document.createElement('script');
+        script.src = url;
+        script.type = 'text/javascript';
+        script.async = true;
+        script.onload = () => {
+            const proxy = {
+                get: (request) => window[remoteName].get(request),
+                init: (arg) => {
+                    try {
+                        window[remoteName].init(arg);
+                    }
+                    catch (e) {
+                        console.error(`Failed to initialize remote ${remoteName}`, e);
+                        reject(e);
+                    }
+                },
+            };
+            resolve(proxy);
+        };
+        script.onerror = () => reject(new Error(`Remote ${remoteName} not found`));
+        document.head.appendChild(script);
+    });
+};
+async function loadRemoteContainer(remoteName) {
+    if (!resolveRemoteUrl && !remoteUrlDefinitions) {
+        throw new Error('Call setRemoteDefinitions or setRemoteUrlResolver to allow Dynamic Federation to find the remote apps correctly.');
+    }
+    if (!initialSharingScopeCreated) {
+        initialSharingScopeCreated = true;
+        await __webpack_init_sharing__('default');
+    }
+    const remoteUrl = remoteUrlDefinitions
+        ? remoteUrlDefinitions[remoteName]
+        : await resolveRemoteUrl(remoteName);
+    let containerUrl = remoteUrl;
+    if (!remoteUrl.endsWith('.mjs') && !remoteUrl.endsWith('.js')) {
+        containerUrl = `${remoteUrl}${remoteUrl.endsWith('/') ? '' : '/'}remoteEntry.js`;
+    }
+    const container = await fetchRemoteModule(containerUrl, remoteName);
+    await container.init(__webpack_share_scopes__.default);
+    remoteContainerMap.set(remoteName, container);
+    return container;
+}

package/mf/index.d.ts

@@ -0,0 +1 @@
+export { loadRemoteModule, setRemoteDefinitions, setRemoteUrlResolver, } from './dynamic-federation';

package/mf/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setRemoteUrlResolver = exports.setRemoteDefinitions = exports.loadRemoteModule = void 0;
+var dynamic_federation_1 = require("./dynamic-federation");
+Object.defineProperty(exports, "loadRemoteModule", { enumerable: true, get: function () { return dynamic_federation_1.loadRemoteModule; } });
+Object.defineProperty(exports, "setRemoteDefinitions", { enumerable: true, get: function () { return dynamic_federation_1.setRemoteDefinitions; } });
+Object.defineProperty(exports, "setRemoteUrlResolver", { enumerable: true, get: function () { return dynamic_federation_1.setRemoteUrlResolver; } });

package/migrations.json

@@ -47,6 +47,18 @@
       "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": {
@@ -290,6 +302,15 @@
           "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.3",
+  "version": "17.0.4",
   "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": "3.0.5",
+    "minimatch": "9.0.3",
     "tslib": "^2.3.0",
-    "@nx/devkit": "17.0.3",
-    "@nx/js": "17.0.3",
-    "@nx/eslint": "17.0.3",
-    "@nx/web": "17.0.3",
-    "@nrwl/react": "17.0.3"
+    "@nx/devkit": "17.0.4",
+    "@nx/js": "17.0.4",
+    "@nx/eslint": "17.0.4",
+    "@nx/web": "17.0.4",
+    "@nrwl/react": "17.0.4"
   },
   "publishConfig": {
     "access": "public"

package/plugins/component-testing/index.js

@@ -25,12 +25,17 @@ const path_1 = require("path");
  * @param options override options
  */
 function nxComponentTestingPreset(pathToConfig, options) {
-    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 (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);
     if (options?.bundler === 'vite') {
         return {
             ...basePresetSettings,
@@ -66,25 +71,31 @@ 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);
-        const ctExecutorOptions = (0, devkit_1.readTargetOptions)({
-            project: ctProjectName,
-            target: ctTargetName,
-            configuration: ctConfigurationName,
-        }, ctExecutorContext);
-        const buildTarget = ctExecutorOptions.devServerTarget;
+        let buildTarget = options?.buildTarget;
+        if (!buildTarget) {
+            const ctExecutorOptions = (0, devkit_1.readTargetOptions)({
+                project: ctProjectName,
+                target: ctTargetName,
+                configuration: ctConfigurationName,
+            }, ctExecutorContext);
+            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: 'babel',
+            compiler: options?.compiler || 'babel',
         });
     }
     return {
@@ -123,7 +134,6 @@ function withSchemaDefaults(target, context) {
     options.maxWorkers ??= 2;
     options.fileReplacements ??= [];
     options.buildLibsFromSource ??= true;
-    options.generateIndexHtml ??= true;
     return options;
 }
 function buildTargetWebpack(ctx, buildTarget, componentTestingProjectName) {
@@ -138,29 +148,40 @@ 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 { resolveCustomWebpackConfig, } = require('@nx/webpack/src/utils/webpack/custom-webpack');
-    const { getWebpackConfig, } = require('@nx/webpack/src/executors/webpack/lib/get-webpack-config');
+    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) {
-        customWebpack = resolveCustomWebpackConfig(options.webpackConfig, options.tsConfig.startsWith(context.root)
+        customWebpack = resolveUserDefinedWebpackConfig(options.webpackConfig, options.tsConfig.startsWith(context.root)
             ? options.tsConfig
             : (0, path_1.join)(context.root, options.tsConfig));
     }
     return async () => {
         customWebpack = await customWebpack;
-        // 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,
+        // 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,
         });
         if (customWebpack) {
             return await customWebpack(defaultWebpack, {
@@ -192,3 +213,10 @@ 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: 10000, // 10 kB
+                            maxSize: 10_000, // 10 kB
                         },
                     },
                 },

package/plugins/nx-react-webpack-plugin/lib/apply-react-config.d.ts

@@ -0,0 +1,4 @@
+import { Configuration, WebpackOptionsNormalized } from 'webpack';
+export declare function applyReactConfig(options: {
+    svgr?: boolean;
+}, config?: Partial<WebpackOptionsNormalized | Configuration>): void;

package/plugins/nx-react-webpack-plugin/lib/apply-react-config.js

@@ -0,0 +1,86 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.applyReactConfig = void 0;
+function applyReactConfig(options, config = {}) {
+    if (!process.env['NX_TASK_TARGET_PROJECT'])
+        return;
+    addHotReload(config);
+    if (options.svgr !== false) {
+        removeSvgLoaderIfPresent(config);
+        // TODO(v20): Remove file-loader and use `?react` querystring to differentiate between asset and SVGR.
+        // It should be:
+        // use: [{
+        //   test: /\.svg$/i,
+        //   type: 'asset',
+        //   resourceQuery: /react/, // *.svg?react
+        // },
+        // {
+        //   test: /\.svg$/i,
+        //   issuer: /\.[jt]sx?$/,
+        //   resourceQuery: { not: [/react/] }, // exclude react component if *.svg?react
+        //   use: ['@svgr/webpack'],
+        // }],
+        // See:
+        // - SVGR: https://react-svgr.com/docs/webpack/#use-svgr-and-asset-svg-in-the-same-project
+        // - Vite: https://www.npmjs.com/package/vite-plugin-svgr
+        // - Rsbuild: https://github.com/web-infra-dev/rsbuild/pull/1783
+        // Note: We also need a migration for any projects that are using SVGR to convert
+        //       `import { ReactComponent as X } from './x.svg` to
+        //       `import X from './x.svg?react';
+        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,
+    };
+}
+exports.applyReactConfig = applyReactConfig;
+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);
+}

package/plugins/nx-react-webpack-plugin/nx-react-webpack-plugin.d.ts

@@ -0,0 +1,8 @@
+import { Compiler } from 'webpack';
+export declare class NxReactWebpackPlugin {
+    private options;
+    constructor(options?: {
+        svgr?: boolean;
+    });
+    apply(compiler: Compiler): void;
+}

package/plugins/nx-react-webpack-plugin/nx-react-webpack-plugin.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NxReactWebpackPlugin = void 0;
+const apply_react_config_1 = require("./lib/apply-react-config");
+class NxReactWebpackPlugin {
+    constructor(options = {}) {
+        this.options = options;
+    }
+    apply(compiler) {
+        (0, apply_react_config_1.applyReactConfig)(this.options, compiler.options);
+    }
+}
+exports.NxReactWebpackPlugin = NxReactWebpackPlugin;

package/plugins/storybook/index.js

@@ -8,6 +8,9 @@ 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) {
@@ -16,7 +19,8 @@ function getClientEnvironment(mode) {
     const NX_PREFIX = /^NX_/i;
     const STORYBOOK_PREFIX = /^STORYBOOK_/i;
     const raw = Object.keys(process.env)
-        .filter((key) => NX_PREFIX.test(key) || STORYBOOK_PREFIX.test(key))
+        .filter((key) => !excludedKeys.includes(key) &&
+        (NX_PREFIX.test(key) || STORYBOOK_PREFIX.test(key)))
         .reduce((env, key) => {
         env[key] = process.env[key];
         return env;
@@ -140,7 +144,7 @@ const webpack = async (storybookWebpackConfig = {}, options) => {
     };
     // ESM build for modern browsers.
     let baseWebpackConfig = {};
-    const configure = (0, config_1.composePluginsSync)(withNx({ skipTypeChecking: true }), withWeb(), (0, with_react_1.withReact)());
+    const configure = (0, config_1.composePluginsSync)(withNx({ target: 'web', skipTypeChecking: true }), (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[]) => (RuleSetRule | WebpackPluginInstance)[];
+export declare const mergeRules: (...args: RuleSetRule[]) => (WebpackPluginInstance | RuleSetRule)[];
 export declare const mergePlugins: (...args: (WebpackPluginInstance | ResolvePluginInstance)[]) => (WebpackPluginInstance | ResolvePluginInstance)[];

package/plugins/webpack.d.ts

@@ -1,3 +1 @@
-/** @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 };
+export {};

package/plugins/webpack.js

@@ -1,14 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getWebpackConfig = void 0;
+const webpack_1 = require("@nx/webpack");
 const with_react_1 = require("./with-react");
-// 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;
+const plugin = (0, webpack_1.composePlugins)((0, webpack_1.withNx)(), (0, with_react_1.withReact)());
+module.exports = plugin;

package/plugins/with-react.d.ts

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

package/plugins/with-react.js

@@ -1,36 +1,8 @@
 "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}
@@ -42,35 +14,7 @@ function withReact(pluginOptions = {}) {
             return config;
         // Apply web config for CSS, JSX, index.html handling, etc.
         config = withWeb(pluginOptions)(config, context);
-        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,
-        };
+        (0, apply_react_config_1.applyReactConfig)(pluginOptions, config);
         processed.add(config);
         return config;
     };