@nx/next 21.6.1 → 21.6.3

package/migrations.json

@@ -1,12 +1,5 @@
 {
-  "generators": {
-    "update-22-0-0-add-svgr-to-next-config": {
-      "cli": "nx",
-      "version": "22.0.0-beta.0",
-      "description": "Updates next.config.js files to add SVGR webpack configuration directly instead of using the nx.svgr option in withNx.",
-      "factory": "./src/migrations/update-22-0-0/add-svgr-to-next-config"
-    }
-  },
+  "generators": {},
   "packageJsonUpdates": {
     "19.0.3": {
       "version": "19.0.3-beta.0",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/next",
-  "version": "21.6.1",
+  "version": "21.6.3",
   "private": false,
   "description": "The Next.js plugin for Nx contains executors and generators for managing Next.js applications and libraries within an Nx workspace. It provides:\n\n\n- Scaffolding for creating, building, serving, linting, and testing Next.js applications.\n\n- Integration with building, serving, and exporting a Next.js application.\n\n- Integration with React libraries within the workspace. \n\nWhen using Next.js in Nx, you get the out-of-the-box support for TypeScript, Playwright, Cypress, and Jest. No need to configure anything: watch mode, source maps, and typings just work.",
   "repository": {
@@ -35,7 +35,7 @@
     "next": ">=14.0.0"
   },
   "dependencies": {
-    "@nx/devkit": "21.6.1",
+    "@nx/devkit": "21.6.3",
     "@babel/plugin-proposal-decorators": "^7.22.7",
     "@svgr/webpack": "^8.1.0",
     "copy-webpack-plugin": "^10.2.4",
@@ -44,15 +44,15 @@
     "semver": "^7.5.3",
     "tslib": "^2.3.0",
     "webpack-merge": "^5.8.0",
-    "@nx/js": "21.6.1",
-    "@nx/eslint": "21.6.1",
-    "@nx/react": "21.6.1",
-    "@nx/web": "21.6.1",
-    "@nx/webpack": "21.6.1",
+    "@nx/js": "21.6.3",
+    "@nx/eslint": "21.6.3",
+    "@nx/react": "21.6.3",
+    "@nx/web": "21.6.3",
+    "@nx/webpack": "21.6.3",
     "@phenomnomnominal/tsquery": "~5.0.1"
   },
   "devDependencies": {
-    "nx": "21.6.1"
+    "nx": "21.6.3"
   },
   "publishConfig": {
     "access": "public"

package/plugins/with-nx.d.ts

@@ -6,8 +6,18 @@ import type { NextConfig } from 'next';
 import type { NextConfigFn } from '../src/utils/config';
 import { type ProjectGraphProjectNode } from '@nx/devkit';
 import type { AssetGlobPattern } from '@nx/webpack';
+export interface SvgrOptions {
+    svgo?: boolean;
+    titleProp?: boolean;
+    ref?: boolean;
+}
 export interface WithNxOptions extends NextConfig {
     nx?: {
+        /**
+         * @deprecated Add SVGR support in your Webpack configuration without relying on Nx. See https://react-svgr.com/docs/webpack/
+         * TODO(v22): Remove this option and migrate userland webpack config to explicitly configure @svgr/webpack
+         * */
+        svgr?: boolean | SvgrOptions;
         babelUpwardRootMode?: boolean;
         fileReplacements?: {
             replace: string;

package/plugins/with-nx.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"with-nx.d.ts","sourceRoot":"","sources":["../../../../packages/next/plugins/with-nx.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,MAAM,CAAC;AACvC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAExD,OAAO,EAGL,KAAK,uBAAuB,EAE7B,MAAM,YAAY,CAAC;AACpB,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAEpD,MAAM,WAAW,aAAc,SAAQ,UAAU;IAC/C,EAAE,CAAC,EAAE;QACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;QAC9B,gBAAgB,CAAC,EAAE;YAAE,OAAO,EAAE,MAAM,CAAC;YAAC,IAAI,EAAE,MAAM,CAAA;SAAE,EAAE,CAAC;QACvD,MAAM,CAAC,EAAE,gBAAgB,EAAE,CAAC;KAC7B,CAAC;CACH;AAED,MAAM,WAAW,aAAa;IAC5B,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,MAAM,CAAC;CACjB;AA+ED;;GAEG;AACH,iBAAS,MAAM,CACb,WAAW,GAAS,aAAa,EACjC,OAAO,GAAE,aAAkC,GAC1C,YAAY,CA0Hd;AAED,wBAAgB,aAAa,CAC3B,UAAU,GAAS,aAAa,EAChC,OAAO,GAAE,aAAkC,GAC1C,UAAU,CAwHZ;AAED,wBAAgB,kBAAkB,CAChC,IAAI,EAAE,uBAAuB,EAC7B,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,GAC9B,IAAI,GAAG,MAAM,CAcf;AAGD,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,IAAI,QAM3D;AASD,OAAO,EAAE,MAAM,EAAE,CAAC"}
+{"version":3,"file":"with-nx.d.ts","sourceRoot":"","sources":["../../../../packages/next/plugins/with-nx.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,MAAM,CAAC;AACvC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAExD,OAAO,EAGL,KAAK,uBAAuB,EAE7B,MAAM,YAAY,CAAC;AACpB,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAEpD,MAAM,WAAW,WAAW;IAC1B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,GAAG,CAAC,EAAE,OAAO,CAAC;CACf;AAED,MAAM,WAAW,aAAc,SAAQ,UAAU;IAC/C,EAAE,CAAC,EAAE;QACH;;;aAGK;QACL,IAAI,CAAC,EAAE,OAAO,GAAG,WAAW,CAAC;QAC7B,mBAAmB,CAAC,EAAE,OAAO,CAAC;QAC9B,gBAAgB,CAAC,EAAE;YAAE,OAAO,EAAE,MAAM,CAAC;YAAC,IAAI,EAAE,MAAM,CAAA;SAAE,EAAE,CAAC;QACvD,MAAM,CAAC,EAAE,gBAAgB,EAAE,CAAC;KAC7B,CAAC;CACH;AAED,MAAM,WAAW,aAAa;IAC5B,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,MAAM,CAAC;CACjB;AA+ED;;GAEG;AACH,iBAAS,MAAM,CACb,WAAW,GAAS,aAAa,EACjC,OAAO,GAAE,aAAkC,GAC1C,YAAY,CA0Hd;AAED,wBAAgB,aAAa,CAC3B,UAAU,GAAS,aAAa,EAChC,OAAO,GAAE,aAAkC,GAC1C,UAAU,CAwKZ;AAED,wBAAgB,kBAAkB,CAChC,IAAI,EAAE,uBAAuB,EAC7B,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,GAC9B,IAAI,GAAG,MAAM,CAcf;AAGD,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,IAAI,QAM3D;AASD,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/plugins/with-nx.js

@@ -237,6 +237,48 @@ function getNextConfig(nextConfig = {}, context = getWithNxContext()) {
                     : includes;
                 delete nextGlobalCssLoader.issuer.and;
             }
+            /**
+             * 5. Add SVGR support if option is on.
+             */
+            // Default SVGR support to be on for projects.
+            if (nx?.svgr !== false || typeof nx?.svgr === 'object') {
+                forNextVersion('>=15.0.0', () => {
+                    // Since Next.js 15, turbopack could be enabled by default.
+                    console.warn(`NX: Next.js SVGR support is deprecated. If used with turbopack, it may not work as expected and is not recommended. Please configure SVGR manually.`);
+                });
+                const defaultSvgrOptions = {
+                    svgo: false,
+                    titleProp: true,
+                    ref: true,
+                };
+                const svgrOptions = typeof nx?.svgr === 'object' ? nx.svgr : defaultSvgrOptions;
+                // TODO(v22): Remove SVGR support
+                config.module.rules.push({
+                    test: /\.svg$/,
+                    issuer: { not: /\.(css|scss|sass)$/ },
+                    resourceQuery: {
+                        not: [
+                            /__next_metadata__/,
+                            /__next_metadata_route__/,
+                            /__next_metadata_image_meta__/,
+                        ],
+                    },
+                    use: [
+                        {
+                            loader: require.resolve('@svgr/webpack'),
+                            options: svgrOptions,
+                        },
+                        {
+                            loader: require.resolve('file-loader'),
+                            options: {
+                                // Next.js hard-codes assets to load from "static/media".
+                                // See: https://github.com/vercel/next.js/blob/53d017d/packages/next/src/build/webpack-config.ts#L1993
+                                name: 'static/media/[name].[hash].[ext]',
+                            },
+                        },
+                    ],
+                });
+            }
             return userWebpack(config, options);
         },
     };

package/src/migrations/update-22-0-0/add-svgr-to-next-config.d.ts

@@ -1,3 +0,0 @@
-import { type Tree } from '@nx/devkit';
-export default function addSvgrToNextConfig(tree: Tree): Promise<import("@nx/devkit").GeneratorCallback>;
-//# sourceMappingURL=add-svgr-to-next-config.d.ts.map

package/src/migrations/update-22-0-0/add-svgr-to-next-config.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"add-svgr-to-next-config.d.ts","sourceRoot":"","sources":["../../../../../../packages/next/src/migrations/update-22-0-0/add-svgr-to-next-config.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,IAAI,EAQV,MAAM,YAAY,CAAC;AAKpB,wBAA8B,mBAAmB,CAAC,IAAI,EAAE,IAAI,mDA6Q3D"}

package/src/migrations/update-22-0-0/add-svgr-to-next-config.js

@@ -1,209 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = addSvgrToNextConfig;
-const devkit_1 = require("@nx/devkit");
-const executor_options_utils_1 = require("@nx/devkit/src/generators/executor-options-utils");
-const tsquery_1 = require("@phenomnomnominal/tsquery");
-const ts = require("typescript");
-async function addSvgrToNextConfig(tree) {
-    const projects = new Map();
-    // Find all Next.js projects using withNx that have svgr explicitly set to true or an options object
-    (0, executor_options_utils_1.forEachExecutorOptions)(tree, '@nx/next:build', (options, project, target) => {
-        const projectConfig = (0, devkit_1.readProjectConfiguration)(tree, project);
-        const nextConfigPath = `${projectConfig.root}/next.config.js`;
-        if (!tree.exists(nextConfigPath))
-            return;
-        const content = tree.read(nextConfigPath, 'utf-8');
-        if (!content.includes('withNx'))
-            return;
-        const ast = tsquery_1.tsquery.ast(content);
-        let svgrValue;
-        const nextConfigDeclarations = (0, tsquery_1.tsquery)(ast, 'VariableDeclaration:has(Identifier[name=nextConfig]) > ObjectLiteralExpression');
-        if (nextConfigDeclarations.length > 0) {
-            const objLiteral = nextConfigDeclarations[0];
-            const nxProp = objLiteral.properties.find((prop) => ts.isPropertyAssignment(prop) &&
-                ts.isIdentifier(prop.name) &&
-                prop.name.text === 'nx');
-            if (nxProp && ts.isObjectLiteralExpression(nxProp.initializer)) {
-                const svgrProp = nxProp.initializer.properties.find((prop) => ts.isPropertyAssignment(prop) &&
-                    ts.isIdentifier(prop.name) &&
-                    prop.name.text === 'svgr');
-                if (svgrProp) {
-                    // It's an object with options
-                    if (ts.isObjectLiteralExpression(svgrProp.initializer)) {
-                        svgrValue = {};
-                        for (const prop of svgrProp.initializer.properties) {
-                            if (!ts.isPropertyAssignment(prop))
-                                continue;
-                            if (!ts.isIdentifier(prop.name))
-                                continue;
-                            const key = prop.name.text;
-                            if (prop.initializer.kind === ts.SyntaxKind.TrueKeyword) {
-                                svgrValue[key] = true;
-                            }
-                            else if (prop.initializer.kind === ts.SyntaxKind.FalseKeyword) {
-                                svgrValue[key] = false;
-                            }
-                        }
-                    }
-                    // It's a boolean
-                    else {
-                        svgrValue =
-                            svgrProp.initializer.kind === ts.SyntaxKind.TrueKeyword;
-                    }
-                }
-            }
-        }
-        // If svgr is not defined, skip this project
-        if (svgrValue === undefined)
-            return;
-        projects.set(nextConfigPath, {
-            svgrOptions: svgrValue,
-        });
-    });
-    if (projects.size === 0)
-        return;
-    // Update next.config.js files to add SVGR webpack configuration
-    for (const [nextConfigPath, config] of projects.entries()) {
-        let content = tree.read(nextConfigPath, 'utf-8');
-        const ast = tsquery_1.tsquery.ast(content);
-        const changes = [];
-        const nextConfigDeclarations = (0, tsquery_1.tsquery)(ast, 'VariableDeclaration:has(Identifier[name=nextConfig]) > ObjectLiteralExpression');
-        if (nextConfigDeclarations.length > 0) {
-            const objLiteral = nextConfigDeclarations[0];
-            const nxProp = objLiteral.properties.find((prop) => ts.isPropertyAssignment(prop) &&
-                ts.isIdentifier(prop.name) &&
-                prop.name.text === 'nx');
-            if (nxProp && ts.isObjectLiteralExpression(nxProp.initializer)) {
-                const svgrProp = nxProp.initializer.properties.find((prop) => ts.isPropertyAssignment(prop) &&
-                    ts.isIdentifier(prop.name) &&
-                    prop.name.text === 'svgr');
-                if (svgrProp) {
-                    const nxObj = nxProp.initializer;
-                    const hasOnlySvgrProperty = nxObj.properties.length === 1;
-                    // Remove svgr property and leave remaining ones
-                    if (hasOnlySvgrProperty) {
-                        changes.push({
-                            type: devkit_1.ChangeType.Delete,
-                            start: nxObj.getStart(),
-                            length: nxObj.getEnd() - nxObj.getStart(),
-                        });
-                        changes.push({
-                            type: devkit_1.ChangeType.Insert,
-                            index: nxObj.getStart(),
-                            text: '{}',
-                        });
-                    }
-                    // If svgr property is the only property, remove the entire nx object
-                    else {
-                        const propIndex = nxObj.properties.indexOf(svgrProp);
-                        const isLastProp = propIndex === nxObj.properties.length - 1;
-                        const isFirstProp = propIndex === 0;
-                        let removeStart = svgrProp.getFullStart();
-                        let removeEnd = svgrProp.getEnd();
-                        // Handle comma removal
-                        if (!isLastProp) {
-                            // Remove trailing comma
-                            const nextProp = nxObj.properties[propIndex + 1];
-                            removeEnd = nextProp.getFullStart();
-                        }
-                        else if (!isFirstProp) {
-                            // Remove preceding comma from previous property
-                            const prevProp = nxObj.properties[propIndex - 1];
-                            const textBetween = content.substring(prevProp.getEnd(), svgrProp.getFullStart());
-                            const commaIndex = textBetween.indexOf(',');
-                            if (commaIndex !== -1) {
-                                removeStart = prevProp.getEnd() + commaIndex;
-                            }
-                        }
-                        changes.push({
-                            type: devkit_1.ChangeType.Delete,
-                            start: removeStart,
-                            length: removeEnd - removeStart,
-                        });
-                    }
-                }
-            }
-        }
-        // Only add SVGR webpack config if svgrOptions is true or an object
-        if (config.svgrOptions === true || typeof config.svgrOptions === 'object') {
-            let svgrOptions = '';
-            if (config.svgrOptions === true) {
-                svgrOptions = `{
-      svgo: false,
-      titleProp: true,
-      ref: true,
-    }`;
-            }
-            else if (typeof config.svgrOptions === 'object') {
-                const options = Object.entries(config.svgrOptions)
-                    .map(([key, value]) => `      ${key}: ${value}`)
-                    .join(',\n');
-                svgrOptions = `{\n${options}\n    }`;
-            }
-            const svgrWebpackFunction = `(config) => {
-  const originalWebpack = config.webpack;
-  // @ts-ignore
-  config.webpack = (webpackConfig, ctx) => {
-    // Add SVGR support
-    webpackConfig.module.rules.push({
-      test: /\.svg$/,
-      issuer: { not: /\.(css|scss|sass)$/ },
-      resourceQuery: {
-        not: [
-          /__next_metadata__/,
-          /__next_metadata_route__/,
-          /__next_metadata_image_meta__/,
-        ],
-      },
-      use: [
-        {
-          loader: require.resolve('@svgr/webpack'),
-          options: ${svgrOptions},
-        },
-        {
-          loader: require.resolve('file-loader'),
-          options: {
-            name: 'static/media/[name].[hash].[ext]',
-          },
-        },
-      ],
-    });
-    return originalWebpack
-      ? originalWebpack(webpackConfig, ctx)
-      : webpackConfig;
-  };
-  return config;
-};`;
-            const pluginsArrayDeclarations = (0, tsquery_1.tsquery)(ast, 'VariableDeclaration:has(Identifier[name=plugins]) ArrayLiteralExpression');
-            if (pluginsArrayDeclarations.length > 0) {
-                const pluginsArray = pluginsArrayDeclarations[0];
-                const pluginsStatement = pluginsArray.parent.parent;
-                changes.push({
-                    type: devkit_1.ChangeType.Insert,
-                    index: pluginsStatement.getEnd(),
-                    text: `\n\n// Add SVGR webpack config function\n// @ts-ignore\nconst withSvgr = ${svgrWebpackFunction};`,
-                });
-            }
-            const composePluginsCalls = (0, tsquery_1.tsquery)(ast, 'CallExpression[expression.name=composePlugins]');
-            if (composePluginsCalls.length > 0) {
-                const composeCall = composePluginsCalls[0];
-                const spreadArg = composeCall.arguments.find((arg) => ts.isSpreadElement(arg));
-                if (spreadArg) {
-                    changes.push({
-                        type: devkit_1.ChangeType.Insert,
-                        index: spreadArg.getEnd(),
-                        text: ', withSvgr',
-                    });
-                }
-            }
-        }
-        content = (0, devkit_1.applyChangesToString)(content, changes);
-        tree.write(nextConfigPath, content);
-    }
-    await (0, devkit_1.formatFiles)(tree);
-    // Add file-loader as a dev dependency since it's now required for SVGR
-    return (0, devkit_1.addDependenciesToPackageJson)(tree, {}, {
-        'file-loader': '^6.2.0',
-    });
-}