@nx/react 17.2.0-beta.8 → 17.2.0-beta.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/react",
-  "version": "17.2.0-beta.8",
+  "version": "17.2.0-beta.9",
   "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.0-beta.8",
-    "@nx/js": "17.2.0-beta.8",
-    "@nx/eslint": "17.2.0-beta.8",
-    "@nx/web": "17.2.0-beta.8",
-    "@nrwl/react": "17.2.0-beta.8"
+    "@nx/devkit": "17.2.0-beta.9",
+    "@nx/js": "17.2.0-beta.9",
+    "@nx/eslint": "17.2.0-beta.9",
+    "@nx/web": "17.2.0-beta.9",
+    "@nrwl/react": "17.2.0-beta.9"
   },
   "publishConfig": {
     "access": "public"

package/plugins/component-testing/index.js

@@ -140,24 +140,20 @@ 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 { 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 { withNx } = require('@nx/webpack/src/utils/with-nx');
     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, {
+        const defaultWebpack = withNx({
             ...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,

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

@@ -2,6 +2,8 @@
 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);

package/plugins/storybook/index.js

@@ -140,7 +140,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/with-react.d.ts

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

package/src/generators/application/application.js

@@ -64,6 +64,14 @@ async function applicationGeneratorInternal(host, schema) {
         skipHelperLibs: options.bundler === 'vite',
     });
     tasks.push(initTask);
+    if (options.bundler === 'webpack') {
+        const { webpackInitGenerator } = (0, devkit_1.ensurePackage)('@nx/webpack', versions_1.nxVersion);
+        const webpackInitTask = await webpackInitGenerator(host, {
+            uiFramework: 'react',
+            skipFormat: true,
+        });
+        tasks.push(webpackInitTask);
+    }
     if (!options.rootProject) {
         (0, create_ts_config_1.extractTsConfigBase)(host);
     }
@@ -104,14 +112,6 @@ async function applicationGeneratorInternal(host, schema) {
             plugins: ['react()'],
         }, false);
     }
-    else if (options.bundler === 'webpack') {
-        const { webpackInitGenerator } = (0, devkit_1.ensurePackage)('@nx/webpack', versions_1.nxVersion);
-        const webpackInitTask = await webpackInitGenerator(host, {
-            uiFramework: 'react',
-            skipFormat: true,
-        });
-        tasks.push(webpackInitTask);
-    }
     else if (options.bundler === 'rspack') {
         const { configurationGenerator } = (0, devkit_1.ensurePackage)('@nx/rspack', versions_1.nxRspackVersion);
         const rspackTask = await configurationGenerator(host, {

package/src/generators/application/files/base-webpack/webpack.config.js__tmpl__

@@ -1,9 +1,50 @@
+<% if (webpackPluginOptions) { %>
+const { NxWebpackPlugin } = require('@nx/webpack');
+const { NxReactWebpackPlugin } = require('@nx/react');
+const { join } = require('path');
+
+module.exports = {
+  output: {
+    path: join(__dirname, '<%= offsetFromRoot %><%= webpackPluginOptions.outputPath %>'),
+  },
+  devServer: {
+    port: 4200
+  },
+  plugins: [
+    new NxWebpackPlugin({
+      tsConfig: '<%= webpackPluginOptions.tsConfig %>',
+      compiler: '<%= webpackPluginOptions.compiler %>',
+      main: '<%= webpackPluginOptions.main %>',
+      index: '<%= webpackPluginOptions.index %>',
+      baseHref: '<%= webpackPluginOptions.baseHref %>',
+      assets: <%- JSON.stringify(webpackPluginOptions.assets) %>,
+      styles: <%- JSON.stringify(webpackPluginOptions.styles) %>,
+      outputHashing: process.env['NODE_ENV'] === 'production' ? 'all' : 'none',
+      optimization: process.env['NODE_ENV'] === 'production',
+    }),
+    new NxReactWebpackPlugin({
+      // Uncomment this line if you don't want to use SVGR
+      // See: https://react-svgr.com/
+      // svgr: false
+    }),
+  ],
+};
+<% } else { %>
 const { composePlugins, withNx } = require('@nx/webpack');
 const { withReact } = require('@nx/react');
 
 // Nx plugins for webpack.
-module.exports = composePlugins(withNx(), withReact(), (config) => {
-  // Update the webpack config as needed here.
-  // e.g. `config.plugins.push(new MyPlugin())`
-  return config;
-});
+module.exports = composePlugins(
+  withNx(),
+  withReact({
+    // Uncomment this line if you don't want to use SVGR
+    // See: https://react-svgr.com/
+    // svgr: false
+  }),
+  (config) => {
+    // Update the webpack config as needed here.
+    // e.g. `config.plugins.push(new MyPlugin())`
+    return config;
+  }
+);
+<% } %>

package/src/generators/application/lib/add-e2e.js

@@ -4,13 +4,16 @@ exports.addE2e = void 0;
 const devkit_1 = require("@nx/devkit");
 const web_1 = require("@nx/web");
 const versions_1 = require("../../../utils/versions");
+const has_webpack_plugin_1 = require("../../../utils/has-webpack-plugin");
 async function addE2e(tree, options) {
     switch (options.e2eTestRunner) {
         case 'cypress': {
-            (0, web_1.webStaticServeGenerator)(tree, {
-                buildTarget: `${options.projectName}:build`,
-                targetName: 'serve-static',
-            });
+            if (!(0, has_webpack_plugin_1.hasWebpackPlugin)(tree)) {
+                (0, web_1.webStaticServeGenerator)(tree, {
+                    buildTarget: `${options.projectName}:build`,
+                    targetName: 'serve-static',
+                });
+            }
             const { configurationGenerator } = (0, devkit_1.ensurePackage)('@nx/cypress', versions_1.nxVersion);
             (0, devkit_1.addProjectConfiguration)(tree, options.e2eProjectName, {
                 projectType: 'application',

package/src/generators/application/lib/add-project.d.ts

@@ -1,3 +1,4 @@
 import { NormalizedSchema } from '../schema';
-export declare function addProject(host: any, options: NormalizedSchema): void;
+import { Tree } from '@nx/devkit';
+export declare function addProject(host: Tree, options: NormalizedSchema): void;
 export declare function maybeJs(options: NormalizedSchema, path: string): string;

package/src/generators/application/lib/add-project.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.maybeJs = exports.addProject = void 0;
 const devkit_1 = require("@nx/devkit");
+const has_webpack_plugin_1 = require("../../../utils/has-webpack-plugin");
 function addProject(host, options) {
     const project = {
         root: options.appProjectRoot,
@@ -11,10 +12,12 @@ function addProject(host, options) {
         tags: options.parsedTags,
     };
     if (options.bundler === 'webpack') {
-        project.targets = {
-            build: createBuildTarget(options),
-            serve: createServeTarget(options),
-        };
+        if (!(0, has_webpack_plugin_1.hasWebpackPlugin)(host)) {
+            project.targets = {
+                build: createBuildTarget(options),
+                serve: createServeTarget(options),
+            };
+        }
     }
     (0, devkit_1.addProjectConfiguration)(host, options.projectName, {
         ...project,

package/src/generators/application/lib/create-application-files.js

@@ -7,6 +7,8 @@ const path_1 = require("path");
 const create_ts_config_1 = require("../../../utils/create-ts-config");
 const get_in_source_vitest_tests_template_1 = require("../../../utils/get-in-source-vitest-tests-template");
 const get_app_tests_1 = require("./get-app-tests");
+const add_project_1 = require("./add-project");
+const has_webpack_plugin_1 = require("../../../utils/has-webpack-plugin");
 function createApplicationFiles(host, options) {
     let styleSolutionSpecificAppFiles;
     if (options.styledModule && options.style !== 'styled-jsx') {
@@ -38,7 +40,12 @@ function createApplicationFiles(host, options) {
         (0, devkit_1.generateFiles)(host, (0, path_1.join)(__dirname, '../files/base-vite'), options.appProjectRoot, templateVariables);
     }
     else if (options.bundler === 'webpack') {
-        (0, devkit_1.generateFiles)(host, (0, path_1.join)(__dirname, '../files/base-webpack'), options.appProjectRoot, templateVariables);
+        (0, devkit_1.generateFiles)(host, (0, path_1.join)(__dirname, '../files/base-webpack'), options.appProjectRoot, {
+            ...templateVariables,
+            webpackPluginOptions: (0, has_webpack_plugin_1.hasWebpackPlugin)(host)
+                ? createNxWebpackPluginOptions(options)
+                : null,
+        });
         if (options.compiler === 'babel') {
             (0, devkit_1.writeJson)(host, `${options.appProjectRoot}/.babelrc`, {
                 presets: [
@@ -112,3 +119,20 @@ function createApplicationFiles(host, options) {
     (0, create_ts_config_1.createTsConfig)(host, options.appProjectRoot, 'app', options, relativePathToRootTsConfig);
 }
 exports.createApplicationFiles = createApplicationFiles;
+function createNxWebpackPluginOptions(options) {
+    return {
+        target: 'web',
+        compiler: options.compiler ?? 'babel',
+        outputPath: (0, devkit_1.joinPathFragments)('dist', options.appProjectRoot != '.'
+            ? options.appProjectRoot
+            : options.projectName),
+        index: './src/index.html',
+        baseHref: '/',
+        main: (0, add_project_1.maybeJs)(options, `./src/main.tsx`),
+        tsConfig: './tsconfig.app.json',
+        assets: ['./src/favicon.ico', './src/assets'],
+        styles: options.styledModule || !options.hasStyles
+            ? []
+            : [`./src/styles.${options.style}`],
+    };
+}

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

@@ -49,11 +49,12 @@ async function normalizeOptions(host, options) {
         if (appProjectConfig.projectType !== 'application') {
             throw new Error(`appProject expected type of "application" but got "${appProjectConfig.projectType}"`);
         }
-        try {
-            normalized.appMain = appProjectConfig.targets.build.options.main;
-            normalized.appSourceRoot = (0, devkit_1.normalizePath)(appProjectConfig.sourceRoot);
-        }
-        catch (e) {
+        normalized.appMain =
+            appProjectConfig.targets.build.options.main ??
+                findMainEntry(host, appProjectConfig.root);
+        normalized.appSourceRoot = (0, devkit_1.normalizePath)(appProjectConfig.sourceRoot);
+        // TODO(jack): We should use appEntryFile instead of appProject so users can directly set it rather than us inferring it.
+        if (!normalized.appMain) {
             throw new Error(`Could not locate project main for ${options.appProject}`);
         }
     }
@@ -61,3 +62,27 @@ async function normalizeOptions(host, options) {
     return normalized;
 }
 exports.normalizeOptions = normalizeOptions;
+function findMainEntry(tree, projectRoot) {
+    const mainFiles = [
+        // These are the main files we generate with.
+        'src/main.ts',
+        'src/main.tsx',
+        'src/main.js',
+        'src/main.jsx',
+        // Other options just in case
+        'src/index.ts',
+        'src/index.tsx',
+        'src/index.js',
+        'src/index.jsx',
+        'main.ts',
+        'main.tsx',
+        'main.js',
+        'main.jsx',
+        'index.ts',
+        'index.tsx',
+        'index.js',
+        'index.jsx',
+    ];
+    const mainEntry = mainFiles.find((file) => tree.exists((0, devkit_1.joinPathFragments)(projectRoot, file)));
+    return mainEntry ? (0, devkit_1.joinPathFragments)(projectRoot, mainEntry) : undefined;
+}

package/src/generators/setup-ssr/setup-ssr.js

@@ -65,7 +65,6 @@ async function setupSsrGenerator(tree, options) {
                 compiler: 'babel',
                 externalDependencies: 'all',
                 outputHashing: 'none',
-                isolatedConfig: true,
                 webpackConfig: (0, devkit_1.joinPathFragments)(projectRoot, 'webpack.config.js'),
             },
             configurations: {

package/src/module-federation/with-module-federation.d.ts

@@ -1,7 +1,7 @@
 import { ModuleFederationConfig } from '@nx/webpack/src/utils/module-federation';
-import type { AsyncNxWebpackPlugin } from '@nx/webpack';
+import type { AsyncNxComposableWebpackPlugin } from '@nx/webpack';
 /**
  * @param {ModuleFederationConfig} options
- * @return {Promise<AsyncNxWebpackPlugin>}
+ * @return {Promise<AsyncNxComposableWebpackPlugin>}
  */
-export declare function withModuleFederation(options: ModuleFederationConfig): Promise<AsyncNxWebpackPlugin>;
+export declare function withModuleFederation(options: ModuleFederationConfig): Promise<AsyncNxComposableWebpackPlugin>;

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

@@ -5,7 +5,7 @@ const utils_1 = require("./utils");
 const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
 /**
  * @param {ModuleFederationConfig} options
- * @return {Promise<AsyncNxWebpackPlugin>}
+ * @return {Promise<AsyncNxComposableWebpackPlugin>}
  */
 async function withModuleFederation(options) {
     const { sharedDependencies, sharedLibraries, mappedRemotes } = await (0, utils_1.getModuleFederationConfig)(options);

package/src/utils/has-webpack-plugin.d.ts

@@ -0,0 +1,2 @@
+import { Tree } from '@nx/devkit';
+export declare function hasWebpackPlugin(tree: Tree): boolean;

package/src/utils/has-webpack-plugin.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.hasWebpackPlugin = void 0;
+const devkit_1 = require("@nx/devkit");
+function hasWebpackPlugin(tree) {
+    const nxJson = (0, devkit_1.readNxJson)(tree);
+    return !!nxJson.plugins?.some((p) => typeof p === 'string'
+        ? p === '@nx/webpack/plugin'
+        : p.plugin === '@nx/webpack/plugin');
+}
+exports.hasWebpackPlugin = hasWebpackPlugin;

package/src/generators/application/files/base-webpack/src/environments/environment.prod.ts__tmpl__

@@ -1,3 +0,0 @@
-export const environment = {
-  production: true
-};

package/src/generators/application/files/base-webpack/src/environments/environment.ts__tmpl__

@@ -1,6 +0,0 @@
-// This file can be replaced during build by using the `fileReplacements` array.
-// When building for production, this file is replaced with `environment.prod.ts`.
-
-export const environment = {
-  production: false
-};