@nx/webpack 0.0.0-pr-30516-4c8bfff → 0.0.0-pr-30457-d91a68c

package/migrations.json

@@ -44,6 +44,19 @@
           "alwaysAddToPackageJson": false
         }
       }
+    },
+    "20.7.1": {
+      "version": "20.7.1-beta.0",
+      "packages": {
+        "webpack": {
+          "version": "^5.98.0",
+          "alwaysAddToPackageJson": false
+        },
+        "webpack-dev-server": {
+          "version": "^5.2.1",
+          "alwaysAddToPackageJson": false
+        }
+      }
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/webpack",
-  "version": "0.0.0-pr-30516-4c8bfff",
+  "version": "0.0.0-pr-30457-d91a68c",
   "private": false,
   "description": "The Nx Plugin for Webpack contains executors and generators that support building applications using Webpack.",
   "repository": {
@@ -62,12 +62,12 @@
     "ts-loader": "^9.3.1",
     "tsconfig-paths-webpack-plugin": "4.0.0",
     "tslib": "^2.3.0",
-    "webpack": "^5.80.0",
-    "webpack-dev-server": "^5.0.4",
+    "webpack": "^5.98.0",
+    "webpack-dev-server": "^5.2.1",
     "webpack-node-externals": "^3.0.0",
     "webpack-subresource-integrity": "^5.1.0",
-    "@nx/devkit": "0.0.0-pr-30516-4c8bfff",
-    "@nx/js": "0.0.0-pr-30516-4c8bfff"
+    "@nx/devkit": "0.0.0-pr-30457-d91a68c",
+    "@nx/js": "0.0.0-pr-30457-d91a68c"
   },
   "publishConfig": {
     "access": "public"

package/src/generators/convert-to-inferred/utils/serve-post-target-transformer.js

@@ -156,7 +156,10 @@ function extractDevServerOptions(options, context) {
     return devServerOptions;
 }
 function applyDefaults(options, buildOptions) {
-    if (options.port === undefined) {
+    if (!options) {
+        options = {};
+    }
+    if (options?.port === undefined) {
         options.port = 4200;
     }
     options.headers = { 'Access-Control-Allow-Origin': '*' };

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

@@ -15,10 +15,15 @@ const compiler_loaders_1 = require("./compiler-loaders");
 const TerserPlugin = require("terser-webpack-plugin");
 const nodeExternals = require("webpack-node-externals");
 const ts_solution_setup_1 = require("@nx/js/src/utils/typescript/ts-solution-setup");
+const utils_1 = require("./utils");
 const IGNORED_WEBPACK_WARNINGS = [
     /The comment file/i,
     /could not find any license/i,
 ];
+const extensionAlias = {
+    '.js': ['.ts', '.js'],
+    '.mjs': ['.mts', '.mjs'],
+};
 const extensions = ['.ts', '.tsx', '.mjs', '.js', '.jsx'];
 const mainFields = ['module', 'main'];
 function applyBaseConfig(options, config = {}, { useNormalizedEntry, } = {}) {
@@ -183,8 +188,11 @@ function applyNxDependentConfig(options, config, { useNormalizedEntry } = {}) {
     if (options.useTsconfigPaths) {
         plugins.push(new nx_tsconfig_paths_webpack_plugin_1.NxTsconfigPathsWebpackPlugin({ ...options, tsConfig }));
     }
-    // New TS Solution already has a typecheck target
-    if (!options?.skipTypeChecking && !isUsingTsSolution) {
+    // New TS Solution already has a typecheck target but allow it to run during serve
+    if ((!options?.skipTypeChecking && !isUsingTsSolution) ||
+        (isUsingTsSolution &&
+            options?.skipTypeChecking === false &&
+            process.env['WEBPACK_SERVE'])) {
         const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
         plugins.push(new ForkTsCheckerWebpackPlugin({
             typescript: {
@@ -271,7 +279,31 @@ function applyNxDependentConfig(options, config, { useNormalizedEntry } = {}) {
     const externals = [];
     if (options.target === 'node' && options.externalDependencies === 'all') {
         const modulesDir = `${options.root}/node_modules`;
-        externals.push(nodeExternals({ modulesDir }));
+        const graph = options.projectGraph;
+        const projectName = options.projectName;
+        const deps = graph?.dependencies?.[projectName] ?? [];
+        // Collect non-buildable TS project references so that they are bundled
+        // in the final output. This is needed for projects that are not buildable
+        // but are referenced by buildable projects. This is needed for the new TS
+        // solution setup.
+        const nonBuildableWorkspaceLibs = isUsingTsSolution
+            ? deps
+                .filter((dep) => {
+                const node = graph.nodes?.[dep.target];
+                if (!node || node.type !== 'lib')
+                    return false;
+                const hasBuildTarget = 'build' in (node.data?.targets ?? {});
+                if (hasBuildTarget) {
+                    return false;
+                }
+                // If there is no build target we check the package exports to see if they reference
+                // source files
+                return !(0, utils_1.isBuildableLibrary)(node);
+            })
+                .map((dep) => graph.nodes?.[dep.target]?.data?.metadata?.js?.packageName)
+                .filter((name) => !!name)
+            : [];
+        externals.push(nodeExternals({ modulesDir, allowlist: nonBuildableWorkspaceLibs }));
     }
     else if (Array.isArray(options.externalDependencies)) {
         externals.push(function (ctx, callback) {
@@ -286,6 +318,10 @@ function applyNxDependentConfig(options, config, { useNormalizedEntry } = {}) {
     config.resolve = {
         ...config.resolve,
         extensions: [...(config?.resolve?.extensions ?? []), ...extensions],
+        extensionAlias: {
+            ...(config.resolve?.extensionAlias ?? {}),
+            ...extensionAlias,
+        },
         alias: {
             ...(config.resolve?.alias ?? {}),
             ...(options.fileReplacements?.reduce((aliases, replacement) => ({

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

@@ -34,7 +34,7 @@ function applyWebConfig(options, config = {}, { useNormalizedEntry, } = {}) {
             sri: options.subresourceIntegrity,
             outputPath: path.basename(options.index),
             indexPath: path.join(options.root, options.index),
-            baseHref: options.baseHref,
+            baseHref: options.baseHref !== false ? options.baseHref : undefined,
             deployUrl: options.deployUrl,
             scripts: options.scripts,
             styles: options.styles,

package/src/plugins/nx-webpack-plugin/lib/compiler-loaders.d.ts

@@ -24,6 +24,8 @@ export declare function createLoaderFromCompiler(options: NormalizedNxAppWebpack
                 tsx: boolean;
             };
             transform: {
+                legacyDecorator: boolean;
+                decoratorMetadata: boolean;
                 react: {
                     runtime: string;
                 };

package/src/plugins/nx-webpack-plugin/lib/compiler-loaders.js

@@ -18,6 +18,8 @@ function createLoaderFromCompiler(options) {
                             tsx: true,
                         },
                         transform: {
+                            legacyDecorator: true,
+                            decoratorMetadata: true,
                             react: {
                                 runtime: 'automatic',
                             },

package/src/plugins/nx-webpack-plugin/lib/stylesheet-loaders.js

@@ -98,7 +98,7 @@ function postcssOptionsCreator(options, { includePaths, forCssModules = false, }
                 ? []
                 : [
                     (0, postcss_cli_resources_1.PostcssCliResources)({
-                        baseHref: options.baseHref,
+                        baseHref: options.baseHref ? options.baseHref : undefined,
                         deployUrl: options.deployUrl,
                         loader,
                         filename: `[name]${hashFormat.file}.[ext]`,

package/src/plugins/nx-webpack-plugin/lib/utils.d.ts

@@ -0,0 +1,7 @@
+import { type ProjectGraphProjectNode } from '@nx/devkit';
+/**
+ * Check if the library is buildable.
+ * @param node from the project graph
+ * @returns boolean
+ */
+export declare function isBuildableLibrary(node: ProjectGraphProjectNode): boolean;

package/src/plugins/nx-webpack-plugin/lib/utils.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isBuildableLibrary = isBuildableLibrary;
+function isSourceFile(path) {
+    return ['.ts', '.tsx', '.mts', '.cts'].some((ext) => path.endsWith(ext));
+}
+function isBuildableExportMap(packageExports) {
+    if (!packageExports || Object.keys(packageExports).length === 0) {
+        return false; // exports = {} → not buildable
+    }
+    const isCompiledExport = (value) => {
+        if (typeof value === 'string') {
+            return !isSourceFile(value);
+        }
+        if (typeof value === 'object' && value !== null) {
+            return Object.entries(value).some(([key, subValue]) => {
+                if (key === 'types' ||
+                    key === 'development' ||
+                    key === './package.json')
+                    return false;
+                return typeof subValue === 'string' && !isSourceFile(subValue);
+            });
+        }
+        return false;
+    };
+    if (packageExports['.']) {
+        return isCompiledExport(packageExports['.']);
+    }
+    return Object.entries(packageExports).some(([key, value]) => key !== '.' && isCompiledExport(value));
+}
+/**
+ * Check if the library is buildable.
+ * @param node from the project graph
+ * @returns boolean
+ */
+function isBuildableLibrary(node) {
+    if (!node.data.metadata?.js) {
+        return false;
+    }
+    const { packageExports, packageMain } = node.data.metadata.js;
+    // if we have exports only check this else fallback to packageMain
+    if (packageExports) {
+        return isBuildableExportMap(packageExports);
+    }
+    return (typeof packageMain === 'string' &&
+        packageMain !== '' &&
+        !isSourceFile(packageMain));
+}

package/src/plugins/nx-webpack-plugin/nx-app-webpack-plugin-options.d.ts

@@ -57,7 +57,7 @@ export interface NxAppWebpackPluginOptions {
     /**
      * Set <base href> for the resulting index.html.
      */
-    baseHref?: string;
+    baseHref?: string | false;
     /**
      * Build the libraries from source. Default is `true`.
      */
@@ -73,6 +73,7 @@ export interface NxAppWebpackPluginOptions {
     crossOrigin?: 'none' | 'anonymous' | 'use-credentials';
     /**
      * Delete the output path before building.
+     * @deprecated Use the `output.clean` option in Webpack. https://webpack.js.org/guides/output-management/#cleaning-up-the-dist-folder
      */
     deleteOutputPath?: boolean;
     /**

package/src/plugins/nx-webpack-plugin/nx-app-webpack-plugin.js

@@ -29,6 +29,10 @@ class NxAppWebpackPlugin {
         if (typeof target === 'string') {
             this.options.target = target;
         }
+        // Prefer `clean` option from Webpack config over our own.
+        if (typeof compiler.options.output?.clean !== 'undefined') {
+            this.options.deleteOutputPath = false;
+        }
         (0, apply_base_config_1.applyBaseConfig)(this.options, compiler.options, {
             useNormalizedEntry: true,
         });